محول الألوان

HEX عبارة عن ترميز سداسي عشري (على سبيل المثال، #FF5733) يشيع استخدامه في تصميم الويب. يمثل RGB الألوان باستخدام قيم الأحمر والأخضر والأزرق (0-255 درجة). يستخدم HSL تدرج اللون (0-360 درجة) والتشبع (0-100%) والإضاءة (0-100%)، مما يجعله بديهيًا لضبط الألوان. يستخدم HSV تدرج اللون والتشبع والقيمة (السطوع)، وهو شائع في برامج الرسومات. لكل تنسيق نقاط قوته لحالات الاستخدام المختلفة.

استخدم HSL عندما تحتاج إلى ضبط درجة سطوع اللون أو تشبعه مع الحفاظ على ثبات درجة اللون. يعد HSL أكثر سهولة لإنشاء تنويعات لونية ودرجات وظلال لونية. وهي ممتازة لإنشاء مخططات ألوان يسهل الوصول إليها وتصميم متجاوب حيث تحتاج إلى تعديلات إضاءة يمكن التنبؤ بها. RGB أفضل عندما تحتاج إلى تحكم دقيق في قنوات الألوان الفردية.

استخدم أدوات المطور في متصفحك لفحص العنصر ونسخ قيمة اللون من CSS. ألصقها في المحول الخاص بنا بأي تنسيق (HEX أو RGB أو HSL) وسنعرض لك على الفور القيم المكافئة بجميع التنسيقات الأخرى. يمكنك أيضًا استخدام ملحقات المتصفح أو أدوات التقاط الألوان لالتقاط الألوان.

تتحكم قناة ألفا في الشفافية، بقيم تتراوح من 0 (شفافة تمامًا) إلى 1 (معتمة تمامًا). تتضمن RGBA و HSLA هذه القيمة الرابعة لدعم الألوان الشفافة أو شبه الشفافة. هذا أمر ضروري للتراكبات والظلال وعناصر التصميم ذات الطبقات في تصميم الويب الحديث.

نعم! تدعم المتصفحات الحديثة بشكل كامل تنسيقات ألوان HSL و HSLA في CSS. استخدم الصيغة: hsl(360، 100%، 50%) أو hsla(360، 100%، 50%، 0.5) للألوان ذات الشفافية. تُعد HSL مفيدة بشكل خاص في CSS لإنشاء تنويعات لونية باستخدام خاصية (calc( أو خصائص CSS المخصصة للتنسيق الديناميكي.

أكواد HEX المكونة من ثلاثة أرقام (#RGB) هي رموز مختصرة حيث يتم مضاعفة كل رقم. على سبيل المثال، #F00 يعادل #FF0000. يعمل هذا الاختصار فقط عندما يكون كلا الرقمين من كل قناة لونية متماثلين. استخدم التنسيق الكامل المكون من 6 أرقام (#RRRGGBB) للتحكم الدقيق في الألوان وأي لون لا يتناسب مع نمط الاختزال.

RGB هو المفهوم العام لتمثيل الألوان بقيم الأحمر والأخضر والأزرق. sRGB (RGB القياسي) هو مساحة ألوان RGB محددة موحدة لتحقيق الاتساق عبر الأجهزة ومتصفحات الويب. تفترض معظم ألوان الويب sRGB، ولهذا السبب تبدو الألوان متناسقة بشكل عام عبر الشاشات والمتصفحات المختلفة.

بعد تحويل الألوان، تحقق من نسب التباين لإمكانية الوصول إلى النص. تتطلب WCAG تباين 4.5:1 للنص العادي و3:1 للنص الكبير. عند التحويل بين التنسيقات، تظل قيم الألوان كما هي، ولكن وجودها بتنسيقات مختلفة يساعدك على استخدامها عبر أدوات التصميم المختلفة مع الحفاظ على إمكانية الوصول.

نعم! عادةً ما تعرض برامج التصميم مثل Figma أو Adobe XD أو Photoshop الألوان بتنسيق RGB أو HEX. انسخ هذه القيم وحوِّلها إلى التنسيق المطلوب لرمزك. يضمن ذلك مطابقة مثالية للألوان بين نماذج التصميم والتنفيذ النهائي.

قد يتضمن التحويل بين تنسيقات الألوان التقريب. يستخدم HEX الأعداد الصحيحة (0-255)، بينما يستخدم RGB الأعداد الصحيحة، لكن HSL/HSV يستخدمان الدرجات والنسب المئوية. عند التحويل ذهابًا وإيابًا عدة مرات، قد تحدث اختلافات طفيفة بسبب التقريب. لمطابقة الألوان الحرجة، اعمل بتنسيق واحد باستمرار.