منتقي الألوان: HEX، RGB، HSL 600 وفحص التباين الذي تخطيته

علامتنا التجارية البرتقالية هي #E99537. يعجبني. إنه &#39؛s دافئ، &#39؛s ليس بنفس اللون البرتقالي مثل أي شخص آخر &#39؛s، وهو يجلس بجوار اللون الأزرق دون قتال.

لقد استخدمته كلون رابط على اللون الأبيض لعدة أشهر.

ثم قمت بالفعل بتشغيل الأرقام. #E99537 على #FFFFFF يعطي نسبة التباين 2.38:1. WCAG 2.1 SC 1.4.3 يتطلب 4.5:1 للنص العادي. لا &#39؛ حتى أنه مسح شريط 3:1 لـ كبير نص. كان كل رابط برتقالي على هذا الموقع، وفقًا للمعايير التي زعمت أنني أهتم بها، غير قابل للقراءة - وقد بدا لي جيدًا تمامًا، على شاشتي، في مكتبي، بعيني.

That&#39؛s الشيء المتعلق بالألوان: إدراكك له ليس قياسًا. #E99537 على قواتنا البحرية #0F172A عشرات 7.50:1، AAA بشكل مريح. نفس اللون، حكم مختلف تمامًا، ولم يكن لي أي قدر من التحديق فيه. عليك أن تحسبه.

ال منتقي الألوان يقوم Toolz.dev بالتحويل بين HEX وRGB وHSL ويظهر لك نسبة التباين في المتصفح بدون تحميل. هذا الدليل هو ما أتمنى أن يقرأه I&#39؛ قبل أن أقوم بشحن تلك الروابط.

ليرة تركية؛DR: يستخدم عرافة للقيم الثابتة، HSL كلما كنت بحاجة إلى ذلك يشتق لون (حالات التمرير، واللوحات، والوضع الداكن) لأن الخفة هي رقم يمكنك طرحه منه، و RGBA/HSLA عندما تحتاج ألفا. التباين هو 4.5:1 للنص الأساسي و3:1 للنص الكبير - تحقق منه، don&#39؛ في مقلة العين ذلك. منتقي الألوان هل التحويلات والنسبة. ثم خذ توقفاتك إلى مولد التدرج.

HEX، RGB، HSL: ماذا &#39؛s الفرق الفعلي؟

يصفون جميعًا نفس ألوان sRGB. ما يختلف هو الأسئلة التي يسهل الإجابة عليها.

عرافة

ثلاث بايتات بالنظام الست عشري. #4466EE هو أحمر 44 (68)، أخضر 66 (102)، أزرق EE (238). الاختزال #RGB يعمل فقط عندما يتم مضاعفة كل زوج - #FF0000 ينهار ل #F00لكن #4466EE لا يمكن تقصيرها. يضيف النموذج المكون من 8 أرقام ألفا: #4466EE80 معتم بنسبة 50% تقريبًا.

It&#39؛s هو الإعداد الافتراضي في CSS لأنه &#39؛s مضغوط ولا لبس فيه. كما أنه معتم تمامًا للقراءة البشرية، ولهذا السبب لم أنظر أبدًا إلى الكود السداسي وأعرف ما يجب تغييره لجعله أقل تشبعًا.

آر جي بي

نفس القنوات الثلاث، عشرية، 0 بوصة 255. يقوم بناء جملة CSS Color 4 الحديث بإسقاط الفواصل rgb(68 102 238 / 80%). RGB هو ما تريده في JavaScript وCanvas وWebGL، لأنه &#39؛s هو التنسيق الذي يستهلكه كل شيء في اتجاه مجرى النهر بالفعل ويمكنك إجراء العمليات الحسابية عليه.

HSL - الذي يكسب مكانه

درجة اللون (0 درجة حرارة 360° حول العجلة)، التشبع (0 درجة حرارة 100%)، الخفة (0 درجة حرارة 100%). #4466EE يكون hsl(228, 83%, 60%).

هنا&#39؛s لماذا يهم ذلك. يجب أن تكون حالة التمرير للزر &#39؛ &quot؛ نفس اللون، أغمق قليلاً.&quot؛ في HEX that&#39؛s سؤال غير قابل للإجابة. في HSL it&#39؛s الطرح:

.btn {
  background: hsl(228 83% 60%);   /* #4466EE */
}
.btn:hover  { background: hsl(228 83% 52%); }  /* darker  */
.btn:active { background: hsl(228 83% 44%); }  /* darker still */
.btn:disabled { background: hsl(228 22% 70%); } /* desaturated, lifted */

أربع حالات، لون واحد، لا توجد أداة تصميم. هذا هو 90% من سبب وجود HSL في مجموعة أدواتي.

المشكلة - وهي &#39؛ هي أن خفة HSL هي كذلك لا الإدراكي. hsl(60 100% 50%) (أصفر) و hsl(240 100% 50%) (أزرق) كلاهما يدعي خفة بنسبة 50%، أحدهما سيحرق شبكية العين بينما الآخر أسود تقريبًا. هذا &#39؛s المشكلة OKLCH تحل.

أوكلش، لفترة وجيزة

مستوى اللون CSS 4 يجلب oklch(L C H)حيث L مُتَحسَن خفة. لونان بنفس L يبدوان ساطعين بنفس القدر. It&#39؛s الأداة المناسبة لإنشاء منحدر نغمي حيث تبدو كل خطوة متباعدة بشكل متساوٍ، وهي&#39؛s ما I&#39؛d تستخدمه لنظام تصميم جديد اليوم. It&#39؛s أيضًا لماذا linear-gradient(in oklch, blue, yellow) لا &#39؛ يتحول إلى اللون الرمادي في المنتصف - راجع دليل مولد التدرج CSS.

كميك

طباعة فقط. CSS ليس لديه CMYK. إذا سلمك دليل العلامة التجارية قيم CMYK، فيجب على شخص ما تحويلها إلى sRGB، ويكون التحويل تقريبيًا لأن النطاقات تختلف حقًا - هناك cyans يمكن للطابعة أن تضربها على شاشتك &#39؛t، والعكس صحيح. يحصل كلاهما القيم المحددة في دليل العلامة التجارية بدلاً من تحويل واحدة إلى أخرى والأمل.

كيف أتحول بينهما؟

HEX → RGB هو مجرد تحويل أساسي. #4466EE → انقسم إلى 44، 66، EE → 68، 102، 238.

يتضمن RGB → HSL العثور على قنوات الحد الأقصى/الدقيقة، واستخلاص الخفة من متوسطها، ثم التشبع والتدرج من هناك. It&#39؛s خمسة عشر سطرًا من التعليمات البرمجية، وقد كتبت تلك الأسطر الخمسة عشر من الذاكرة صفر مرات بالضبط. لمرة واحدة، منتقي الألوان يفعل ذلك على الفور. للحصول على الكود:

const hexToRgb = (hex) => {
  const n = parseInt(hex.replace('#', ''), 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};

const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');

والأمر المهم بالفعل هو نسبة النصوع والتباين النسبية، مباشرة من تعريف WCAG:

const luminance = (hex) => {
  const { r, g, b } = hexToRgb(hex);
  const [R, G, B] = [r, g, b]
    .map(v => v / 255)
    .map(v => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
};

const contrast = (a, b) => {
  const [x, y] = [luminance(a), luminance(b)].sort((m, n) => n - m);
  return (x + 0.05) / (y + 0.05);
};

contrast('#E99537', '#FFFFFF'); // 2.38  ← the one that got me
contrast('#E99537', '#0F172A'); // 7.50

لاحظ تلك المعاملات الخضراء: 0.2126 أحمر، 0.7152 أخضر، 0.0722 أزرق. الأخضر يحمل تقريبا سبعون بالمئة من السطوع المدرك. That&#39؛s لماذا لا يبدو اللون الأخضر الساطع والأزرق الساطع عند خفة HSL المتطابقة متشابهين، وهو &#39؛s السبب الرئيسي لوجود مساحات الألوان الإدراكية.

ما هي نسب التباين التي يجب أن أضربها بالفعل؟

بعض الأعداد الحقيقية، كلها محسوبة وليست مخمنه

شيئان يسقطان من تلك الطاولة.

#767676 هو اللون الرمادي الفاتح الذي يمر بـ AA على اللون الأبيض. لا #888لا #999. كل &quot؛ نص ثانوي صامت؛ اللون الذي أراه في البرية هو ظل أو اثنين من الماضي. يستحق الحفظ.

يمكن أن يمر نفس لون العلامة التجارية ويفشل اعتمادًا على المكان الذي تضعه فيه. اللون البرتقالي الخاص بنا غير قابل للاستخدام كحلقة على اللون الأبيض وممتاز كلكنة على اللون البحري. هذا هو &#39؛ عيب في اللون؛ it&#39؛s قيد على المكان المسموح للون بالعيش فيه. بمجرد أن قمت بتأطيره بهذه الطريقة، أصبح قرار التصميم أسهل، وليس أصعب.

كيف يمكنني بناء لوحة ألوان لا &#39؛ وقاتل نفسها؟

اختر لونًا واحدًا. خفة متفاوتة. That&#39؛s الطريقة بأكملها، وHSL يجعلها ميكانيكية

:root {
  /* One hue: 228. Nine steps of lightness. */
  --blue-50:  hsl(228 83% 96%);
  --blue-100: hsl(228 83% 91%);
  --blue-200: hsl(228 83% 84%);
  --blue-300: hsl(228 83% 76%);
  --blue-400: hsl(228 83% 68%);
  --blue-500: hsl(228 83% 60%);  /* #4466EE — the brand colour */
  --blue-600: hsl(228 83% 50%);
  --blue-700: hsl(228 78% 41%);
  --blue-800: hsl(228 72% 33%);
  --blue-900: hsl(228 66% 25%);
}

لاحظ انخفاض التشبع قليلاً عند الطرف المظلم. يؤدي الاحتفاظ بثبات التشبع أثناء سقوط الخفة إلى إنتاج خطوات تبدو قاسية ونيون بشكل متزايد - عدم التشبع الصغير في الأسفل هو ما يجعل المنحدر يبدو مصممًا وليس متولدًا.

ثم قم بتسمية الأشياء حسب دور، ليس حسب المظهر، لذا فإن تغيير العلامة التجارية هو تغيير من سطر واحد بدلاً من البحث والاستبدال عبر أربعين ملفًا

:root {
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-text: #0F172A;
  --color-text-muted: #6B7280;   /* 4.83:1 on white — checked */
  --color-surface: #F8FAFC;
  --color-border: #E5E7EB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--blue-400);  /* lift it — dark bg needs a lighter primary */
    --color-text: #F8FAFC;
    --color-text-muted: #9CA3AF;
    --color-surface: #1E293B;
    --color-border: #374151;
  }
}

الوضع المظلم ليس انعكاسًا

لا تقلب لوحة الألوان الخاصة بك. شيئان ينكسران على الفور:

1. الألوان المشبعة ترتفع على الخلفيات الداكنة. اللون الأزرق الزاهي الذي يقرأ كـ &quot؛ المهنية والاقتباس؛ على الأبيض يقرأ كـ &quot؛ تهتز وتقتبس؛ على شبه الأسود. ارفع الخفة، وأسقط التشبع قليلاً.
2. الخلفيات السوداء النقية تسبب الهالة- نص مشرق على #000 مسحات للأشخاص الذين يعانون من الاستجماتيزم. استخدم اللون الرمادي والأزرق الداكن جدًا (#0F172A، #111827) بدلا من ذلك. كما أنه يمنحك مكانًا تذهب إليه للأسطح المرتفعة، وهو ما يفعله اللون الأسود النقي &#39؛t.

مخططات الوئام، بصراحة

القاعدة التي أعود إليها باستمرار: واحدة أساسية، لهجة واحدة، منحدر رمادي. كل شيء أبعد من ذلك يجب أن يبرر وجوده.

ما هي الرحلات الأخرى التي يقوم بها الناس؟

اللون وحده لا يكفي أبدا

يعاني حوالي 1 من كل 12 رجلاً و1 من كل 200 امرأة من شكل ما من أشكال نقص رؤية الألوان. إذا كان اللون الأحمر يعني الخطأ والأخضر يعني النجاح فقط الإشارة، شريحة ذات معنى من المستخدمين ترى شارتين رماديتين متطابقتين. أضف أيقونة، أضف كلمة. WCAG SC 1.4.1 واضح بشأن هذا ويكلفك واحدة <span>.

الاختبار الذي يستغرق ثانية واحدة: قم بتصوير واجهة المستخدم الخاصة بك، وقم بإلغاء تشبعها، ومعرفة ما إذا كانت لا تزال تعمل. إذا لم يحدث ذلك &#39؛t، فإن اللون يقوم بعمل محمل، فيجب عليه &#39؛t القيام به بمفرده.

تحتاج حلقات التركيز إلى التباين أيضًا

مؤشرات التركيز هي مكونات واجهة المستخدم وتندرج تحت قاعدة 3:1 ضد مجاور الألوان - مما يعني أن حلقة التركيز يجب أن تتناقض مع كل من العنصر المحيط بها والصفحة التي خلفها. يعد المخطط الأزرق الدقيق الموجود على الزر الأزرق فشلًا شائعًا وغير مرئي تمامًا.

التصميم باللون الرمادي أولاً

قم ببناء التخطيط بأكمله بتدرج رمادي. إنه يجبر التسلسل الهرمي على أن يأتي من الحجم والوزن والتباعد - وهو المكان الذي يوجد فيه التسلسل الهرمي ينبغي يأتي من. أضف اللون أخيرًا، كتأكيد. يمكن الوصول إلى الواجهات التي تم إنشاؤها بهذه الطريقة عن طريق الصدفة تقريبًا، وهي تنجو من الوضع المظلم دون إعادة الكتابة.

باستخدام منتقي الألوان

1. افتح ال منتقي الألوان.
2. اسحب الطيف، أو الصق قيمة معروفة في حقل HEX، أو RGB، أو HSL - ويتم تحديث العناصر الأخرى في الخطوة.
3. لاحظ HSL. هذا &#39؛ هو تنسيق العمل الخاص بك.
4. قم بإنشاء المنحدر عن طريق الإمساك بـ H وS والخطوات L.
5. تحقق من كل زوج نص/خلفية مقابل السطر 4.5:1 قبل يتم إدخاله في ورقة الأنماط، وليس بعد أن يرسل لك العميل بريدًا إلكترونيًا حول هذا الموضوع.

كل شيء يعمل في علامة التبويب الخاصة بك. لم يتم تحميل أي شيء - يمكنك تأكيد ذلك في لوحة DevTools Network في حوالي عشر ثوانٍ.

الأسئلة الشائعة

ماذا &#39؛s الفرق بين HEX وRGB؟

لا شيء، من الناحية الدلالية - فهي تشفر نفس قنوات sRGB الثلاث. HEX يكتبها في الأساس 16 (#4466EE)، RGB بالنظام العشري (rgb(68 102 238)). HEX أكثر إحكاما وهو اتفاقية CSS؛ من الأسهل حساب RGB باستخدام JavaScript. اختر لكل سياق، وليس لكل مبدأ.

ما هو تنسيق الألوان الذي يجب أن أستخدمه في CSS؟

HEX للقيم الثابتة أنت &#39؛ ما عليك سوى النسخ. HSL في أي وقت تحتاج إليه يشتق اللون - حالات التحويم، وحالات التعطيل، ومنحدر النغمة، ومتغير الوضع الداكن - لأن الخفة هي رقم يمكنك ضبطه. HSLA أو RGBA عندما تحتاج إلى ألفا. OKLCH إذا كنت &#39؛إعادة بناء نظام تصميم جديد وتريد خطوات متساوية من الناحية الإدراكية.

كيف أعرف إذا كان من الممكن الوصول إلى ألواني؟

حساب نسبة التباين. يحتاج WCAG 2.1 AA إلى 4.5:1 للنص العادي، و3:1 للنص الكبير (18pt، أو 14pt غامق) ولمكونات واجهة المستخدم. لا تحكم بالعين المجردة - #E99537 على الأبيض يبدو جيدًا ويسجل 2.38:1. تأكد أيضًا من عدم نقل أي معلومات حسب اللون وحده.

ما هو اللون الرمادي الفاتح الذي يمكنني استخدامه للنص على اللون الأبيض؟

#767676، الذي يهبط عند 4.54:1 - بالكاد فوق خط 4.5:1 AA. #999999 هو فقط 2.85:1 ويفشل. إذا كنت تريد AAA، #595959 يصل بالضبط إلى 7.00:1.

لماذا لا يتطابق خفة HSL مع السطوع المدرك؟

لأن HSL هو تحويل رياضي بسيط لـ RGB، وليس نموذجًا للرؤية البشرية. العين أكثر حساسية بكثير للأخضر منها للأزرق - صيغة النصوع WCAG تزن الأخضر عند 0.7152 والأزرق عند 0.0722 - لذا hsl(60 100% 50%) (أصفر) و hsl(240 100% 50%) (الأزرق) لا يبدو متشابهًا على الرغم من ادعاء كلاهما بالخفة بنسبة 50%. OKLCH موجود خصيصًا لإصلاح هذا.

كيف أقوم ببناء لوحة الوضع المظلم؟

دون&#39؛ عكس الضوء. قم ببناء لوحة ثانية: خلفية رمادية زرقاء داكنة بدلاً من الأسود النقي (الأسود النقي يسبب الهالة للقراء المصابين بالاستجماتيزم)، وإصدارات أخف وأقل تشبعًا قليلاً من لهجاتك، ونص that&#39؛s أبيض مصفر بدلاً من #FFFFFF. قم بتبديلها بخصائص CSS المخصصة ضمن prefers-color-scheme: dark.

ماذا &#39؛s هو أفضل لون لزر الاتصال لاتخاذ إجراء؟

يوجد &#39؛ر واحد. الدليل على &quot؛ البرتقالي يحول الأفضل والاقتباس؛ رقيقة ومعظمها فولكلورية. ما يهم هو أن CTA يتناقض مع كل شيء حوله وأن نفس اللون يعني نفس الشيء في كل مكان على الموقع. إذا كانت صفحتك في الغالب زرقاء، فإن CTA البرتقالي يعمل - بسبب التباين، وليس البرتقالي.

هل يمكنني استخدام ألوان CMYK على الويب؟

لا - لا يحتوي CSS على تدوين CMYK، ويتم تعيين النطاق don&#39؛t بشكل نظيف، لذا فإن أي تحويل يعد تقريبًا. إذا كنت بحاجة إلى اتساق العلامة التجارية عبر الطباعة والشاشة، فحدد كلتا القيمتين في دليل العلامة التجارية من البداية بدلاً من تحويل إحداهما إلى الأخرى.

كيف أقوم بتحويل لون سداسي إلى RGB؟

قم بتقسيم الرقم السداسي المكون من ستة أرقام إلى ثلاثة أزواج واقرأ كل زوج كرقم أساسي 16 من 0 إلى 255. #4466EE يصبح rgb(68, 102, 238): 44 يساوي 68، و66 يساوي 102، وEE يساوي 238. وهو اختصار مكون من ثلاثة أرقام مثل #46E يتوسع أولاً عن طريق مضاعفة كل رقم. يقوم منتقي الألوان بهذا التحويل على الفور، في كلا الاتجاهين.

ما هو رمز اللون السداسي؟

رمز اللون السداسي عبارة عن تمثيل مكون من ستة أرقام، أساس 16 للون sRGB، باستخدام رقمين لكل من القنوات الحمراء والخضراء والزرقاء بعد المقدمة #. #FFFFFF أبيض و #000000 أسود. يضيف الرقم السابع والثامن الاختياري قناة ألفا (عتامة)، كما في #4466EE80.

إلتحاق بالركب

يتكون العمل الملون من نصفين ومعظمنا يفعل النصف الأول فقط. اختيار لوحة الألوان هو النصف الممتع والذاتي. التحقق من ذلك - النصوع، والتباين، والوضوح الأعمى للألوان، وسلوك الوضع المظلم - هو النصف الذي &#39؛s مجرد حساب، وهو &#39؛s النصف الذي يقرر ما إذا كان بإمكان الأشخاص قراءة ما قمت ببنائه بالفعل.

الحساب ليس صعبا. It&#39؛ هو مجرد شيء عليك القيام به يفعلوأنا فعلت &#39؛t، لعدة أشهر، على موقعي الخاص، باللون الذي اخترته بنفسي.

ال منتقي الألوان يحول بين HEX وRGB وHSL ويمنحك نسبة التباين مجانًا وبشكل كامل في متصفحك. إقرانه مع مولد التدرج بالنسبة للخلطات التي تحافظ على تباينها من طرف إلى طرف، وشاهد بقية الرف في دليل أدوات إنتاجية المطور.