ماذا تعني كل تنسيقات الألوان هذه؟

اللون الذي يظهر على الشاشة هو مزيج من الضوء الأحمر والأخضر والأزرق، ولكل تنسيق طريقته الخاصة في كتابة هذا المزيج. تستخدم CSS وأدوات التصميم رموز HEX وقيم RGB. تصف HSL وHSV وHWB اللون من خلال درجة لونه، أي الزاوية على عجلة الألوان، ومدى تشبعه وإضاءته، ما يجعل تعديله يدويًا أسهل. يحدد CMYK كميات أحبار السماوي والأرجواني والأصفر والأسود المستخدمة في الطباعة. صُممت LAB وLCH وOKLab وOKLCH بحيث تبدو الخطوات المتساوية في قيمها متساوية للعين، ما يفيد في إنشاء لوحات الألوان والتدرجات، وتدعم CSS الحديثة التنسيقات الأربعة. تستخدم الطرفيات رموز ألوان ANSI، كما تضم CSS ألوانًا مسماة مثل tomato.

إليك اللون البرتقالي نفسه بكل تنسيق:

التنسيق المثال مدلول القيم
HEX #ff6600 الأحمر والأخضر والأزرق، ويُمثَّل كل منها برقمين بالنظام الست عشري
RGB rgb(255, 102, 0) الأحمر والأخضر والأزرق بقيم من 0 إلى 255
HSL hsl(24, 100%, 50%) درجة اللون والتشبع والإضاءة
HSV hsv(24, 100%, 100%) درجة اللون والتشبع والقيمة، ويُسمى أيضًا HSB
HWB hwb(24 0% 0%) درجة اللون والبياض والسواد
CMYK cmyk(0%, 60%, 100%, 0%) أحبار السماوي والأرجواني والأصفر والأسود
LAB lab(62.31, 55, 71.33) الإضاءة وفق CIE، من الأخضر إلى الأحمر، ومن الأزرق إلى الأصفر
LCH lch(62.31, 90.07, 52.36) الإضاءة والصفاء ودرجة اللون وفق CIE
OKLab oklab(69.58% 0.1482 0.1406) الإضاءة ومحورا اللون، وفق نموذج أحدث من LAB
OKLCH oklch(69.58% 0.2043 43.49) الإضاءة والصفاء ودرجة اللون وفق OKLab
XYZ xyz(46, 30.77, 3.52) فضاء الألوان CIE 1931 الذي يستند إليه LAB
HCG hcg(24, 100%, 0%) درجة اللون والصفاء والرمادية
اسم اللون orangered أقرب لون مسمى في CSS
ANSI 16 91 رمز الطرفية لأحد الألوان الأساسية الستة عشر
ANSI 256 208 رمز الطرفية لأحد الألوان الـ256
AppleScript RGB {65535, 26214, 0} الأحمر والأخضر والأزرق بقيم من 0 إلى 65535، كما تكتبها AppleScript
تدرج الرمادي gray(46.7%) السطوع من 0% إلى 100%

وصف الأداة

تحوّل هذه الأداة الألوان بين 17 تنسيقًا، وتعرض اللون في عينة أسفل النتيجة. تعمل جميع محوّلات الألوان هنا بالطريقة نفسها، بدءًا من محوّل الألوان العام ووصولًا إلى المحوّلات المخصصة لزوج واحد، مثل HEX إلى RGB أو RGB إلى CMYK أو HEX إلى اسم لون: تبدأ الأداة بالتنسيقات المذكورة في اسمها، وتتيح قائمتا المصدر والهدف التبديل إلى أي تنسيق آخر. الصق لونًا وستظهر النتيجة أثناء الكتابة، لتكون جاهزة للنسخ. عند اختيار الكشف التلقائي مصدرًا، وهو الإعداد الافتراضي لمحوّل الألوان، تحدد الأداة التنسيق من طريقة كتابة اللون. يعكس زر التبديل اتجاه التحويل.

أمثلة

الإدخال الهدف النتيجة
#ff6600 RGB rgb(255, 102, 0)
rgb(37, 99, 235) HEX #2563eb
#2563eb HSL hsl(221.2, 83.2%, 53.3%)
rgb(37, 99, 235) CMYK cmyk(84.3%, 57.9%, 0%, 7.8%)
#2563eb HSV hsv(221.2, 84.3%, 92.2%)
#2563eb OKLCH oklch(54.61% 0.2152 262.88)
rgb(37, 99, 235) LAB lab(46.06, 30.96, -73.83)
#ff6347 اسم اللون tomato
rebeccapurple HEX #663399
rgba(37, 99, 235, 0.5) HEX #2563eb80

ما يمكنك لصقه

  • رموز HEX المكوّنة من 3 أو 4 أو 6 أو 8 أرقام، مع # أو بدونه. يحدد الرقم الرابع أو الزوج الأخير مستوى العتامة.
  • دوال مثل rgb() أو hsl() أو oklch()، مع استخدام الفواصل أو المسافات بين القيم، ويمكن إضافة مستوى العتامة اختياريًا كقيمة رابعة أو بعد شرطة مائلة: rgba(37, 99, 235, 0.5) أو rgb(37 99 235 / 50%).
  • النسب المئوية للأحمر والأخضر والأزرق، مثل rgb(100%, 40%, 0%)، ودرجات اللون بوحدات deg أو rad أو grad أو turn، مثل hsl(0.5turn, 100%, 50%).
  • أرقام مجردة من دون اسم دالة، مثل 255, 102, 0. يتعامل الكشف التلقائي مع ثلاثة أرقام على أنها RGB، أو HSL إذا كانت القيمتان الأخيرتان نسبتين مئويتين، ومع أربعة أرقام على أنها CMYK، ما لم تبدُ كأنها قيم RGB مع مستوى عتامة.
  • أسماء الألوان بأي حالة أحرف، مع المسافات أو من دونها: يقبل Rebecca Purple.
  • قيم HSB المكتوبة بصيغة hsb()، وألوان AppleScript بين أقواس معقوفة، مثل {65535, 26214, 0}.

آلية العمل

تُجرى العمليات الحسابية باستخدام color-convert، وهي مكتبة JavaScript لتحويل الألوان.

  • ينتقل مستوى العتامة إلى HEX وRGB وHSL وHWB وOKLab وOKLCH، إذ يمكن لهذه التنسيقات كتابته. أما التنسيقات الأخرى فلا تتضمنه.
  • قيم LAB وLCH وXYZ هي قيم CIE ذات النقطة البيضاء D65. تستخدم lab() وlch() في CSS النقطة البيضاء D50، لذا تختلف قيمها قليلًا.
  • يمكن لتنسيقات LAB وLCH وOKLab وOKLCH وصف ألوان لا تستطيع الشاشات عرضها. عند تحويل لون كهذا إلى HEX أو RGB أو أي تنسيق آخر للشاشات، تُقصّ قنواته إلى النطاق من 0 إلى 255، لذا تتحول oklch(70% 0.3 145) إلى #00c800.
  • تكون نتيجة اسم اللون أقرب لون من الألوان المسماة في CSS، لذا لا تكون مطابقة تمامًا إلا للألوان التي لها اسم: يعطي #ff6600 النتيجة orangered، وهي #ff4500.
  • نتائج ANSI 16 وANSI 256 تقريبية، لأن لوحتي الألوان هاتين لا تحتويان إلا على 16 أو 256 لونًا. نتائج ANSI 16 هي رموز ألوان المقدمة، من 30 إلى 37 ومن 90 إلى 97، وتُقرأ رموز الخلفية من 40 إلى 47 ومن 100 إلى 107 على أنها الألوان نفسها.
  • تُحسب CMYK باستخدام الصيغة الأساسية، من دون ملف تعريف ألوان للطابعة، لذا قد تختلف قيم CMYK للون نفسه لدى مطبعة.
  • تدرج الرمادي هو متوسط قيم الأحمر والأخضر والأزرق.

نصائح

  • نتائج HEX وRGB وHSL وHWB وOKLab وOKLCH واسم اللون صالحة للاستخدام في CSS، لذا يمكنك لصقها مباشرة في ورقة أنماط.
  • يتعامل الكشف التلقائي مع رقم من ثلاثة أرقام مثل 208 على أنه رمز HEX قصير، لذا اختر ANSI 256 أو ANSI 16 مصدرًا لرموز الطرفية.
  • HSV وHSB اسمان للنموذج نفسه.