تحويل الألوان بين HEX و RGB و HSL و RGBA و HSV و OKLCH

محوِّل الألوان يحوِّل بين صيغ الألوان الأربع التي يستخدمها مطورو الواجهة الأمامية غالباً: HEX و RGB و RGBA و HSL. كثيراً ما يتنقَّل المصممون ومهندسو الواجهة الأمامية بين أدوات التصميم (Figma و Sketch و Photoshop) وكود CSS، وتتيح لك هذه الأداة إجراء جميع التحويلات بنقرة واحدة.

الخطوة 1 — اكتب قيمة لون بأي صيغة: HEX مثل #00e5ff أو 00e5ff (يمكن الاستغناء عن #)، وتُدعم أيضاً الصيغة المكوَّنة من 3 خانات #0cf؛ RGB مثل rgb(0, 229, 255)؛ HSL مثل hsl(187, 100%, 50%). الخطوة 2 — تظهر عيِّنة معاينة أسفل حقل الإدخال في الوقت الفعلي. الخطوة 3 — تسرد لوحة "نتائج التحويل" الصيغ الأربع، ولكل منها زر "نسخ". الخطوة 4 — تكتشف الأداة نوع الإدخال تلقائياً وتتجاهل القيم غير الصالحة بأمان.

يختار المصممون الألوان بصيغة HSL داخل Sketch أو Figma ويسلِّمون المطور HEX؛ يحوِّل مطورو الواجهة الأمامية HEX من مواصفات التصميم إلى RGBA لإضافة الشفافية؛ ضبط ألوان العلامة التجارية بصيغة HSL لسهولة التحكم في السطوع والتشبع؛ تصحيح تبديل السمة ولوحات الوضع الداكن؛ توثيق الألوان التي التقطتها من لقطات الشاشة بصيغ متعددة.

يستخدم HEX → RGB تقسيماً بمستوى البتات إلى قنوات 8 بت. يستخدم RGB → HSL الخوارزمية القياسية (التطبيع إلى [0,1] ثم حساب الصبغة والتشبع والإضاءة). HSL → RGB هو العكس باستخدام ستة قطاعات صبغية خطية. تُوسَّع HEX ذات 3 خانات تلقائياً (#0cf → #00ccff). لا يُدعَم HEX رباعي القنوات (مع ألفا) هنا — استخدم مولِّد ألوان CSS المخصص.

يجري كل تحويل الألوان محلياً في متصفحك ولا يُرفع الإدخال أبداً.