منتقي الألوان ومحوّل أكوادها

طريقة نسخ اللون

1. 1

   اختيار لون أو لصق قيمة

   اكتب أي صيغة يفهمها المتصفح: كود hex، أو rgb()، أو hsl()، أو oklch()، أو حتى اسم لون في CSS. حقل النص هو أداة التحكم الأساسية هنا؛ وعينة اللون والقطّارة اختصاران إلى القيمة نفسها.

2. 2

   النسخ بأي صيغة

   الصيغ الاثنتا عشرة معروضة كلها معًا، وبجانب كل منها زر نسخ. لا شيء مخفي في قائمة منسدلة، فتحويل HEX إلى RGB يحتاج نقرة واحدة لا ثلاث نقرات.

3. 3

   تصدير لوحة الألوان بصيغة CSS أو JSON

   يُصدَّر اللون الأساسي وتدرجه ذو الخطوات العشر وأي ألوان مأخوذة من صورة معًا، في صورة خصائص CSS مخصصة، أو جزء من سمة Tailwind، أو متغيرات SCSS، أو JSON عادي.

لماذا مساحة العمل هي OKLCH

لنظام HSL ميزة مريحة واحدة وعيب جدي واحد. الميزة أن تدرج اللون والتشبع والإضاءة أرقام منفصلة يمكنك التفكير فيها كلٌّ على حدة. والعيب أن إضاءته ليست الإضاءة التي تراها: hsl(60 100% 50%) أصفر ساطع وhsl(240 100% 50%) أزرق داكن، مع أن كليهما يدّعي خمسين بالمئة. لهذا يُنتج تدوير تدرج اللون في HSL مخططات ألوان تبرز فيها عينة وتختفي أخرى. ونظام OKLCH يصلح ذلك: إضاءته تتبع الإدراك البشري، فتغيير تدرج اللون وحده يُبقي السطوع ثابتًا فعلًا. كل مخطط وكل تدرج في هذه الصفحة يُحسب هناك، ثم يُحوّل إلى sRGB عند الإخراج.

ماذا تعني أرقام التباين

يعبّر WCAG عن التباين بنسبة بين الإضاءة النسبية للونين، من 1:1 للونين متطابقين إلى 21:1 للأسود على الأبيض. يحتاج النص الأساسي إلى 4.5:1 لاجتياز المستوى AA. ويحتاج النص الكبير (18.66px فأكثر، أو 14px بخط عريض) وعناصر الواجهة مثل الأيقونات وحدود حقول الإدخال إلى 3:1. ويطلب المستوى AAA نسبة 7:1 للنص الأساسي. هذه ليست تفضيلات أسلوبية: إنها الفرق بين صفحة تُقرأ في ضوء الشمس أو مع ضعف البصر وصفحة لا تُقرأ. وحين لا يبلغ زوج من الألوان الحد، يخفض الزر المجاور للحكم الإضاءة في OKLCH خطوة بعد خطوة حتى يجتازه، فتحصل على أقرب نسخة مطابقة من لونك أنت لا على لون آخر.

لوحات ألوان مأخوذة من صورة فوتوغرافية

ارفع صورة، فتُستخرج ألوانها السائدة بطريقة median cut: تُقسم سحابة البكسلات مرة بعد مرة على امتداد القناة الأكثر تباينًا، ويصبح متوسط كل صندوق ناتج عينة لون. ثم تُستبعد الألوان شبه المكررة باستخدام CIEDE2000، وهو مقياس المسافة الإدراكية، فتحصل على ستة ألوان مختلفة لا على ست درجات من السماء نفسها. تُصغَّر الصورة أولًا إلى 400 بكسل، ولا تغادر متصفحك أبدًا.

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