تتيح لك أدوات الألوان في ToolDeck التحويل بين صيغ الألوان، والتحقق من نسب تباين إمكانية الوصول، وتوليد لوحات الألوان، وبناء تدرجات CSS، والبحث عن أسماء الألوان أو فئات Tailwind مباشرةً في متصفحك. يتعامل محوّل الألوان مع HEX وRGB وHSL وHSV في كلا الاتجاهين. ويختبر مدقق التباين مطابقة معايير WCAG 2.1 AA وAAA. ويُنشئ مولّد لوحة الألوان مخططات تكميلية ومتماثلة وثلاثية ورباعية من أي لون أساسي. أما مولّد التدرج CSS فيُخرج كود تدرج خطي وشعاعي جاهز للنسخ. يطابق باحث أسماء الألوان أي قيمة مع أقرب اسم لون CSS، ويحوّل باحث ألوان Tailwind الألوان التعسفية إلى فئات Tailwind. جميع الأدوات تعمل على جانب العميل ولا يُرسل أي بيانات إلى أي خادم.
ما هي أدوات الألوان؟
أدوات الألوان هي مرافق تساعد المطورين والمصممين على العمل مع قيم الألوان الرقمية. كل لون على الشاشة مخزّن كأرقام: ثلاث قنوات لـ RGB (الأحمر والأخضر والأزرق)، وثلاثة أزواج سداسية عشرية لاختصار CSS، أو تدرج زاوي مع الإشباع والإضاءة لـ HSL. التنقل بين هذه التمثيلات يدوياً بطيء ومعرّض للأخطاء، خاصةً حين تحتاج إلى مراعاة قناة ألفا أو النماذج الأحدث مثل OKLCH.
بعيداً عن تحويل الصيغ، يشمل العمل بالألوان اختبار إمكانية الوصول وإنشاء لوحات الألوان وإنشاء التدرجات. تُحدّد WCAG 2.1 نسب تباين دنيا (4.5:1 للنص العادي عند AA، و7:1 لـ AAA) يصعب التحقق منها بالعين المجردة. يستلزم توليد مخططات ألوان متناسقة حسابات زوايا دقيقة على عجلة ألوان HSL. تحتاج تدرجات CSS إلى صياغة صحيحة للاتجاه ونقاط التوقف للألوان والقيم الاحتياطية. إجراء أي من ذلك يدوياً عبر نظام تصميم يضم عشرات الرموز سرعان ما يصبح مضنياً.
تُؤتمت هذه الأدوات تلك المهام. فهي تقبل لوناً بصيغة معينة وتُجري الحسابات اللازمة وتُعيد النتيجة التي تحتاجها، سواء كانت قيمة محوّلة أو حكم اجتياز/رسوب لإمكانية الوصول أو مجموعة من العينات المتناسقة أو مقتطف كود CSS. وعند تشغيل الأداة في المتصفح، تتجنب أيضاً رفع رموز التصميم الحساسة إلى خدمات طرف ثالث.
لماذا تستخدم أدوات الألوان في ToolDeck؟
تعمل أدوات الألوان في ToolDeck بالكامل داخل متصفحك. لا تغادر قيم الألوان جهازك، ولا يلزم أي حساب، وتُحمَّل كل أداة فوراً دون تثبيت إضافات أو برامج سطح المكتب.
🎨تحويل الصيغ في خطوة واحدة
الصق كود HEX واحصل على قيم RGB وHSL وHSV في آنٍ واحد. لا حاجة إلى ربط محوّلات متعددة أو تذكّر صيغ التحويل.
🔒احتفظ برموز التصميم خاصة
تتم جميع عمليات المعالجة على جانب العميل. تبقى ألوان علامتك التجارية وقرارات لوحة الألوان غير المنشورة وقيم نظام التصميم الداخلي على جهازك.
♿اختبر إمكانية الوصول فوراً
افحص أي زوج من ألوان المقدمة والخلفية مقابل حدود WCAG 2.1 AA وAAA لكل من النص العادي والكبير. احصل على نسبة التباين الدقيقة، وليس فقط علامة اجتياز/رسوب.
⚡انسخ المخرجات الجاهزة للإنتاج
تُخرج كل أداة قيماً يمكنك لصقها مباشرةً في CSS أو إعدادات Tailwind أو حقول إدخال أداة التصميم. لا حاجة إلى إعادة تنسيق.
حالات استخدام أدوات الألوان
إليك ست حالات شائعة توفّر فيها أدوات الألوان في ToolDeck الوقت والجهد.
صيانة نظام التصميم
عند تحديث نظام التصميم، كثيراً ما تتلقى الألوان بصيغة HEX من المصمم لكنك تحتاجها بصيغة HSL لخصائص CSS المخصصة. يُترجم
محوّل الألوان بين الصيغ حتى تتمكن من ملء ملفات الرموز دون حسابات يدوية.
تدقيق إمكانية الوصول
خلال تدقيق مطابقة WCAG، يجب أن يستوفي كل زوج من ألوان النص والخلفية نسب التباين الدنيا. يعرض
مدقق تباين الألوان النسبة الدقيقة وحالة الاجتياز AA/AAA لكلا حجمَي النص العادي والكبير.
استكشاف لوحة ألوان العلامة التجارية
انطلاقاً من لون علامة تجارية واحد، تحتاج إلى متغيرات تمييزية ومحايدة. يحسب
مولّد لوحة الألوان الانسجامات التكميلية والمتماثلة والثلاثية والرباعية لتتمكن من تقييم الخيارات قبل الالتزام بلوحة ألوان.
تنسيق خلفيات CSS
يتطلب بناء قسم بطل أو خلفية بطاقة بتدرج صياغة CSS صحيحة للزوايا ونقاط توقف الألوان وبادئات المورّد. يتيح لك
مولّد التدرج CSS بناء التدرج بصرياً ونسخ الكود.
الترحيل إلى Tailwind
عند ترحيل مشروع إلى Tailwind CSS، تحتاج إلى تعيين قيم HEX أو RGB الموجودة إلى أقرب فئة Tailwind. يعثر
باحث ألوان Tailwind على أقرب تطابق ويعرض الفرق حتى تقرر ما إذا كان التقريب مقبولاً.
مراجعة الكود والتوثيق
خلال مراجعة الكود، لا تعني قيمة HEX الخام مثل #708090 شيئاً للوهلة الأولى. يُعرّف
باحث أسماء الألوان هذه القيمة بوصفها SlateGray، مما يجعل المراجعات والتوثيق أكثر وضوحاً.
مرجع نموذج ألوان CSS
يدعم CSS نماذج ألوان متعددة. يلخّص الجدول أدناه أكثر ست صيغ شيوعاً وصياغتها وحالات الاستخدام النموذجية. جميعها مدعومة من محوّل الألوان في ToolDeck.
| النموذج | صياغة CSS | القنوات | نطاق القيم | الاستخدام النموذجي |
|---|
| HEX | #rrggbb | الأحمر، الأخضر، الأزرق | 00–ff لكل قناة | الأكثر شيوعاً في CSS وتسليمات التصميم وإرشادات العلامة التجارية |
| RGB | rgb(r, g, b) | الأحمر، الأخضر، الأزرق | 0–255 لكل قناة | واجهة برمجة تطبيقات canvas في JavaScript والأنماط المحسوبة ومعالجة الصور |
| HSL | hsl(h, s%, l%) | التدرج اللوني، الإشباع، الإضاءة | 0–360 / 0–100% / 0–100% | رموز التصميم وتوليد الثيمات ومتغيرات الظل البرمجية |
| HSV | N/A (غير موجود في CSS) | التدرج اللوني، الإشباع، القيمة | 0–360 / 0–100% / 0–100% | منتقيات الألوان (Photoshop، Figma) وضبط ألوان الأجهزة |
| OKLCH | oklch(L C H) | الإضاءة، الكثافة اللونية، التدرج اللوني | 0–1 / 0–0.4 / 0–360 | لوحات الألوان الإدراكية المتجانسة (مواصفة CSS Color Level 4) |
| Named | مثال: slategray | مُعيَّن إلى RGB داخلياً | 148 اسماً محدداً مسبقاً | النماذج الأولية والكود المقروء والعروض التوضيحية السريعة |
تُعرّف CSS Color Level 4 (W3C) أيضاً الدوال lab() وlch() وcolor(). يبقى HEX وRGB الأكثر دعماً على نطاق واسع عبر المتصفحات وأدوات التصميم.
كيف تختار أداة الألوان المناسبة
كل أداة ألوان تحل مشكلة مختلفة. استخدم الدليل أدناه للعثور على الأداة المناسبة لمهمتك.
- 1
إذا كنت بحاجة إلى تحويل لون بين صيغ HEX وRGB وHSL أو HSV → محوّل الألوان - 2
إذا كنت بحاجة إلى التحقق من أن زوج ألوان النص والخلفية يستوفي معايير إمكانية الوصول WCAG → مدقق تباين الألوان - 3
إذا كنت بحاجة إلى توليد مجموعة من الألوان المتناسقة من لون أساسي واحد → مولّد لوحة الألوان - 4
إذا كنت بحاجة إلى بناء تدرج CSS خطي أو شعاعي والحصول على الكود → مولّد التدرج CSS - 5
إذا كنت بحاجة إلى إيجاد اسم CSS المقروء الأقرب إلى قيمة لون معينة → باحث أسماء الألوان - 6
إذا كنت بحاجة إلى تعيين لون تعسفي إلى أقرب فئة Tailwind CSS → باحث ألوان Tailwind
تقبل جميع الأدوات الست إدخالات بصيغ متعددة. إذا لم تكن متأكداً من صيغة لونك، ابدأ بمحوّل الألوان الذي يكتشف تلقائياً صياغات HEX وRGB وHSL وHSV.
الأسئلة الشائعة
ما الفرق بين صيغتَي HEX وRGB للألوان؟
يُمثّل HEX وRGB نفس فضاء الألوان. كود HEX مثل #ff6600 هو ترميز سداسي عشري لقنوات RGB الثلاث: ff = 255 (الأحمر)، 66 = 102 (الأخضر)، 00 = 0 (الأزرق). الفرق الوحيد هو طريقة الكتابة. يُعدّ HEX أكثر إيجازاً في ملفات أنماط CSS، في حين يسهل التعامل برمجياً مع RGB لأن كل قناة تمثّل عدداً صحيحاً عشرياً.
متى يجب استخدام HSL بدلاً من HEX أو RGB؟
يفصل HSL التدرج اللوني (اللون ذاته) عن الإشباع والإضاءة. يسهّل ذلك إنشاء متغيرات الظلال: حافظ على التدرج اللوني ثابتاً وخفّض الإضاءة للحصول على ظل أغمق، أو ارفعها للحصول على صبغة أفتح. كثيراً ما تخزّن أنظمة التصميم التي تُنشئ ثيمات فاتحة/داكنة من لون أساسي واحد الرموز بصيغة HSL لهذا السبب. تتكامل خصائص CSS المخصصة أيضاً بشكل جيد مع HSL لأنك تستطيع تجاوز القنوات الفردية.
ما نسبة التباين التي تتطلبها WCAG 2.1 للنص؟
يتطلب المستوى AA من WCAG 2.1 نسبة تباين دنيا 4.5:1 للنص العادي (أقل من 18pt أو 14pt عريض) و3:1 للنص الكبير (18pt فأكثر أو 14pt عريض فأكثر). يرفع المستوى AAA هذه الحدود إلى 7:1 و4.5:1 على التوالي. تُحسب هذه النسب من الإضاءة النسبية لألوان المقدمة والخلفية باستخدام الصيغة المحددة في معيار النجاح 1.4.3 من WCAG 2.1.
كم عدد الألوان المسمّاة التي يدعمها CSS؟
يُعرّف CSS 148 لوناً مسمّى، مستمدة من مواصفات SVG 1.1 وCSS3. تتراوح بين أسماء شائعة كـ red وblue وwhite إلى أسماء محددة كـ MediumSlateBlue وPapayaWhip وLavenderBlush. تُعيَّن الألوان المسمّاة إلى قيم RGB ثابتة. تحتفظ مواصفة CSS Color Level 4 بنفس الـ 148 اسماً ولا تضيف أسماء جديدة. تتعرف المتصفحات أيضاً على الكلمة المفتاحية transparent (ما يعادل rgba(0,0,0,0)).
هل يمكنني استخدام ألوان OKLCH في CSS اليوم؟
نعم. الدالة oklch() مدعومة في Chrome 111+ وFirefox 113+ وSafari 15.4+. يُعدّ OKLCH جزءاً من مواصفة CSS Color Level 4 التي نشرتها W3C. ميزته الرئيسية على HSL هي التجانس الإدراكي: لونان لهما نفس قيمة الإضاءة في OKLCH يبدوان بالفعل متساوِيَي السطوع للعين البشرية، وهو ما لا ينطبق على HSL. يجعل هذا OKLCH خياراً أفضل لتوليد لوحات ألوان سهلة الوصول ذات سطوع إدراكي متسق.
ما الفرق بين HSL وHSV؟
يستخدم كلٌّ من HSL وHSV تمثيلاً أسطوانياً مع التدرج اللوني بوصفه زاوية، لكنهما يُعرّفان السطوع بشكل مختلف. في HSL، إضاءة 50% تمثّل اللون الصافي؛ 0% سواد، و100% بياض. في HSV، قيمة 100% تمثّل اللون الصافي؛ 0% سواد. لا توجد في HSV طريقة مدمجة للوصول إلى الأبيض دون تخفيض الإشباع. يستخدم المصممون ومنتقيات الألوان (Photoshop وFigma) عادةً HSV، بينما يستخدم CSS نصياً HSL.
كيف أجد فئة Tailwind لأي لون HEX؟
يأتي Tailwind CSS مع لوحة ألوان ثابتة تضم نحو 220 فئة لونية (22 تدرجاً مضروباً في 10 درجات لكل منها، إضافةً إلى black وwhite وtransparent). لإيجاد أقرب فئة لقيمة HEX معينة، تحسب المسافة الإقليدية في فضاء ألوان إدراكي (مثل CIELAB أو OKLCH) بين لونك وكل عينة من عينات Tailwind. يقوم باحث ألوان Tailwind في ToolDeck بذلك تلقائياً ويعرض أقرب تطابق مع فرق اللون حتى تحكم ما إذا كان التقريب كافياً.
هل من الآمن لصق ألوان العلامة التجارية السرية في أداة عبر الإنترنت؟
يعتمد ذلك على الأداة. أي أداة ترسل مدخلاتك إلى خادم تُعرّض تلك القيم في حركة مرور الشبكة وسجلات الخادم. تعمل أدوات الألوان في ToolDeck بالكامل داخل متصفحك باستخدام JavaScript على جانب العميل. لا تحمل أي طلبات HTTP بيانات الألوان إلى أي خادم خلفي. يمكنك التحقق من ذلك بفتح تبويب الشبكة في متصفحك أثناء استخدام الأداة. لمزيد من الحيطة، يمكنك أيضاً استخدام الأدوات دون اتصال بالإنترنت بعد التحميل الأولي للصفحة.