حوّل لون تصميم إلى CSS
حوّل اللون وانسخ الصيغة ونسق التصريح ثم اختبره في معاينة HTML.
- تحقق من اللون
- انسخ القيمة
- نسق CSS
- عاين HTML
لوحة الألوان
محول ألوان HEX وRGB وHSL
حوّل ألوان sRGB المعتمة بين HEX من 3/6 أرقام وRGB الصحيح المفصول بفواصل وHSL النسبي، ثم أنشئ تدرجات كلاسيكية أو هادئة أو زاهية. مفيد للمصممين والمطورين لتنسيق ألوان CSS وTailwind. يوفر منتقي لون ومعاينة مباشرة ونسخ القيم.
#6366f1
اختر اللون
معاينة اللون المباشر
مخرجات CSS
كود HEX
#6366f1
قيمة RGB
rgb(99, 102, 241)
تنسيق HSL
hsl(239, 84%, 67%)
نمط أداة TAILWIND
bg-[#6366f1]
درجات محسوبة وأوزان أساسية (Wind)
انقر على العينة لتطبيقها كلون أساسي.
50
#eff0fe100
#d8d9fc200
#b1b3f8300
#9294f5400
#7a7df3500
#6366f1600
#595cd9700
#4a4db5800
#3b3d91900
#282960950
#191a3cباختصار
حوّل الصيغ التي تقبلها الواجهة فعلياً وانسخ قيمة CSS أو فئة Tailwind اعتباطية، واعتبر درجات 50–950 مخصصة لا ألوان Tailwind الرسمية.
ما الذي تدعمه الأداة
- HEX معتم بصيغتي #RGB و#RRGGBB.
- rgb(r, g, b) القديمة بأعداد 0–255.
- hsl(h, s%, l%) القديمة بدرجة 0–360 ونسب 0–100.
- نسخ HEX وRGB وHSL والفئة bg-[#rrggbb].
- إحدى عشرة درجة مخصصة 50–950 في أنماط كلاسيكي وهادئ وزاهٍ.
كيفية استخدام محول ألوان HEX وRGB وHSL
أكمل سير عمل محول ألوان HEX وRGB وHSL قابلاً للتحقق داخل هذا المتصفح.
- 1
الخطوة 1
أدخل القيمة الدقيقة
أدخل HEX أو RGB أو HSL مدعوماً أو استخدم منتقي اللون الأصلي.
- 2
الخطوة 2
اضبط الخيارات المتاحة
اختر التبويب المطابق؛ لا تُحلل صيغة المسافات أو alpha أو الأسماء أو HWB وLab وOKLCH.
- 3
الخطوة 3
نفّذ العملية
اضغط تحويل أو لوناً عشوائياً ثم اختر نمط الدرجات.
- 4
الخطوة 4
تحقق من النتيجة
قارن القيم والمعاينة وقِس التباين بأداة منفصلة.
- 5
الخطوة 5
تابع أو صدّر
انسخ القيمة المطلوبة ووثّق أن أرقام الدرجات مخصصة.
الأخطاء الشائعة
إدخال rgb(255 128 0 / 50%)
النتيجة: ترفض الواجهة الصيغة الحديثة وalpha.
الإصلاح: استخدم rgb(255, 128, 0) هنا أو محلل CSS كامل.
تسمية الدرجات لوحة Tailwind الرسمية
النتيجة: تختلف القيم المولدة عن ألوان Tailwind المنتقاة.
الإصلاح: سمّها لوحة مخصصة واستخدم الفئة الاعتباطية.
اعتماد النظر لاختبار الوصول
النتيجة: الاختلاف المرئي لا يضمن التباين المطلوب.
الإصلاح: احسب نسبة WCAG بأداة مخصصة.
أفضل الممارسات
- احتفظ بالصيغة الأصلية عند الحاجة إلى الدقة.
- اختبر #ff8000 → rgb(255, 128, 0) → hsl(30, 100%, 50%).
- سمّ الدرجات مخصصة وقِس تباين كل استخدام.
- اختبر CSS النهائي في المتصفحات المستهدفة.
سير العمل المرتبط
قيود المتصفح
- لا تدعم alpha أو دوال CSS الحديثة ذات المسافات.
- تُقرب القيم إلى sRGB بثمانية بتات وHSL صحيح.
- يختلف منتقي اللون وإدارة اللون حسب المتصفح والشاشة.
المراجع الموثوقة
أمثلة عملية
- الإدخال
- #ff8000
- النتيجة
- rgb(255, 128, 0); hsl(30, 100%, 50%); bg-[#ff8000]
قنوات sRGB المعتمة هي 255 و128 و0، وتُقرب HSL إلى 30° و100% و50%.
الأسئلة الشائعة
لماذا يُرفض HEX من 8 أرقام؟
تقبل الواجهة #RGB و#RRGGBB فقط بلا alpha.
هل تقبل rgb(255 128 0)؟
لا، استخدم الصيغة القديمة rgb(255, 128, 0).
هل درجات 50–950 رسمية من Tailwind؟
لا، إنها مشتقات محسوبة محلياً.
هل تتحقق من تباين WCAG؟
لا، لا تحسب نسبة أو نجاحاً.
لماذا تتغير HSL بعد الذهاب والعودة؟
تُقرب المكونات إلى أعداد صحيحة.
هل تُرسل الألوان؟
لا، تبقى العمليات في المتصفح.
الخصوصية والعمل دون اتصال
يتم التحليل والتحويل وتوليد الدرجات والمعاينة والنسخ محلياً بلا رفع. تعمل الأداة دون اتصال بعد تخزين الموارد الثابتة.
أدوات ذات صلة
- منسق CSSضمن مسار «حوّل لون تصميم إلى CSS»، استخدم منسق مسافات CSS تالياً لهذه الوظيفة: تقبل الواجهة نصاً أو .css وتوثق فقط بالقواعد البسيطة التي تكون فيها الأقواس والفواصل بنيوية.
- منسق HTML مع معاينةضمن مسار «حوّل لون تصميم إلى CSS»، استخدم منسق مصدر HTML مع معاينة معقمة تالياً لهذه الوظيفة: نص مكتوب أو ملصق أو مثال أو ملف .html/.htm؛ لا تحلل الأداة DOM ولا تتحقق من مطابقة المستند.
- تغيير حجم الصورةاستخدم تغيير حجم الصورة تالياً لهذه الوظيفة المرتبطة: تغيير الحجم بأبعاد بكسل دقيقة أو بالنسبة المئوية.