محوّل HEX إلى HSL

ما محوّل HEX إلى HSL؟

// Convert a hex color string to {h, s, l, alpha} per CSS Color 4 §6.4
// h in 0-360, s and l in 0-1, alpha in 0-1.
function hexToHsl(input) {
  let h = input.trim().replace(/^#/, '');
  if (h.length === 3 || h.length === 4) h = h.split('').map(c => c + c).join('');
  const r = parseInt(h.slice(0, 2), 16) / 255;
  const g = parseInt(h.slice(2, 4), 16) / 255;
  const b = parseInt(h.slice(4, 6), 16) / 255;
  const alpha = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
  const L = (max + min) / 2;
  const S = delta === 0 ? 0 : delta / (1 - Math.abs(2 * L - 1));
  let H = 0;
  if (delta !== 0) {
    if (max === r) H = ((g - b) / delta) % 6;
    else if (max === g) H = (b - r) / delta + 2;
    else H = (r - g) / delta + 4;
    H = (H * 60 + 360) % 360;
  }
  return { h: H, s: S, l: L, alpha };
}

console.log(hexToHsl('#3b82f6')); // { h: 217, s: 0.91, l: 0.60, alpha: 1 }

أبرز الميزات

بدائل محوّل HEX إلى HSL

أمثلة على HEX إلى HSL

#3b82f6

#FF5733

#3b82f6

#FF573380

تحويلات HEX → HSL الشائعة

جدول مرجعي لأكثر 10 رموز HEX تحويلاً ومكافئاتها بـHSL — أوّليات صرفة، وثانويات صرفة، ولونَيْ علامة من لوحة Tailwind من العالم الحقيقي.

كيفية استخدام محوّل HEX إلى HSL

1. 1

   الصق رمز HEX في حقل HEX

   أنزل أي قيمة HEX في حقل HEX — مع # الافتتاحية أو بدونها، باختصار ثلاثة أرقام (#F73)، أو شكل كامل من ستة (#3b82f6)، أو اختصار alpha من أربعة (#F738)، أو شكل كامل من ثمانية مع alpha (#FF573380). تُطبّع الأداة كل الأشكال الخمسة إلى اللون القانوني ذاته داخلياً. لا يهمّ حجم الأحرف (#3b82f6 و#3B82F6 يُحلَّلان بصورة متطابقة). تنتج الأحرف غير الصالحة أو الأعداد الخاطئة من الأرقام خطأً سطرياً صامتاً؛ ويُحدِّث HEX الصالح كل حقل صيغة أخرى في الزمن الحقيقي، بما في ذلك HSL.

2. 2

   اقرأ ثلاثية HSL من حقل HSL

   يعرض حقل HSL أسفل حقل HEX قيمة hsl() المطابِقة بصياغة CSS Color 4 الحديثة المفصولة بمسافات: hsl(217 91% 60%) للون معتم، وhsl(217 91% 60% / 0.5) للون ذي alpha. درجة اللون عدد صحيح بدرجات من 0 إلى 360؛ والإشباع والسطوع عددان صحيحان بنسبة مئوية من 0 إلى 100. تُقرَّب القيم لقابلية القراءة عند العرض — يعني مرجع OKLCH الأصلي الداخلي في الأداة أن الدقّة الأساسية فاصلة عائمة، فرحلة العودة إلى HEX تبقى مستقرّة.

3. 3

   انقر «نسخ» لالتقاط سلسلة HSL

   لكل بطاقة صيغة زرّ «نسخ» على اليمين. نقرة واحدة فتنزل القيمة على حافظتك — يومض نصّ الزرّ بسرعة بكلمة «نُسخت!» لإعلامك. السلسلة المنسوخة هي صياغة CSS Color 4 القانونية (hsl(217 91% 60%))؛ وإن احتاج هدفك شكل الفاصلة القديم (hsl(217, 91%, 60%))، فالتحويل ميكانيكي. لإخراج خاصّ بمنصّة محدّدة (Tailwind v4، وSwiftUI، وCompose، وFlutter)، استخدم قسم «نسخ كرمز» تحت المنتقي — تُصدر تلك المقتطفات الصيغة التي تتوقّعها كل منصّة أصلياً.

4. 4

   ظاهرة أيضاً: RGB، وOKLCH، وOKLAB، وHSV، وHWB، وCMYK، واسم اللون

   يُضيء HEX ذاته الذي تلصقه حقول الصيغ الأخرى أيضاً — RGB لاستدعاءات canvas والعتاد، وOKLCH وOKLAB لأنظمة التصميم الموحّدة إدراكياً، وHSV وHWB لمسارات منتقي ألوان المصمّمين، وCMYK لتقديرات الطباعة، وأقرب لون CSS مُسمّى لنثر التوثيق. أنت غير مُقيَّد بـHEX → HSL فقط. إن احتجت أيضاً ثلاثية OKLCH لكتلة @theme في Tailwind v4 (حيث السطوع الإدراكي يهمّ أكثر من L ذي هَنات gamma في HSL)، فهي هناك في حقل OKLCH مع زرّ «نسخ» خاصّ بها.

5. 5

   استخدم المنتقي لمسح السطوع بصرياً

   تحت شبكة الصيغ يوجد مربّع SL + منزلق درجة اللون + منزلق alpha للاستكشاف البصري. يُسقَط مربّع SL مباشرةً على مستوى الإشباع × السطوع في HSL: اسحب رأسياً للسير بـL من 0% إلى 100% مع متابعة تحديث حقل HSL في الزمن الحقيقي. مفيد لتوليد تدرّج فاتح أو داكن بصرياً قبل تثبيت النسبة المئوية الدقيقة. على متصفحات Chromium (Chrome، وEdge، وBrave) يُفعّل زرّ EyeDropper واجهة EyeDropper الأصلية لانتقاء أي بكسل على الشاشة، بما في ذلك خارج المتصفح.

أخطاء HEX / HSL الشائعة

Sweep HSL L for a 9-step palette:
hsl(120 100% 50%) and hsl(240 100% 50%) at the same L
Look visibly different in brightness — palette feels uneven.

Sweep OKLCH L instead:
oklch(0.7 0.2 130) and oklch(0.7 0.2 250)
Look equally bright; palette reads coherent across all hues.

Linear interpolation from H=350 to H=10:
(350 + 10) / 2 = 180° (cyan midpoint)
Wrong — goes the long way around the wheel.

Short-path hue interpolation:
midpoint = ((350 + 10 + 360) / 2) % 360 = 0° (red midpoint)
Goes through red, the short path around the wheel.

Paste HSV values from Photoshop into a CSS hsl() rule:
Photoshop HSB 0, 100, 100 (pure red)
CSS hsl(0 100% 100%) renders as white — wrong color entirely.

Convert HSV → HSL before pasting into CSS:
HSV 0, 100, 100 → HSL 0, 100%, 50%
CSS hsl(0 100% 50%) renders as pure red — correct.

Emit HSL without percent signs:
hsl(217 91 60)
CSS parse error — every browser ignores the entire rule.

Emit HSL with percent signs on S and L:
hsl(217 91% 60%)
Valid CSS — works in every evergreen browser and IE 9+.

من يستخدم HEX إلى HSL

مطوّرو الواجهة الأمامية يعرّفون متغيّرات HSL في CSS

عرّف --primary: hsl(217 91% 60%) مرّة واحدة من HEX من Figma، ثم ركّب --primary-hover: hsl(217 91% 70%)، و--primary-active: hsl(217 91% 50%)، و--primary-bg: hsl(217 91% 95%) بتعديل رقم L وحده. الصق HEX مرّة واحدة، اقرأ ثلاثية HSL، أسقطها في كتلة خاصّية CSS المخصّصة. النمط الذي استخدمته أنظمة التصميم الإرثية لإبقاء التدرّجات الفاتحة والداكنة متماسكة نغمياً قبل أن تتولّى التدرّجات القائمة على OKLCH الزمام.

المصمّمون يترجمون HEX إلى منتقي HSL

يريد المصمّمون الذين نشأوا على منتقيات درجة اللون + الإشباع + القيمة (Adobe، وSketch، ووضع HSB في Figma) ثلاثية HSL غالباً حتى حين يشحن ملفّ المصدر HEX. لصق HEX مرّة واحدة ينتج HSL المطابِق، جاهزاً ليُقرَأ في موضع عجلة الألوان الذهني للمصمّم دون تخمين يدوي. مفيد عند مراجعة مواصفة لون علامة ومعرفة موضعه على عجلة درجة اللون نسبةً إلى ألوان علامة أخرى في العائلة.

مؤلّفو أنظمة السمات يحسبون رموز الوضع الداكن

تقلب أنظمة السمات الداكنة L غالباً مع الإبقاء على درجة اللون والإشباع — يُسقَط hsl(217 91% 60%) لون أساسي في الوضع الفاتح إلى hsl(217 91% 40%) (أو ما يماثلها) في الوضع الداكن. الصق HEX الوضع الفاتح، اقرأ HSL، احسب L الوضع الداكن، اكتب HSL الجديد عائداً إلى رمز السمة الداكنة. النمط ميكانيكي حين تملك ثلاثية HSL؛ وأكثر تعقيداً مع قنوات RGB الخام.

مؤلّفو أنظمة التصميم يولّدون تدرّجات فاتحة وداكنة

ولّد تدرّجاً من تسع خطوات بمسح L: hsl(217 91% 95%) (الأفتح)، و85%، و75%، و65%، و55%، و45%، و35%، و25%، وhsl(217 91% 15%) (الأغمق). الصق HEX القاعدي، اقرأ HSL، امسح L بخطوات 10% ذهنياً أو في الرمز. (للتدرّجات الموحّدة إدراكياً حيث تبدو كل خطوة ساطعة بالتساوي، انتقل إلى حقل OKLCH المجاور — تبدو تدرّجات HSL غير متّسقة عبر درجات اللون لأن L غير موحّدة إدراكياً.)

مؤلّفو CSS يستخدمون رياضيات hsl(from ...) في وقت التشغيل

تدعم CSS الحديثة صياغة color-function-from: hsl(from var(--primary) h s calc(l + 10%)) تشتقّ متغيّراً أفتح من --primary في وقت العرض، دون حساب كل خطوة مسبقاً. الصق HEX العلامة، أكّد ثلاثية HSL، أنزل القاعدة في متغيّر CSS، واستخدم رياضيات وقت التشغيل للرموز المشتقّة. تُشحن في Chrome 119+، وSafari 17.2+، وFirefox 128+.

مطوّرو الواجهة الأمامية يبنون مجموعات رموز HSL في Tailwind v3

خزّن Tailwind v3 ألوان السمات كثلاثيات HSL مفصولة بمسافات في متغيّرات CSS (--primary: 217 91% 60%)، مركّبة عبر hsl(var(--primary)) في tailwind.config.js. الصق HEX العلامة، اقرأ HSL، أنزل الأرقام الثلاثة (دون غلاف hsl(...)) في تعريف المتغيّر. تحوّلت Tailwind v4 منذ ذلك إلى OKLCH أوّلاً، لكن قواعد رموز v3 ما زالت تستخدم نمط HSL وستفعل لسنوات.

مؤلّفو واجهات منتقي الألوان يُسقطون HEX على عناصر تحكّم HSL

يعني بناء منتقي ألوان يكشف درجة اللون / الإشباع / السطوع كثلاثة منزلقات منفصلة (واجهة Adobe الكلاسيكية) إسقاط HEX وارد على عناصر التحكّم الثلاثة في المنتقي. الصق HEX هنا، اقرأ ثلاثية HSL، ضع المنزلقات الثلاثة برمجياً. التحويل هو ذاته الذي سيشغّله منتقيك داخلياً؛ وتُسطِّح هذه الأداة القيم الوسيطة للتنقيح.

مهندسو الوصولية يضبطون سطوع لون العلامة للتباين

حين يفشل لون علامة في تباين WCAG مقابل خلفية، الإصلاح الرخيص رفع L حتى تجتاز النسبة — دون تغيير درجة اللون أو الإشباع، يبقى اللون مقروءاً بوصفه هويّة العلامة ذاتها. الصق HEX العلامة، راقب شارات التباين، اضبط L ذهنياً (أو استخدم محور L في المنتقي) حتى يجتاز كلٌّ من WCAG وAPCA. يُسطِّح حقل HSL نسبة L الجديدة لمستند المواصفات؛ ويُسطِّح حقل HEX الرمز المطابِق لورقة الأنماط.

رياضيات HEX إلى HSL والتحليل

HEX → RGB → HSL خطّ أنابيب ذو خطوتَيْن

يمرّ التحويل عبر RGB وسيطاً. الخطوة الأولى: حلّل HEX إلى أعداد RGB صحيحة عبر parseInt(hex.slice(1, 3), 16) لكل قناة. الخطوة الثانية: طبّع RGB إلى 0-1، احسب max/min/delta، طبّق مثلّثات CSS Color 4 §6.4 القطاعية: L = (max + min) / 2، وS = delta / (1 - |2L - 1|)، وH = piecewise * 60. البنية ذات الخطوتَيْن هي السبب في تسطيح الأداة لثلاثية RGB الوسيطة أيضاً — عرضها بالمجّان ومفيد للتنقيح.

CSS Color 4 §6.4 يعرّف خوارزمية المرجع

تعرّف مواصفة W3C CSS Color 4 §6.4 (خوارزمية rgb() إلى hsl()) الرياضيات القطاعية القانونية: السطوع منتصف max وmin، والإشباع delta / (1 - |2L - 1|) (مع S = 0 حين delta = 0، لتجنّب القسمة على صفر على الرماديّات)، ودرجة اللون مثلّثات بمعدّل 60 درجة لكل خطوة على أي قناة هي الأعلى. تعالج المواصفة أيضاً الحالات الحدّية: ينتج الأسود الصرف (#000) hsl(0 0% 0%) بدرجة لون اعتباطية 0°؛ وينتج الأبيض الصرف (#FFF) hsl(0 0% 100%) بالمثل؛ وينتج الرمادي الصرف hsl(0 0% 50%).

تلتفّ درجة اللون عند 360°، وS وL نسب مئوية

تملك محاور HSL الثلاثة وحدات مختلفة. درجة اللون درجة زاوية من 0 إلى 360 مع التفاف — تُفسَّر hsl(370 ...) كـhsl(10 ...) لأن المواضع الزاوية تلتفّ. الإشباع والسطوع نسب مئوية من 0% إلى 100%، بلا التفاف؛ تُقصَر القيم خارج المدى. تقبل CSS Color 4 أيضاً درجة اللون بالدورات (hsl(0.6turn ...)) أو الراديان (hsl(3.787rad ...))؛ يستخدم إخراج الأداة الدرجات لأنها الشكل الأكثر شيوعاً في واجهات أدوات التصميم ومستندات مواصفات العلامة.

سطوع HSL *ليس* موحّداً إدراكياً

يبدو الأخضر عند hsl(120 100% 50%) أسطع بصرياً من الأزرق عند hsl(240 100% 50%)، رغم أن كليهما عند سطوع اسمي ذاته — لأن HSL يرث هَنات gamma في sRGB ويستخدم سلّم L ذاته عبر كل درجة لون. هذا سبب ظهور تدرّجات HSL الفاتحة غير متّسقة (يصعد الطرف الفاتح من تدرّج الأخضر أسرع من الطرف الفاتح من تدرّج الأزرق) ولماذا هاجرت أنظمة التصميم في الغالب إلى OKLCH لتوليد التدرّجات. تُسطّح الأداة كلاً من HSL وOKLCH فالخيار على بُعد نظرة.

مرجع OKLCH الداخلي لاستقرار رحلة الذهاب والإياب

رغم أن هذا الذراع يستهدف HEX → HSL تحديداً، يحمل المحوّل الأساسي المشترك اللون القانوني كثلاثية OKLCH داخلياً. تبقى رحلات HEX → HSL → RGB → OKLAB → HEX مستقرّة على مستوى البِت؛ تتراكم محوّلات HSL الإرثية خطأ تقريب ويمكن أن تحرف درجة اللون بضع درجات عبر بضعة تحويلات. يحفظ محور OKLCH أيضاً درجة اللون محوراً مستقرّاً فلا يعبر سحب منزلق درجة اللون فجأة الرماديّ. وفقاً لورقة OKLAB لـBjörn Ottosson عام 2020.

ترميز القناة: 8-بِت غير موقّعة، مُرمّزة بـgamma sRGB

تشفّر رموز HEX قنوات RGB أعداداً صحيحة غير موقّعة من 8 بِت (0-255) في فضاء ألوان sRGB المُعرَّف في IEC 61966-2-1 (1996). القيم *مُرمّزة بـgamma* — العلاقة بين قيمة القناة والسطوع المُدرَك غير خطّية، تتبع دالّة نقل sRGB القطاعية (تقريباً أس 2.4 مع مقطع خطّي صغير قرب الصفر). يُشتقّ HSL مباشرةً من قيم RGB المُرمّزة بـgamma هذه دون أي خطوة تسوية خطّية، وهذا السبب الجذري لمشكلة التوحيد الإدراكي في HSL. يسوّي OKLCH أوّلاً ثم يعيد الإسقاط إلى فضاء موحّد إدراكياً؛ HSL لا يفعل.

أفضل الممارسات لسير عمل HEX / HSL

استخدم صياغة HSL الحديثة المفصولة بمسافات في الرمز الجديد

hsl(217 91% 60%) (مفصول بمسافات) وhsl(217 91% 60% / 0.5) (شَرطة مائلة لـalpha) في CSS Color 4 هما الصياغتان القانونيّتان للرمز الذي يُشحَن في 2025 وما بعد. الشكلان القديمان بالفواصل hsl(217, 91%, 60%) وhsla(217, 91%, 60%, 0.5) ما زالا مدعومَيْن في كل مكان لكنهما مُهمَلان أسلوبياً في CSS Color 4. استخدم الصياغة الحديثة في أوراق الأنماط الجديدة؛ احتفظ بـhsla() فقط لسياقات احتياط IE 9-11 حيث تحتاج فعلاً دعماً إرثياً.

ولّد التدرّجات في OKLCH، لا في HSL

محور السطوع في HSL ليس موحّداً إدراكياً — ينتج مسح L من تسع خطوات تدرّجاً تبدو فيه خطوات الأخضر أسطع من خطوات الأزرق عند كل قيمة L. للتدرّجات التي يجب أن تبدو فيها كل خطوة ساطعة بالتساوي (طلب نظام التصميم الافتراضي)، ولّد في OKLCH بدلاً منه: oklch(0.7 0.15 217)، وoklch(0.6 0.15 217)، وغيرها. تُسطِّح الأداة كلاً من HSL وOKLCH لـHEX ذاته، فالتبديل بينهما على بُعد نقرة «نسخ» واحدة.

اقفل درجة اللون والإشباع، وامسح السطوع

عند استخدام HSL لعمل تدرّجات فاتحة وداكنة، غيّر رقم L وحده — أبقِ درجة اللون والإشباع متطابقَيْن عبر التدرّج. انجراف درجة اللون (حتى بـ5°) يجعل التدرّج يبدو مشوّشاً. انجراف الإشباع يجعل الطرف الفاتح يبدو باهتاً والطرف الداكن يبدو موحلاً. انضباط محور واحد في كل مرّة هو ما يمنح HSL سمعته الصديقة للتصميم؛ والتخلّي عنه يمنحك الأسوأ من كلا العالمَيْن.

فضّل HEX لرموز مصدر الحقيقة، وHSL للمتغيّرات المحسوبة

حين تكتب مواصفة رمز تصميم، فضّل HEX (أو OKLCH) صيغةً قانونية — كلاهما أقصر ويلائم JSON أو YAML بنظافة. HSL أنفع للرموز *المشتقّة* في وقت التشغيل (hsl(from var(--primary) h s calc(l + 10%))) من كونه صيغة مصدر الحقيقة. تصف الصيغتان اللون ذاته؛ والاختيار يخصّ الدور الذي يلعبه الرمز في النظام.

وثّق متغيّرات HSL مع HEX القاعدي

حين تشحن متغيّر CSS مثل --primary-light: hsl(217 91% 70%)، ضمّن تعليقاً يُشير إلى HEX القاعدي: /* base: #3b82f6 → hsl(217 91% 60%), light variant +10% L */. بعد ستة أشهر، حين يريد أحد اشتقاق --primary-lighter، فإنه يحتاج اللون القاعدي للحساب منه — وHSL وحده لا يُسطِّح ذلك. HEX وHSL معاً يحفظان الأصل الكامل.

استخدم تجزئة URL لمشاركة قرارات الألوان الحيّة

يُحدِّث كل تغيير لون تجزئة URL بصيغة #hex=3b82f6 تلقائياً. انسخ URL إلى محادثة Slack أو قضيّة GitHub فمن يفتحه ينزل على اللون ذاته بثلاثية HSL ذاتها. هذا أوثق من لصق سلسلة HSL في الدردشة — أحياناً يخطئ المستلمون في كتابة الدرجة أو يُسقطون علامة النسبة المئوية عند إدخال القيمة يدوياً — ويتيح لمحادثة مراجعة تصميم الإشارة إلى لون دقيق بدلاً من «الأزرق الذي ناقشناه الثلاثاء». لا تُنقَل التجزئة أبداً إلى الخادم.

الأسئلة الشائعة