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

اللون الذي يظهر على الشاشة هو مزيج من الضوء الأحمر والأخضر والأزرق، ويكتب كل تنسيق هذا المزيج بطريقته الخاصة. تستخدم 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 XYZ الذي يستند إليه 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 اسمان للنموذج نفسه.