محول HSL إلى HEX
تحويل قيم ألوان HSL إلى أكواد HEX.
محول HSL إلى HEX
جاهزمحوّل HSL إلى HEX أونلاين — تحويل HSL وHSV وRGB وHEX
محوّل HSL إلى HEX من Toolsiro هو محوّل شامل ومجاني لتنسيقات الألوان يُترجم الألوان بين أربعة تنسيقات في الوقت الفعلي: HSL (تدرج اللون والتشبع والإضاءة)، وHSV (تدرج اللون والتشبع والقيمة)، وRGB (أحمر وأخضر وأزرق)، وHEX. أدخل لوناً بأي تنسيق باستخدام منزلقات أو منتقي لون أو إدخال HEX، وتتحدث جميع التنسيقات الأخرى فوراً. انقر على أي بطاقة مخرجات لنسخ ذلك التنسيق.
تحويل تنسيق الألوان مهمة يومية للمصممين والمطورين. أدوات التصميم تُخرج HSL. أوراق أنماط CSS تستخدم HEX وRGB. كود الخلفية يعالج أعداداً صحيحة RGB. يحتاج نقل لون بين الأنظمة تحويلاً دقيقاً — هذه الأداة توفره فوراً.
HSL — تدرج اللون والتشبع والإضاءة
HSL نموذج لوني أسطواني يُمثِّل الألوان بمصطلحات تتطابق مع إدراك الإنسان للألوان بشكل أكثر بداهةً من RGB. تدرج اللون (H) هو اللون نفسه — قيمة من 0° إلى 360° تسير حول دولاب الألوان. الأحمر عند 0°، الأصفر 60°، الأخضر 120°، السماوي 180°، الأزرق 240°، والأرجواني الوردي 300°.
التشبع (S) يقيس شدة اللون بنسبة مئوية. عند 100% التشبع، اللون حيوي بالكامل. عند 0%، يصبح رمادياً خالصاً. الإضاءة (L) تقيس السطوع بنسبة مئوية. عند 50%، تحصل على التدرج الخالص. عند 0%، يصبح أي لون أسود خالصاً. عند 100%، أبيض خالص.
HSL أكثر نماذج الألوان ملاءمةً للمصممين لأنه يتوافق مباشرةً مع طريقة تفكيرهم في الألوان: اختر تدرج اللون، اضبط مدى حيويته (التشبع)، واضبط مدى فاتحه أو داكنه (الإضاءة). CSS تدعم صياغة hsl() مباشرةً.
HSV — تدرج اللون والتشبع والقيمة
HSV (يُسمى أيضاً HSB — تدرج اللون والتشبع والسطوع) نموذج أسطواني آخر حيث يعمل تدرج اللون بشكل مطابق لـHSL، لكن المكوِّنَين الآخرَين مختلفان. في HSV، التشبع (S) عند 0% يصبح اللون أبيض (ليس رمادياً كما في HSL). القيمة (V) عند 0% تُنتج الأسود الخالص.
HSV هو النموذج المستخدم في معظم أدوات التصميم الجرافيكي بما فيها منتقي ألوان Adobe Photoshop وIllustrator وFigma وSketch. عندما تسحب المنزلق الرأسي في منتقي الألوان لضبط السطوع، تضبط قناة V.
الفرق العملي الرئيسي: في HSL، التدرج الحيوي الخالص عند Lightness = 50%؛ في HSV، عند Saturation = 100%، Value = 100%.
RGB — أحمر وأخضر وأزرق
RGB النموذج الأساسي للألوان في الشاشات الرقمية. كل بكسل يُصدر ضوءاً أحمر وأخضر وأزرق بشدات مختلفة. كل قناة تأخذ قيمة صحيحة من 0 إلى 255، مما يُعطي 256 × 256 × 256 = 16,777,216 لوناً ممكناً.
قيم RGB إضافية — إضافة المزيد من كل قناة يجعل اللون أكثر إشراقاً. الأبيض (255, 255, 255) — حد أقصى لجميع القنوات. الأسود (0, 0, 0) — حد أدنى. CSS تدعم صياغة rgb() مباشرةً.
HEX — رموز الألوان الست عشرية
ألوان HEX الأكثر استخداماً في تطوير الويب. رمز لون HEX هو رمز # متبوع بستة أرقام ست عشرية تُمثِّل قنوات الأحمر والأخضر والأزرق — رقمان لكل منها. على سبيل المثال، #6366F1: 63 سداسي = 99 عشري (أحمر)، 66 سداسي = 102 عشري (أخضر)، F1 سداسي = 241 عشري (أزرق).
رموز HEX المختصرة بثلاثة أرقام تعمل عندما يكون كلا رقمَي كل زوج متطابقَين: #FFF يتوسع إلى #FFFFFF.
متى تستخدم كل تنسيق
استخدم HEX عند كتابة CSS يدوياً أو العمل مع رموز التصميم. إنه المعيار الفعلي لتحديد ألوان الويب.
استخدم RGB عند معالجة قنوات الألوان برمجياً أو تمرير قيم الألوان لدوال JavaScript أو العمل مع canvas أو WebGL.
استخدم HSL عند بناء أنظمة الألوان ورموز التصميم أو إنشاء تنويعات لونية برمجياً. hsl(240, 82%, 60%) يعني "أزرق، حيوي، سطوع متوسط" بنظرة واحدة.
استخدم HSV عند العمل مع منتقيات ألوان برامج التصميم أو معالجة الصور في مكتبات رؤية الحاسوب.
أسئلة شائعة
ما الفرق بين HSL وHSV؟ كلاهما يستخدم تدرج اللون بشكل متطابق، لكنهما يختلفان في التشبع والمكوِّن الثالث. HSV يُستخدم في أدوات التصميم؛ HSL أكثر شيوعاً في CSS والكود.
كيف أُحوِّل HSL إلى HEX بدون أداة؟ الرياضيات تتضمن تحويل HSL إلى RGB أولاً (صيغة مثلثية ثلاثية الخطوات)، ثم تحويل كل عدد صحيح RGB إلى سلسلة hex مكونة من رقمين. هذا غير بديهي يدوياً — تقوم هذه الأداة بذلك فوراً.
لماذا يبدو #FFF و#FFFFFF متطابقَين؟ إنهما متطابقان — HEX المختصر بثلاثة أرقام هو اختصار لـHEX المكون من ستة أرقام عندما يكون كلا رقمَي كل زوج متطابقَين. #FFF يتوسع إلى #FFFFFF، الأبيض الخالص.
ما معنى "H" في HSL إذا رأيت رقماً أكبر من 360؟ تدرج اللون دائري — 361° هو نفس 1°. دائرة تدرج اللون مستمرة. القيم أعلى من 360° صالحة في بعض التطبيقات وتُعامَل على أنها modulo 360.