كيفية الاستخدام
- أدخل لوناً أساسياً أو اختره. يختار لك «لون أساسي عشوائي جديد» لوناً.
- اختر تناغماً لونياً. ينشئ خيار «الظلال والدرجات الفاتحة» مقياساً من 11 خطوة، من الفاتح جداً إلى الداكن جداً.
- ثبّت أي لون تريد الاحتفاظ به، ثم واصل استكشاف ألوان أساسية أخرى.
- اختر HEX أو خصائص CSS المخصصة أو JSON، وحدد اسماً، ثم انسخ الشيفرة.
كيف تعمل الأداة
تُنشأ التناغمات بتدوير درجة اللون حول عجلة الألوان: يضيف التناغم التكميلي درجة اللون المقابلة (180°)، ويضيف التناغم المتجاور درجتَي اللون الأقرب على بُعد 30° و60° من كل جانب، ويستخدم التناغم الثلاثي ثلاث درجات يفصل بينها 120°، والرباعي أربع درجات يفصل بينها 90°، أما التناغم التكميلي المنقسم فيستخدم درجتَي اللون المجاورتين للون المكمل (150° و210°).
يحدث التدوير في OKLCH بدلاً من HSL. يحافظ OKLCH على ثبات السطوع المُدرَك، لذا يبدو الأصفر والأزرق في اللوحة بالسطوع نفسه تقريباً، بدلاً من أن يكون الأصفر ساطعاً على نحو مزعج. وعندما يقع لون مُدوّر خارج نطاق الألوان التي تستطيع شاشات sRGB عرضها، تُخفّض درجة تشبعه حتى يلائم النطاق، مع الحفاظ على السطوع ودرجة اللون.
يستخدم مقياس الظلال والدرجات الفاتحة خطوات ثابتة للسطوع في OKLCH، مسماة من 50 إلى 950، على غرار التسميات المستخدمة في Tailwind CSS. وتُخفّض درجة التشبع قرب الأبيض والأسود حتى لا تبدو الدرجات الفاتحة جداً نيونية. التناغمات نقطة انطلاق؛ تحقّق من تباين أزواج النص والخلفية قبل استخدامها في المحتوى.
أمثلة
لون للعلامة التجارية مع لون مميّز
ابدأ باللون #3366cc واختر «تكميلي» لإضافة #8c6500، وهو لون مغرة دافئ له السطوع نفسه في OKLCH. ويشيع استخدام الأزرق مع البرتقالي المصفر لإبراز العناصر بجانب لون العلامة التجارية الأزرق.
رموز تصميم لمكتبة مكونات
اختر «الظلال والدرجات الفاتحة»، وسمِّ الألوان «primary»، ثم صدّر متغيرات CSS. ستحصل على --primary-50 إلى --primary-950، جاهزة للخلفيات (50–100)، والحدود (200–300)، والنصوص (700–900).
الاحتفاظ بلون أثناء استكشاف ألوان أخرى
ثبّت اللون الثاني في لوحة ثلاثية، ثم جرّب ألواناً أساسية مختلفة. سيحتفظ اللون المثبّت بقيمة HEX الخاصة به بينما تتغير الألوان الأخرى.
الأسئلة الشائعة
لماذا تختلف ألواني عن أداة عجلة ألوان HSL؟
تدوّر هذه الأداة درجة اللون في OKLCH، وهو فضاء لوني إدراكي. لا تتطابق زوايا درجات الألوان فيه تماماً مع HSL، لذا قد يكون اللون «المقابل» لدرجة ما مختلفاً قليلاً عن اللون الذي تعرضه أداة HSL.
هل يمكنني استخدام JSON في Tailwind CSS؟
يربط JSON الأسماء بقيم HEX، بالتنسيق نفسه الذي يقبله Tailwind للون في إعدادات السمة. وفي Tailwind 4، يمكنك أيضاً لصق متغيرات CSS داخل كتلة @theme بعد تغيير أسمائها إلى --color-…
هل لوحات الألوان المُنشأة متاحة للجميع؟
ليس تلقائياً. لا يضمن التناغم تبايناً كافياً بين النص والخلفية. تحقّق من تباين كل زوج تريد استخدامه باستخدام أداة التحقق من التباين.
الخصوصية
تُنشأ لوحات الألوان في متصفحك. لا تُرسل ألوانك إلى أي جهة ولا تُخزّن.