أدخل لونًا
أداة اختيار الألوان البصرية
أدخل رمز HEX مكون من 6 أرقام مع أو بدون بادئة #
أدخل لونًا للتحويل
اكتب رمز HEX، أدخل قيم RGB أو HSL، استخدم أداة اختيار اللون، أو انقر على 'لون عشوائي' للبدء. جميع التنسيقات تتحدث مباشرة.
كيفية استخدام جدول رموز الألوان
أدخل لونك
اكتب رمز HEX مباشرة (مثل: #FF5733) في حقل HEX، أدخل قيم RGB العشرية (0–255 لكل منها)، أدخل قيم HSL أو CMYK، أو انقر على عينة اللون لفتح منتقي الألوان المرئي. يمكنك أيضًا النقر على "لون عشوائي" للحصول على إلهام فوري. جميع طرق الإدخال تقوم بتحديث النتيجة مباشرة أثناء الكتابة.
عرض جميع التنسيقات المحولة
تعرض لوحة النتائج لونك في تنسيقات HEX و RGB و HSL و HSV و CMYK و الأعداد الصحيحة في نفس الوقت. يحتوي كل تنسيق على زر نسخ حتى تتمكن من الحصول على ما تحتاجه بالضبط. استخدم زر "نسخ الكل" لنسخ كل تنسيق دفعة واحدة، أو تصدير إلى CSV للتوثيق.
إنشاء الظلال والألوان الفاتحة والتحقق من الوصول
قم بالتمرير لأسفل في النتائج لرؤية شريط من 9 ظلال (نسخ أغمق) و 9 ألوان فاتحة (نسخ أفتح) - انقر على أي عينة لتحميل تلك النسخة في المحول. تعرض قسم التباين في WCAG نسب التباين مقابل الأبيض والأسود، مع مؤشرات نجاح AA/AAA للتحقق من أن لونك يتوافق مع معايير الوصول.
تصفح مرجع الألوان المسماة
انتقل إلى علامة "جدول الألوان المسماة" لاستكشاف جميع 140 لونًا مسمى في CSS مرتبة حسب العائلة (الأحمر، الأخضر، الأزرق، الأرجواني، إلخ). تعرض كل صف عينة اللون، اسم CSS، رمز HEX، وقيم RGB. انقر على "استخدم اللون" في أي صف لتحميله في المحول على الفور.
الأسئلة الشائعة
ما الفرق بين رموز الألوان HEX و RGB؟
تصف رموز HEX و RGB نفس اللون تمامًا باستخدام أنظمة ترميز مختلفة. تفصل RGB قنوات الأحمر والأخضر والأزرق إلى ثلاثة أعداد صحيحة عشرية من 0 إلى 255. على سبيل المثال، rgb(59, 130, 246) هو أزرق متوسط. يمثل HEX هذه القيم الثلاثة نفسها بالنظام السداسي عشر (الأساس 16): 59 يصبح 3B، 130 يصبح 82، و 246 يصبح F6، مما يعطي #3B82F6. HEX أكثر إحكامًا وهو التنسيق القياسي لـ HTML و CSS. RGB أسهل في القراءة رياضيًا ويستخدم في CSS وكذلك في برامج تصميم الرسوم. كلاهما متساوي - أي لون يمكن التعبير عنه في تنسيق واحد يمكن التعبير عنه في الآخر.
لماذا يعتبر HSL أفضل لتعديلات التصميم من HEX أو RGB؟
HSL (اللون، التشبع، السطوع) يفصل هوية اللون النقي (اللون، 0–360 درجة) عن مدى حيويته (التشبع) ومدى خفته أو ظلامه (السطوع). هذا يجعلها أكثر بديهية للعمل التصميمي. على سبيل المثال، لجعل لون ما أفتح بنسبة 20%، يمكنك ببساطة زيادة قيمة L بمقدار 20 - في HEX أو RGB، ستتطلب نفس العملية حساب جميع القنوات الثلاث بشكل منفصل. HSL هو أيضًا كيف يصف البشر الألوان بشكل طبيعي: "أزرق متوسط فاتح" يتطابق مباشرة مع تشبع عالٍ ودرجة سطوع متوسطة عند لون أزرق. تدعم CSS بشكل أصلي ترميز hsl()، وتستخدم أدوات التصميم مثل Figma نماذج شبيهة بـ HSL داخليًا. العديد من أنظمة التصميم تعرف رموز الألوان في HSL لهذا السبب.
ما هو CMYK ومتى يجب أن أستخدمه؟
CMYK هو اختصار لـ Cyan و Magenta و Yellow و Key (أسود) - الألوان الأربعة للحبر المستخدمة في الطباعة الملونة. على عكس RGB، الذي يضيف الضوء معًا (الخلط الإضافي)، يقوم CMYK بطرح الضوء عن طريق تكديس الأحبار التي تمتص أطوال موجية معينة (الخلط الطرحي). هذا هو السبب في أن اللون الذي يبدو زاهيًا على الشاشة قد يظهر باهتًا عند الطباعة - نطاق RGB (مجموعة الألوان القابلة للعرض) أوسع مما يمكن أن تعيد إنتاجه طباعة CMYK. استخدم قيم CMYK عند إعداد الملفات للطباعة الاحترافية، بما في ذلك بطاقات العمل، الكتيبات، الملصقات، والتغليف. تعمل معظم متاجر الطباعة الاحترافية وبرامج التصميم (Adobe Illustrator، InDesign) في CMYK لمشاريع الطباعة. لتصميم الويب والشاشة، التزم بـ HEX أو RGB.
ما هي نسبة تباين WCAG ولماذا هي مهمة؟
تقيس نسبة التباين في WCAG (إرشادات وصول محتوى الويب) مدى اختلاف لون المقدمة والخلفية بالنسبة لشخص ذو رؤية منخفضة أو عمى ألوان. يتم حسابها باستخدام اللمعان النسبي - وهو مقياس للسطوع المدرك. تعني نسبة 1:1 عدم وجود تباين (نفس اللون)، بينما 21:1 هو أقصى تباين (أسود على أبيض). يتطلب معيار WCAG AA نسبة 4.5:1 للنص العادي و 3:1 للنص الكبير. يتطلب WCAG AAA نسبة 7:1. يضمن الالتزام بهذه المعايير أن موقعك الإلكتروني قابل للقراءة للمستخدمين ذوي الإعاقات البصرية وغالبًا ما يكون مطلوبًا للامتثال القانوني مع ADA (قانون الأمريكيين ذوي الإعاقة) ومعايير WCAG 2.1/2.2. تقوم هذه الأداة تلقائيًا بحساب نسب التباين مقابل كل من الأبيض والأسود لأي لون تدخله.
كيف يتم إنشاء الظلال والألوان الفاتحة؟
يتم إنشاء الظل عن طريق مزج لون مع الأسود - رياضيًا، عن طريق ضرب كل قناة RGB بعامل أقل من 1. على سبيل المثال، سيكون ظل أحمر بنسبة 50% (255، 0، 0) هو (128، 0، 0). يتم إنشاء اللون الفاتح عن طريق المزج مع الأبيض - مزج قيمة القناة الأصلية نحو 255. سيكون لون فاتح بنسبة 50% من الأحمر هو (255، 128، 128). تقوم هذه الأداة بإنشاء 9 ظلال متباعدة بالتساوي (من قريب من الأسود إلى الأصلي) و 9 ألوان فاتحة متباعدة بالتساوي (من الأصلي إلى قريب من الأبيض)، مما يمنحك 19 نسخة إجمالية. هذه الشرائط مفيدة جدًا لبناء لوحات أنظمة التصميم - على سبيل المثال، تستخدم Tailwind CSS مقياس 10 ظلال مشابه من 50 (الأفتح) إلى 950 (الأغمق) لكل من عائلات الألوان الـ 22 الخاصة بها.
ما هي 140 لونًا مسمى في CSS؟
الألوان المسماة في CSS البالغ عددها 140 هي مجموعة من كلمات الألوان المعرفة في مواصفة لون CSS (مستوى ألوان CSS 4). تشمل ألوان الويب الكلاسيكية مثل "أحمر"، "أزرق"، و "أخضر"، بالإضافة إلى أسماء وصفية مثل "أزرق زهرة الذرة"، "أرجواني فاتح"، و "كريمة البابايا". كل اسم يتطابق مع قيمة HEX/RGB محددة تتسق عبر جميع المتصفحات وأنظمة التشغيل. نشأت من نظام الألوان X11 المستخدم في بيئات Unix وتم توحيدها لاحقًا لـ CSS. بينما تكون مريحة للألوان الشائعة، تغطي الألوان المسماة جزءًا صغيرًا فقط من 16.7 مليون لون يمكن تمثيله في RGB 24 بت. لأعمال التصميم الدقيقة، استخدم دائمًا قيم HEX أو RGB بدلاً من الاعتماد على الألوان المسماة، حيث يمكن أن تكون الأسماء مضللة (على سبيل المثال، "رمادي" و "رمادي" مختلفتان قليلاً).