محول الألوان
حوّل الألوان بين HEX وRGB وHSL وغيرها.
واجهة الأداة نفسها باللغة الإنجليزية حاليًا، وتعمل بالكامل داخل متصفحك.
جارٍ تحميل الأداة…
كيف يُكتب اللون على الويب
للون الواحد عدة صيغ. فالصيغة الست عشرية، مثل #3B82F6، ترمّز الأحمر والأخضر والأزرق برقمين ست عشريين لكل منها. وصيغة RGB تكتب القنوات نفسها كأعداد عشرية من 0 إلى 255. أما HSL فتصف اللون بدلًا من ذلك كدرجة لون بالدرجات حول عجلة الألوان، إضافة إلى نسبتي التشبع والإضاءة، وهي أكثر بديهية بكثير في أعمال التصميم: لتفتيح لون تغيّر رقمًا واحدًا بدل تخمين ثلاثة. والطباعة تستخدم CMYK، وهو نموذج مختلف تمامًا قائم على الحبر الطارح لا على الضوء المنبعث.
والتحويل بين RGB وHSL حساب دقيق، فكلاهما يصف فضاء sRGB نفسه. أما CMYK فليس دقيقًا، لأن نطاق ألوان الحبر ونطاق ألوان الشاشة لا يتطابقان تمامًا؛ فالأزرق الزاهي على الشاشة لا يمكن ببساطة إعادة إنتاجه بأحبار الطباعة، لذا فأي تحويل تقريب يحسّنه سير عمل مُدار الألوان بشكل صحيح.
لماذا أنشأنا هذه الأداة
يتنقل المصممون والمطورون بين هذه الصيغ طوال اليوم: دليل الهوية يعطي CMYK، وملف التصميم يعطي الصيغة الست عشرية، ومتغير CSS يريد HSL ليولّد القالب حالات التمرير، وإضافة قديمة تصر على RGB.
إنه حساب سريع، ولا سبب لأن يتضمن خادمًا، ومع ذلك تمرر معظم المحولات على الإنترنت كل ضغطة مفتاح عبر خادم. نحن نفعله داخل متصفحك، فيكون التحويل فوريًا، وتبقى ألوان العلامات التجارية غير المنشورة بعيدة عن أجهزة الآخرين، ويعمل دون اتصال.
نصائح وأخطاء شائعة
- اعمل بصيغة HSL عند بناء الدرجات الفاتحة والداكنة؛ فتغيير رقم واحد يُبقي درجة اللون ثابتة.
- افحص أزواج النص والخلفية وفق نسب تباين WCAG: 4.5:1 للنص العادي، و3:1 للنص الكبير.
- ناتج CMYK تقريبي؛ تحقق من الأعمال المطبوعة الحساسة للألوان بنسخة تجريبية مطبوعة.
- الصيغة الست عشرية بثمانية أرقام تحمل قناة شفافية، وبعض الأدوات القديمة تتجاهلها بصمت.
بداية سريعة: استخدام محول الألوان
- أدخل لونًا بالصيغة التي لديك: ست عشرية أو RGB أو HSL.
- اقرأ القيم المكافئة بالصيغ الأخرى فورًا.
- عدّل الإضاءة أو التشبع في HSL لبناء درجات فاتحة وداكنة من اللون نفسه.
- انسخ الصيغة التي يحتاجها ملف التنسيق أو أداة التصميم.
- تعامل مع ناتج CMYK كتقريب وتحقق منه بنسخة مطبوعة.
لأخذ لون من صورة بدلًا من كتابته، استخدم منتقي الألوان.
الصيغ الثلاث الرئيسية
- HEX:
#RRGGBB، رقمان ست عشريان لكل من الأحمر والأخضر والأزرق. الافتراضية في الويب، مدمجة، ومستخدمة في كل مكان في CSS. - RGB:
rgb(r, g, b)، القنوات نفسها كأعداد من 0 إلى 255. المعلومات نفسها، أوضح قراءة، وrgba()تضيف الشفافية. - HSL:
hsl(hue, saturation, lightness). طريقة مختلفة للتفكير في اللون: درجة اللون هي اللون نفسه (من 0 إلى 360 درجة حول عجلة الألوان)، والتشبع مدى حيويته، والإضاءة مدى سطوعه.
لماذا يستحق HSL التعلم
صيغتا HEX وRGB دقيقتان لكنهما غير بديهيتين؛ فلا تستطيع النظر إلى #3A7BD5 ومعرفة كيف تجعله أدكن قليلًا. أما HSL فتجعل التلاعب باللون واضحًا:
- تريده أدكن؟ اخفض الإضاءة.
- تريده أهدأ؟ اخفض التشبع.
- تريد لونًا متناسقًا؟ أبقِ التشبع والإضاءة وغيّر درجة اللون.
ولهذا تُفضَّل HSL لتوليد تنويعات الألوان وبناء لوحات متناغمة. صمّم بـ HSL، وحوّل إلى HEX لملف التنسيق.
الشفافية
لكل من RGB وHSL صيغة بقناة ألفا، rgba() وhsla()، تضيف قناة عتامة من 0 (غير مرئي) إلى 1 (مصمت). ويمكن لـ HEX ترميز الشفافية أيضًا كزوج رابع من الأرقام (#3A7BD5CC)، وإن كانت الصيغ العددية أوضح لذلك.
استخدامات شائعة
- ترجمة رمز HEX إلى RGB لبرنامج رسوم.
- توليد تنويعات أدكن أو أفتح عبر HSL.
- إضافة شفافية بـ rgba/hsla.
- مطابقة الألوان بين أدوات تريد صيغًا مختلفة.