محوّل الألوان - أداة مجانية عبر الإنترنت

الميزات

HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK

منتقي ألوان مرئي

معاينة حية

إخراج متغيرات CSS

طريقة الاستخدام

1. اختر لونًا (أو انقر على منطقة العمل، أو الصق قيمة HEX، أو استخدم القطّارة، أو اضغط مسافة للون عشوائي).

2. كل الصيغ — HEX وRGB وHSL وOKLCH — تتحوّل مباشرة في الاتجاهين.

3. انسخ قيمة واحدة أو كتلة متغيرات CSS كاملة؛ وبدّل الخلفية لتقييم اللون على الأبيض أو الرمادي أو الداكن.

حول هذه الأداة

يختار المصممون الألوان بالعين، ويحتاج CSS إلى نص، وكل أداة تتحدث بصيغة مختلفة. يُبقي هذا المحوّل لونًا واحدًا متزامنًا بصيغ HEX وRGB وHSL وOKLCH: غيّر أي حقل أو استخدم منتقي الألوان فتتحدث البقية فورًا. تصف HEX وRGB قنوات الأحمر والأخضر والأزرق، وتصف HSL درجة اللون والتشبع والإضاءة، وهي أسهل في الضبط اليدوي، أما OKLCH فصيغة إدراكية أحدث من CSS Color Level 4 تبدو فيها الخطوات المتساوية في الإضاءة متساوية للعين، ما يجعلها أفضل لبناء لوحات ألوان متناسقة. يمكنك نسخ قيمة واحدة أو كتلة جاهزة من خصائص CSS المخصصة، ومعاينة اللون على خلفية بيضاء أو رمادية أو داكنة قبل استخدامه.

الأسئلة الشائعة

أي صيغة أستخدم في CSS؟

‏HEX وrgb() تعملان في كل مكان وتصلحان للألوان الثابتة. ‏hsl() مناسبة عندما تريد ضبط الإضاءة أو التشبع يدويًا. ‏oklch() مدعومة في المتصفحات الحالية وهي الأفضل للوحات الألوان المنهجية لأن إضاءتها متجانسة إدراكيًا.

لماذا تبدو ألوان HSL ذات الإضاءة 50% متفاوتة جدًا في السطوع؟

‏HSL إعادة ترتيب رياضية لـ RGB وليست نموذجًا للرؤية البشرية، لذلك يبدو الأصفر عند 50% أسطع بكثير من الأزرق عند 50%. أما إضاءة OKLCH فمصممة لتطابق السطوع المُدرَك، ولهذا يتزايد استخدامها في أنظمة التصميم.

لماذا قد تختلف القيمة قليلًا عند تحويلها ذهابًا وإيابًا؟

تخزّن HEX وRGB أعدادًا صحيحة من 0 إلى 255، بينما تستخدم HSL وOKLCH أعدادًا عشرية. قد يحرّك التقريب أثناء التحويل قناةً ما بخطوة واحدة، وهو فرق لا تراه العين.

هل يمكنني التقاط لون من مكان آخر على الشاشة؟

في المتصفحات التي تدعم واجهة EyeDropper، مثل Chrome وEdge على الحاسوب، يتيح زر القطارة التقاط لون أي بكسل على الشاشة. أما المتصفحات الأخرى فتعرض منتقي الألوان القياسي بدلًا من ذلك.

ماذا تحتوي كتلة متغيرات CSS؟

تسرد اللون نفسه كخصائص مخصصة بعدة صيغ، مثل --color-hex و--color-rgb و--color-hsl و--color-oklch، لتلصقها في :root وتستخدم الصيغة التي تحتاجها شيفرتك.