كيفية الاستخدام
- اكتب لونًا أو الصقه، مثل #1e90ff أو rgb(30 144 255) أو oklch(65% 0.18 250). يمكنك أيضًا النقر على منتقي الألوان.
- تحقّق من عينة اللون للتأكد من أنها اللون الذي تتوقعه.
- انسخ الصيغة التي تحتاج إليها من القائمة. وتحتفظ القيم التي تتضمن شفافية بقيمة ألفا.
كيف تعمل الأداة
المدخلات المقبولة: HEX مكوّن من 3 أو 4 أو 6 أو 8 أرقام (يمثل الرقمان الرابع والثامن ألفا)، وrgb() وrgba() باستخدام أرقام أو نسب مئوية، وhsl() وhsla() وhwb() وoklch() وcmyk() باستخدام نسب مئوية أو أرقام من 0 إلى 100. تعمل الصيغة التقليدية بالفواصل والصيغة الحديثة بالمسافات مع «/ alpha» كلتاهما. يقبل Hue الوحدات deg وturn وrad وgrad. لا تُقرأ أسماء الألوان مثل «tomato»؛ استخدم منتقي الألوان أو أدخل رمزًا بدلًا منها.
تُجرى جميع التحويلات عبر sRGB. تمثل HSL وHWB قيم RGB بطرق مختلفة فحسب، لذا يكون التحويل بين هذه الصيغ دقيقًا. أما OKLCH فهو فضاء لوني إدراكي: تبدو الخطوات المتساوية في السطوع مختلفةً بدرجة متقاربة تقريبًا، ما يجعله مفيدًا لإنشاء لوحات الألوان. ويُحسب باستخدام مصفوفات OKLab المنشورة. بعض ألوان OKLCH تقع خارج نطاق الألوان التي يمكن لـsRGB عرضها؛ وتنبّه الأداة إلى ذلك وتعرض أقرب لون قابل للعرض.
يُحسب CMYK باستخدام الصيغة التقريبية الشائعة (K = 1 − أكبر قناة RGB). تعتمد نتائج الطباعة الفعلية على الورق والحبر وملف ICC، لذا اعتبر هذه الأرقام نقطة بداية لا مواصفات للطباعة.
أمثلة
من رمز HEX للعلامة التجارية إلى CSS
يتضمن دليل الأنماط الرمز #0b5d1e. الصقه لتحصل على rgb(11, 93, 30) لاستخدامه في إصدارات CSS الأقدم، وhsl(133.9, 78.8%, 20.4%) لضبط السطوع يدويًا، وقيمة oklch() لدوال الألوان الحديثة في CSS.
قراءة لون يتضمن شفافية
يتحول rgba(0, 0, 0, 0.5) إلى #00000080. يمثّل آخر رقمي HEX (80) قيمة ألفا: 128 من 255، أي نحو 50 %.
التحقق من قيمة OKLCH في ملف تصميم
يمثل oklch(70% 0.4 150) لونًا أخضر مشبعًا للغاية لا تستطيع شاشات sRGB عرضه. تنبّه الأداة إلى ذلك وتعرض أقرب لون sRGB، لتعرف أن التصميم سيبدو مختلفًا على معظم الشاشات.
الأسئلة الشائعة
لماذا تتغير قيمة HEX أحيانًا بدرجة واحدة عند التحويل إلى HSL ثم العودة؟
يخزّن HEX أعدادًا صحيحة من 0 إلى 255 لكل قناة. تُقرّب القيم في الصيغ الأخرى عند عرضها (HSL إلى منزلة عشرية واحدة)، وقد يؤدي تحويل قيمة مقربة إلى الصيغة الأصلية إلى اختلاف بمقدار درجة واحدة. انسخ HEX إذا كنت تحتاج إلى القيمة الأصلية بدقة.
هل قيمة CMYK مناسبة للطباعة؟
لا، ليس بمفرده. فهو يستخدم صيغة مبسطة من دون ملف تعريف لوني. تستخدم الطابعات ملفات تعريف مثل FOGRA أو GRACoL تعطي أرقامًا مختلفة، لذا استشر المطبعة أو أجرِ التحويل في تطبيق يدعم إدارة الألوان.
ما هو OKLCH؟ وهل يمكنني استخدامه في CSS؟
يصف OKLCH اللون وفق السطوع المُدرَك والتشبع اللوني (حيوية اللون) والتدرج اللوني. تدعم الإصدارات الحالية من المتصفحات الرئيسية oklch() في CSS. أضف قيمة HEX أو rgb() احتياطية إذا كنت تريد دعم المتصفحات الأقدم.
ما معنى رمز HEX المكوّن من 8 أرقام؟
#RRGGBBAA: يمثّل الرقمان الأخيران مستوى العتامة، من 00 (شفاف تمامًا) إلى ff (معتم تمامًا). وتعمل الصيغة ذات 4 أرقام #RGBA بالطريقة نفسها، باستخدام رقم واحد لكل قناة.
الخصوصية
تُحوّل الألوان في متصفحك. لا يُرسل أي شيء تدخله إلى أي جهة ولا يُخزّن.