باحث أسماء ألوان CSS — أقرب لون مسمى من الهيكساديسيمال
أدخل كود لون هيكساديسيمالي أو استخدم منتقي الألوان للعثور على أقرب لون CSS4 مسمى. تقارن الأداة لونك بجميع الألوان الـ148 المسماة في CSS القياسية باستخدام مسافة الألوان الإدراكية وتصنف أقرب 5 ألوان. مثالي للعثور على أسماء ألوان مقروءة للكود والتوثيق.
أقرب 5 ألوان مسماة في CSS:
كيف تعمل
الألوان المسماة في CSS: تاريخ موجز
تطورت الألوان المسماة في CSS عبر عدة إصدارات من المواصفات. عرّف CSS 1 الأصلي (1996) 16 لونًا أساسيًا فحسب: aqua وblack وblue وfuchsia وgray وgreen وlime وmaroon وnavy وolive وpurple وred وsilver وteal وwhite وyellow. أضاف CSS 2 اللون orange. ووسّع CSS 3 القائمة إلى 147 لونًا بناءً على قائمة ألوان X11، التي تعود بدورها إلى قاعدة بيانات ألوان نظام X Window التي كانت تُصان في معهد MIT في ثمانينيات القرن الماضي.
أضاف CSS Color Level 4 اسمًا جديدًا واحدًا: rebeccapurple (#663399). أُضيف هذا اللون تكريمًا لذكرى Rebecca Alissa Meyer، ابنة مطور الويب Eric Meyer، التي توفيت بسبب سرطان الدماغ عام 2014 في سن السادسة. كان اللون الأرجواني لونها المفضل، وصوّت فريق عمل CSS على إدراج اسمها في المعيار تخليدًا لذكراها. بهذه الإضافة، يُعرّف مواصفات CSS4 تحديدًا 148 لونًا مسمى، وهي المجموعة الكاملة التي تبحث فيها هذه الأداة.
كيف يُحسب التباين بين الألوان
مجرد مقارنة قيم RGB بالمسافة الإقليدية لا يتوافق جيدًا مع إدراك الإنسان؛ إذ تكون أعيننا أكثر حساسية للفروق في الأخضر منها في الأزرق، وتتغير الحساسية عبر نطاق السطوع. تستخدم هذه الأداة صيغة إقليدية موزونة مستندة إلى «مقياس الألوان» لـThiadmer Riemersma، والذي يضبط أوزان قنوات R وG وB بحسب قيمة الأحمر المتوسطة. تكون النتيجة أقرب بكثير إلى الطريقة التي يدرك بها الإنسان فعليًا الفروق اللونية.
تستخدم الصيغة: ΔE = √[(2 + R̄/256)·ΔR² + 4·ΔG² + (2 + (255-R̄)/256)·ΔB²]، حيث R̄ هي متوسط مكون الأحمر للونين. هذا مقياس إدراكي مبسّط؛ يعتمد علماء الألوان المحترفون حسابات CIELAB ΔE التي تأخذ في الاعتبار الإضاءة والنقاء والصبغة بشكل منفصل، لكن للأغراض العملية في تسمية الألوان، يُعطي المقياس المبسّط نتائج تبدو طبيعية لمعظم الألوان.
متى تستخدم الألوان المسماة في CSS
تكون الألوان المسماة الأكثر فائدة في النمذجة السريعة وتحسين قراءة الكود وتصحيح الأخطاء. كتابة `color: tomato` أسرع في الكتابة وأيسر في التذكر من `color: #FF6347`. كما تفيد في السياقات التعليمية، وتصور البيانات (حيث يساعد الاسم الدلالي على توصيل المعنى)، وفي أنظمة التصميم التي تُشكّل فيها مجموعة محدودة من الألوان المسماة لوحة الألوان. يوصي W3C باستخدام الألوان المسماة في الأمثلة والشروحات لتحسين القراءة.
في أنظمة التصميم للإنتاج، نادرًا ما تكون الألوان المسماة هي لوحة الألوان الرئيسية؛ إذ تُفضّل قيم hex المخصصة أو HSL أو أسماء رموز التصميم. غير أن معرفة أقرب لون مسمى لقيمة مخصصة مفيد في التوثيق، والتعليق على الألوان في مراجعات الكود، وحين تحتاج إلى تسمية سريعة تقريبية للتواصل اللفظي بشأن لون ما. تسد هذه الأداة الفجوة بإيجاد اسم CSS الذي يصف بصورة أفضل أي لون hex اعتباطي.
أسئلة شائعة
›كم عدد الألوان المسماة في CSS؟
يُعرّف CSS Color Level 4 ما مجموعه 148 لونًا مسمى، تشمل: الألوان الـ16 الأساسية الأصلية من CSS 1، وlarge orange من CSS 2، و130 لونًا مستندًا إلى X11 من CSS 3، وrebeccapurple المضاف في CSS 4 تكريمًا لذكرى Rebecca Meyer. لاحظ أن aqua وcyan اسمان مترادفان (نفس القيمة #00FFFF)، وكذلك fuchsia وmagenta (#FF00FF).
›هل أسماء ألوان CSS حساسة لحالة الأحرف؟
لا. أسماء ألوان CSS غير حساسة لحالة الأحرف وفقًا للمواصفات. 'Red' و'RED' و'red' و'rEd' تشير جميعها إلى اللون ذاته. بالعرف، الأحرف الصغيرة هي الأسلوب الأكثر شيوعًا في CSS الحديث.
›ما هو rebeccapurple؟
أُضيف اللون rebeccapurple (#663399) إلى CSS Color Level 4 إحياءً لذكرى Rebecca Alissa Meyer، ابنة خبير CSS Eric Meyer، التي توفيت بسبب سرطان الدماغ عام 2014 في سن السادسة. كان لونها المفضل أرجوانيًا، وخلّدها فريق عمل CSS بتسمية اللون باسمها. كان هذا اللون الوحيد المُضاف في CSS 4 وأول لون مسمى جديد منذ CSS 2.
›لماذا لا تغطي الألوان المسماة في CSS كل الألوان الممكنة؟
الألوان الـ148 المسماة مجموعة منتقاة مبنية على قوائم ألوان X11 التاريخية، تغطي درجات الألوان الشائعة لكنها تترك كثيرًا من الألوان بلا اسم؛ فلا يوجد اسم CSS لمعظم درجات الأزرق-الأخضر أو الوردي-البرتقالي أو البني-الأحمر. في أعمال التصميم الدقيق تُستخدم أكواد hex أو rgb() أو hsl() بدلًا من ذلك.
›ما الفرق بين gray وgrey في CSS؟
كلا التهجئتين مقبولتان في CSS. 'gray' هي الكتابة الأمريكية الرسمية في المواصفات، لكن 'grey' (الإنجليزية البريطانية) مرادف صحيح للون ذاته (#808080). وبالمثل، 'lightgray'/'lightgrey' و'darkgray'/'darkgrey' و'dimgray'/'dimgrey' و'slategray'/'slategrey' و'darkslategray'/'darkslategrey' جميعها مقبولة.
›ما مدى دقة تطابق أقرب لون؟
يستخدم التطابق صيغة مسافة إدراكية تُوازن قنوات RGB بحسب حساسية العين البشرية. لمعظم الألوان اليومية — الأحمر والأزرق والأخضر المشبعة — سيبدو أقرب لون مسمى صحيحًا بديهيًا. أما للألوان الباهتة جدًا أو الداكنة أو المائلة للبني، فيزيد تباين الإدراك البشري وقد يبدو 'أقرب' لون مسمى غير دقيق ذاتيًا. درجة المسافة (Δ) المعروضة تساعدك على تقييم مدى القرب: كلما صغرت كلما كان التطابق أفضل.
›هل يمكن استخدام هذه الأداة للعثور على أسماء ألوان يسهل الوصول إليها لنص alt؟
نعم. هذه الأداة مفيدة لكتابة أسماء الألوان في نص alt والتوثيق وتعليقات التصميم. إذا احتجت إلى وصف لون عنصر واجهة لقارئ لا يستطيع رؤيته، يُتيح أقرب لون CSS مسمى اسمًا مفهومًا على نطاق واسع. للدرجات شديدة التحديد، دمج اسم CSS مع وصف مكمّل (مثلًا: 'أزرق مخضر غامق' لـ#008080).
›أي الألوان الهيكساديسيمالية تملك تطابقًا مثاليًا مع أسماء CSS؟
أي من الألوان الـ148 المسماة في CSS سيُعطي تطابقًا مثاليًا. أمثلة شائعة: red = #FF0000، blue = #0000FF، white = #FFFFFF، black = #000000، coral = #FF7F50، tomato = #FF6347، skyblue = #87CEEB. يمكنك التحقق من أي hex بإدخاله والبحث عن رسالة 'تطابق مثالي'.
أدوات ذات صلة
آخر تحديث: