منتقي الألوان
اختر الألوان وحوّل بين HEX وRGB وHSL
نسبة التباين
اللون التكميلي & الألوان المتشابهة
رموز الألوان: HEX و RGB و HSL
HEX وRGB وHSL هي ثلاثة أساليب لتمثيل الألوان في الحاسوب. HEX (مثل: #FF5733) هو الأكثر استخداماً على الويب، وRGB (مثل: rgb(255,87,51)) يمزج قيم الأحمر والأخضر والأزرق، وHSL (مثل: hsl(11,100%,60%)) يستخدم درجة اللون والتشبع والإضاءة. تصف الأشكال الثلاثة اللون ذاته بطرق مختلفة.
ما هي نسبة تباين WCAG؟
تشترط معايير WCAG الإمكانية AA نسبة تباين لا تقل عن 4.5:1 بين النص والخلفية. هذا هو الحد الأدنى الذي يتيح لمستخدمي ضعاف البصر قراءة النص دون أدوات مساعدة. المعيار AAA أصعب تطبيقاً ويشترط 7:1.
HSL: نموذج الألوان البديهي
يستخدم HSL درجة اللون (Hue: 0-360°) والتشبع (Saturation: 0-100%) والإضاءة (Lightness: 0-100%) لوصف الألوان بشكل أكثر بديهية من RGB. لإنشاء نسخة أفتح من لون العلامة التجارية، ما عليك إلا رفع قيمة L دون حسابات RGB معقدة. يُستخدم HSL على نطاق واسع في أنظمة التصميم لسهولة التعديل.
استخدام الألوان التكميلية والمتشابهة
الألوان التكميلية تقع على بُعد 180° في دائرة الألوان (كالأزرق والبرتقالي، الأحمر والأخضر)، مما يخلق تباينًا عالياً وحيوية بصرية. الألوان المتشابهة هي المتجاورة (كالأزرق والبنفسجي الأزرق والبنفسجي)، مما يُنتج لوحات ألوان منسجمة. يتضمن نظام الألوان الجيد للواجهات لوناً رئيسياً ولون تمييز وألوان محايدة وألوان دلالية.
إدارة الألوان بـ CSS Custom Properties
تُتيح خصائص CSS المخصصة (المتغيرات) إدارة الألوان بشكل مركزي: عَرِّف --color-primary: #2563EB; ثم استخدمه في كل مكان كـ background-color: var(--color-primary). عند الحاجة لتغيير لون العلامة التجارية، يكفي تعديل مكان واحد. اجمعها مع @media (prefers-color-scheme: dark) للتبديل السهل بين الوضع الداكن والفاتح.