تحويل HEX إلى HSL Hexadecimal ↔ Hue Saturation Lightness مجاناً عبر الإنترنت آمن
اكتب قيمةً بـHEX فتقرأها في الحال بـHSL. يجري الحساب داخل متصفحك، ولا يُرسَل شيء إلى أي مكان، وما يتوقف عليه الجواب مكتوبٌ أدناه لا مفترَض.
لا رفع لأي ملف
من أين جاءت هذه الكتابات
الست عشري وRGB شيءٌ واحد كُتب مرتين. فلون الشاشة ثلاثة أعداد — كم يُبَثّ من الضوء الأحمر والأخضر والأزرق — كلٌّ منها من 0 إلى 255، أي بايت واحد؛ والست عشري يكتب تلك البايتات بالأساس ستة عشر لا غير، فـ#FF8800 وrgb(255, 136, 0) أمرٌ واحد لبكسلٍ واحد. وقد ابتُكر HSL لأن أياً منهما غير مقروءٍ لإنسان: فهو يعطي الصبغة زاويةً على عجلة الألوان، والإشباع والإضاءة نسبتين مئويتين، فيستطيع المصمم أن يُفتِّح لوناً دون أن يعيد حساب ثلاثة أرقام. أما CMYK فمن عالمٍ آخر بالكلية — عالم الحبر لا الضوء. وهو طرحي، مبنيٌّ على أربع ألواح طباعة، ولا يبلغ كل لونٍ تستطيعه الشاشة، لأن الشاشة تبعث الضوء والورق لا يردّه إلا رداً.
أين تصادفها
الست عشري هو ما تكتبه في صحيفة الأنماط وما تناولك إياه أداةُ التصميم. وRGB يظهر حيثما احتاج اللون إلى حساب: التدرجات، والشفافية، وشيفرةٌ تحسب درجةً. وإلى HSL تمتد اليد حين تضبط لوحة ألوانٍ يدوياً، لأن التغييرات المرادة عادةً تغييرٌ في واحدٍ من أعداده الثلاثة. وCMYK هو ما تطلبه المطبعة، والتحويل إليه هو اللحظة التي يكفّ فيها التصميم عن أن يكون ضوءاً ويصير حبراً.
أسئلة متكررة
لماذا تختلف نتيجة CMYK عندي عما تعطيني إياه المطبعة؟
لأنه ليس ثمة تحويلٌ واحد صحيح. فالحساب في هذه الصفحة هو الحساب البسيط المستقل عن الجهاز، وهو الجواب الصحيح حين تحتاج نقطة بدايةٍ أو مكافئاً تقريبياً. أما المطبعة فتحوّل عبر ملفٍّ لونيّ يراعي الحبر والورق والآلة بأعيانها، واللون RGB نفسه يعطي قيم CMYK على الورق اللامع غير ما يعطيه على غير المطليّ. فلكل ما يجب أن يتطابق، اطلب من المطبعة ملفَّها بدل الثقة بمعادلة.
لماذا يتعذّر طبع بعض ألوان الشاشة؟
لأن الاثنين لا يبلغان الألوان نفسها. فالشاشة تصنع اللون بجمع الضوء، وتستطيع سماويّاً أو أخضر زاهياً مشبعاً لا يجاريه الحبر؛ والورق يصنع اللون بامتصاص الضوء، وأسطع ما يبلغه هو بياض الصفحة. وتُسمّى مجموعةُ الألوان التي يبلغها كلٌّ منهما «المدى»، وحيث لا يتداخلان يضطر التحويل إلى اختيار أقرب لونٍ متاح. ولهذا كثيراً ما يبدو اللون الزاهي على الشاشة أبهتَ قليلاً في الطباعة.
هل الجواب دقيق؟
حيث تُعرَّف الوحدتان إحداهما بالأخرى بأعداد صحيحة، نعم — وتقول الصفحة ذلك فوق الرقم، والتقريب الوحيد في عدد المنازل المعروضة. وحيث لا تكون النسبة عشرية منتهية، تعرض الصفحة اثنتي عشرة رقماً معنوياً وتقول إن العلاقة تقريبية، بدل أن تدّعي غير ذلك.
هل يغادر جهازي شيءٌ مما أكتبه؟
لا. الحساب يجري في متصفحك؛ لا يُرفَع شيء، ولا خادم أصلاً ليُرفَع إليه. حمِّل الصفحة مرة واحدة وتبقى تعمل والشبكة مطفأة.
لماذا تحوّل HEX إلى HSL
رمز hex مثل #5A4632 طريقة جيدة لتخزين اللون وطريقة رديئة للتفكير فيه. فلا شيء في الخانات يخبرك بأن اللون بني، أو بمدى سطوعه، أو بما ستبدو عليه نسخة أشحب قليلاً منه. وقد اخترع HSL لإصلاح ذلك. فهو يصف اللون كما يميل الناس إلى الحديث عنه: أي صبغة هو، وما درجة حيويته، وما درجة إضاءته. وتحويل HEX إلى HSL هو ترجمة اللون من الشكل الذي تسلمه لك أداة التصميم إلى الشكل الذي تستطيع التفكير به: فـhsl(30, 29%, 28%) بني برتقالي داكن خافت، وترى فوراً أن رفع الرقم الأخير سيجعله أشحب.
هذا هو السبب الحقيقي الذي يجعل المصممين ومطوري الواجهات يستخدمون التحويل. فلديهم لون علامة بصيغة hex ويحتاجون إلى عائلة من الألوان المرتبطة: أفتح لحالة التمرير، وأغمق لزر مضغوط، وشاحب جداً لتدرج خلفية، وأقل تشبعاً لعنصر معطّل. وفي hex كل واحد من هذه بحث جديد عن ثلاثة أزواج من الخانات. وفي HSL كل واحد تغيير في رقم واحد. فاللون هو نفسه، مرئياً عبر عدسة أنفع.
تحوّل هذه الصفحة في متصفحك ولا يُرفع شيء. وستجد أدناه كيف تُحسب أرقام HSL الثلاثة من خانات hex، وما يحتفظ به التحويل وأين يقرّب، وما تعنيه الصبغة والتشبع والإضاءة عملياً، وكيف يستخدم المصممون HSL لبناء لوحات الألوان والحالات، والفخاخ التي توقع من يحوّلون HEX إلى HSL للمرة الأولى.
ما الذي يصفه HSL
الصبغة: الموضع على عجلة الألوان
الصبغة زاوية من 0 إلى 360 درجة حول عجلة ألوان. يقع الأحمر عند 0 والأصفر عند 60 والأخضر عند 120 والسماوي عند 180 والأزرق عند 240 والأرجواني عند 300؛ وعند 360 تعود إلى الأحمر. وصبغة 30 تقع بين الأحمر والأصفر، وهي البرتقالي. يخبرك الرقم بأي عائلة ألوان أنت، ولا يقول شيئاً عن سطوعه أو شحوبه.
التشبع: مدى الحيوية
التشبع نسبة مئوية. عند 100% يكون اللون نقياً بقدر ما تسمح به الصبغة؛ وعند 0% يفقد كل لونه ويصير رمادياً. وتشبع 29%، كما في بنيّنا المثال، لون خافت ترابي. وخفض التشبع أسرع طريقة لجعل لون صاخب أهدأ دون تغيير طابعه.
الإضاءة: مدى الشحوب أو الغمق
الإضاءة أيضاً نسبة مئوية. عند 0% يكون اللون أسود أياً كانت الصبغة والتشبع؛ وعند 100% يكون أبيض؛ وعند 50% يكون اللون الكامل العادي. وبنيّنا عند 28% في الجانب الداكن. ورفع الرقم يعطي نسخة أشحب من اللون نفسه، وخفضه نسخة أغمق، وهذا بالضبط التغيير الذي يريده المصممون في أغلب الأحيان.
لماذا هو أسهل من hex
في hex يعني جعل اللون أشحب زيادة الأزواج الثلاثة كلها بمقادير مختلفة حتى لا تنجرف الصبغة، وهذا شبه مستحيل بالعين. وفي HSL يعني تغيير رقم واحد وترك الاثنين الآخرين.
كيف يعمل التحويل
من ثلاثة بايتات إلى زاوية ونسبتين
يقرأ المحوّل أولاً خانات hex قيماً للأحمر والأخضر والأزرق، كل منها من 0 إلى 255، ويقيسها بين 0 و1. ثم يجد الأكبر والأصغر بين الثلاثة. والإضاءة هي متوسط الاثنين. ويتوقف التشبع على مدى تباعدهما نسبة إلى الإضاءة. وتتوقف الصبغة على أي قناة هي الأكبر وكيف تقارن القناتان الأخريان. فإذا تساوت الثلاث فاللون رمادي، والتشبع صفر، ولا معنى للصبغة؛ وعندئذ يعرض المحوّل 0 لها.
المثال
في #5A4632 تكون البايتات 90 و70 و50. الأحمر هو الأكبر عند 0.353 والأزرق الأصغر عند 0.196. والإضاءة نصف مجموعهما، 0.275، أي نحو 28%. والفارق 0.157، فيكون التشبع 0.157 مقسوماً على المجموع 0.549، أي نحو 29%. والأحمر هو القناة الأكبر والأخضر بينهما، مما يضع الصبغة عند 30 درجة. والنتيجة hsl(30, 29%, 28%).
أعداد صحيحة
تُقرّب الأرقام الثلاثة إلى درجات صحيحة ونسب مئوية صحيحة عند كتابتها. وهذا هو الشكل الذي يستخدمه الناس ويتوقعه CSS في العمل اليومي، لكنه يعني أن بعض المعلومات تسقط في الخانة الأخيرة، كما يشرح القسم التالي.
ما يحتفظ به التحويل وما لا يستطيع
يحتفظ باللون كما تصنفه العين
النتيجة هي اللون كما تصنفه العين: صبغة على العجلة، ومدى تشبعه، ومدى إضاءته. وهذا هو سبب أن HSL يستحق الاقتناء. فتستطيع جعل اللون أشحب أو درجة أغمق بتغيير رقم واحد، وهو شبه مستحيل في hex.
لا يستطيع وعد البايتات نفسها عند العودة
يصف الاثنان الألوان نفسها، لكن HSL يبلغها عبر هندسة مختلفة وتُقرّب أرقامه الثلاثة إلى درجات ونسب صحيحة عند كتابتها. فقد يصل لون ذهب إلى HSL وعاد إلى خطوة أو خطوتين من حيث بدأ: مطابق بصرياً، لا بايتاً ببايت. وإذا احتجت إلى البايتات نفسها بالضبط فاحتفظ بـhex. حوّل HEX إلى HSL لتعمل مع لون، واحتفظ بـhex أصلاً رئيسياً.
الرماديات لا صبغة لها
حين تتساوى البايتات الثلاث لا شيء يُقال عن الصبغة. يعطي المحوّل صبغة 0 وتشبعاً 0%، وتصف الإضاءة وحدها الرمادي. فلا تقرأ شيئاً في الـ0.
استخدام HSL عملياً
بناء عائلة من الدرجات
خذ اللون الأساسي hsl(30, 29%, 28%). فدرجة أفتح للتمرير هي hsl(30, 29%, 34%). وتدرج شاحب جداً للخلفية هو hsl(30, 29%, 94%). ودرجة أغمق لحالات الضغط هي hsl(30, 29%, 22%). تبقى الصبغة والتشبع ثابتين، فيتضح أن الألوان تنتمي معاً. والقيام بالشيء نفسه في hex يتطلب محاولات عدة ويظل يبدو منحرفاً قليلاً.
السمات والوضع الداكن
كثيراً ما تحتاج السمة إلى اللوحة نفسها بنسخة فاتحة وأخرى داكنة. وبـHSL تحتفظ بالصبغة وتعدّل الإضاءة والتشبع: تفتّح الخلفيات وتغمّق النص للسمة الفاتحة، والعكس للداكنة. وتعريف الصبغة خاصية مخصصة وتغيير الإضاءة وحدها طريقة شائعة ومرتبة لفعل ذلك.
توليد لوحات
لتجد ألواناً تناسب لوناً أساسياً أدر الصبغة. فثلاثون درجة على كل جانب تعطي ألواناً متجاورة، و180 تعطي المتمم، و120 أو 240 تعطي ثلاثياً. ثبّت التشبع والإضاءة وغيّر الصبغة فيكون للألوان إحساس موحد. وهي طريقة سريعة لبدء لوحة لا تبدو عشوائية.
تباين يسهل الوصول إليه
الإضاءة هي التحكم الرئيسي في التباين. فإذا كان النص صعب القراءة على خلفية ملونة فالحل عادةً زيادة الفرق في الإضاءة بينهما، ويجعل HSL ذلك مسألة تعديل رقم واحد على كل جانب.
كيف تحوّل HEX إلى HSL هنا
اكتب رمز hex أو الصقه
أدخل اللون في الحقل الأول، بعلامة # أو بدونها. وتُقبل صيغتا ثلاث وست خانات، وتُقرأ أيضاً صيغة الثماني خانات مع الشفافية.
اقرأ قيمة hsl
يظهر الجواب فوراً، كما في #5A4632 = hsl(30, 29%, 28%). والأرقام الثلاثة هي الصبغة بالدرجات والتشبع والإضاءة بالنسبة المئوية.
انسخه إلى ورقة أنماطك
استخدم النتيجة كما هي، في قاعدة مثل color: hsl(30, 29%, 28%). ولتعديل اللون غيّر الرقم الأخير. والأداة للاتجاه المعاكس هي HSL إلى HEX.
من أين تأتي هذه الصيغ
hex وRGB هما الشيء نفسه مكتوباً مرتين
لون الشاشة ثلاثة أرقام، كم من الضوء الأحمر والأخضر والأزرق يُبعث، كل منها من 0 إلى 255، أي بايت واحد. ويكتب hex ببساطة هذه البايتات في الأساس ستة عشر. ولترى الأرقام حوّل HEX إلى RGB.
HSL وCMYK
اخترع HSL لأن أياً منهما لا يقرؤه الإنسان: فهو يعطي الصبغة زاوية حول عجلة ألوان، مع التشبع والإضاءة نسباً مئوية، ليستطيع المصمم أن يجعل شيئاً أفتح دون إعادة حساب ثلاثة أرقام. أما CMYK فتنتمي إلى عالم مختلف تماماً، حبر لا ضوء. وهي طرحية، مبنية من أربعة ألواح طباعة، ولا تبلغ كل لون تبلغه الشاشة، لأن الشاشة تبعث الضوء بينما الورق يعكسه فقط.
فخاخ عند تحويل HEX إلى HSL
توقع رحلة ذهاب وإياب كاملة
بسبب التقريب قد يعطي التحويل العكسي رمزاً على بعد خطوة أو خطوتين من الأصل. ولون واحد لا يُرى الفرق. أما في نظام تصميم تُحوَّل فيه ألوان كثيرة ذهاباً وإياباً فقد يتراكم. فاحتفظ بـhex مصدراً.
افتراض أن تساوي الإضاءة يعني تساوي السطوع
قد يبدو لونان لهما إضاءة HSL نفسها مختلفين كثيراً في السطوع: فأصفر عند 50% يبدو أسطع بكثير من أزرق عند 50%. وإضاءة HSL رقم مناسب لا مقياس للسطوع المدرك. ولفحوص التباين استخدم أداة تباين مناسبة.
نسيان علامات النسبة المئوية
في CSS يحمل التشبع والإضاءة في hsl() علامتي النسبة المئوية، والصبغة رقم عادي أو رقم مع deg. وحذف العلامتين خطأ كلاسيكي.
المبالغة في قراءة الرمادي
الرمادي لا صبغة له. فإذا عرض المحوّل 0 له فهذا لا يعني أنه مائل إلى الحمرة.
أسئلة يطرحها الناس قبل التحويل
ما هو #FF0000 في HSL؟
hsl(0, 100%, 50%)، أحمر نقي.
ما هو #FFFFFF في HSL؟
hsl(0, 0%, 100%)، أبيض. والصبغة بلا معنى للأبيض، ويعرض المحوّل 0.
هل HSL مدعوم في كل مكان؟
تفهم جميع المتصفحات الحالية hsl() وhsla(). وهو في CSS منذ سنوات كثيرة.
هل التحويل دقيق؟
هو دقيق بمعنى أنه يصف اللون نفسه، لكن الأرقام تُقرّب إلى درجات ونسب صحيحة، فقد تصل العودة إلى خطوة بعيداً.
هل يُرفع لوني؟
لا. يجري الحساب في متصفحك ولا يُرسل شيء إلى أي مكان.
كيف أعود؟
بـHSL إلى HEX.
الاختيار الحكيم عند تحويل HEX إلى HSL
استخدم HSL للعمل وhex للتخزين
احتفظ باللوحة الرئيسية بصيغة hex، حيث لا لبس فيها، واستخدم HSL حين تريد صنع تنويعات. تخسر الرحلات ذهاباً وإياباً قليلاً؛ أما الأصل فلا.
انظر في فضاءات لونية أحدث
يقدم CSS الآن oklch() وصيغاً مشابهة تبدو فيها الإضاءة المتساوية متساوية فعلاً. وهي تستحق التعلم لأنظمة التصميم الجديدة. ويبقى HSL الصيغة التي يفهمها الجميع تقريباً وتدعمها كل أداة.
استخدم الخصائص المخصصة
عرّف --hue و--sat و--light، وابنِ الألوان منها: hsl(var(--hue) var(--sat) var(--light)). فتتغير السمة بتحرير بضعة أرقام.
قراءة HSL وكتابته بثقة
بعض المعالم للتذكر
تجعل بضعة أرقام HSL أسهل قراءة. فالصبغات عند مضاعفات 60 هي الألوان النقية: 0 أحمر، و60 أصفر، و120 أخضر، و180 سماوي، و240 أزرق، و300 أرجواني. وإضاءة 50 مع تشبع 100 تعطي أنقى نسخة من أي صبغة، وإضاءة 95 فأكثر تدرج شاحب إلى حد أنه يصلح خلفية. وحين تحوّل HEX إلى HSL وترى صبغة قرب أحد هذه المعالم تستطيع تسمية عائلة اللون بنظرة.
الانتقال بين العائلات
إضافة 180 إلى صبغة تعطي اللون المقابل على العجلة، وهو المتمم وعادةً أقوى تباين. وإضافة 30 أو طرحها تعطي جاراً يقع بارتياح بجانب الأصل. ويستخدم المصممون هذه الخطوات لاختيار ألوان مميزة تناسب لون العلامة دون تخمين.
الاحتفاظ بملاحظة للقيم المحوّلة
حين تحوّل HEX إلى HSL للوحة فاكتب النتائج في جدول مع hex الأصلي بجانبها. يبيّن الجدول كيف ترتبط الألوان، وإذا خرجت صبغة أو إضاءة عن بقية الألوان فالشذوذ مرئي فوراً. ويعطي فريقك أيضاً مرجعاً مشتركاً.
الاختبار على شاشات حقيقية
الألوان التي تبدو متوازنة على شاشة معايَرة قد تبدو مختلفة على هاتف في الشمس أو حاسوب محمول رخيص. افحص اللوحة النهائية على جهازين على الأقل، وعدّل الإضاءة قليلاً إذا اختفت التدرجات الشاحبة على أحدهما.
محوّلات ذات صلة
تغطي أسرة الأدوات نفسها التحويلات المجاورة. وللعودة استخدم HSL إلى HEX. وللأرقام وراء الرمز هناك HEX إلى RGB وRGB إلى HEX، وللطباعة HEX إلى CMYK وCMYK إلى HEX. وللأحجام في ورقة الأنماط نفسها فإن px إلى rem وpx إلى em تفعلان للأطوال ما تفعله هذه الصفحة للألوان.
مثال محلول
لنفترض أن لون علامتك #1E7A5C. تحوّل HEX إلى HSL وتقرأ hsl(160, 61%, 30%). ولحالة التمرير تكتب hsl(160, 61%, 36%)، أفتح قليلاً. ولحالة الضغط hsl(160, 61%, 24%). ولخلفية شاحبة جداً خلف إشعار hsl(160, 40%, 95%). ولزر معطّل hsl(160, 12%, 60%)، الصبغة نفسها بعد سحب معظم اللون. خمسة ألوان وصبغة واحدة، كُتبت في دقيقة، وتبدو كلها كأنها تنتمي معاً. وحين يتغير لون العلامة تغيّر رقم الصبغة مرة واحدة.
قائمة تحقق قصيرة
قبل التحويل
قرر ماذا تريد أن تفعل باللون: تنويعه أو تطبيقه في سمة أو قراءته فقط.
أثناء التحويل
الصق hex واقرأ hsl ودوّن الأرقام الثلاثة.
بعد التحويل
اصنع التنويعات بتغيير رقم واحد في كل مرة، وانظر إليها على الخلفية الحقيقية.
أخطاء شائعة
معاملة الأرقام المقرّبة على أنها دقيقة
هي أعداد صحيحة. احتفظ بـhex أصلاً رئيسياً.
مساواة الإضاءة بالسطوع
قد يختلف لونان بالإضاءة نفسها اختلافاً كبيراً في مدى سطوعهما.
حذف علامات النسبة المئوية
يحتاج التشبع والإضاءة إليهما في CSS.
ألوانك تبقى على جهازك
يجري الحساب محلياً. يستخدم متصفحك أنت قيمك ولا يُرسل شيء إلى أي مكان. فلا شيء يُحذف بعد ذلك ولا حساب يُنشأ. وهذه هي الطريقة الواضحة لتحويل HEX إلى HSL.
الخلاصة
لتحويل HEX إلى HSL هنا، اكتب رمز hex أو الصقه واقرأ قيمة hsl فوراً. يحتفظ التحويل باللون كما تصنفه العين: صبغة على العجلة، ومدى تشبعه، ومدى إضاءته. وهذا هو سبب أن HSL يستحق الاقتناء، إذ تستطيع جعل اللون أشحب أو درجة أغمق بتغيير رقم واحد، وهو شبه مستحيل في hex. ويصف الاثنان الألوان نفسها، لكن HSL يبلغها عبر هندسة مختلفة وتُقرّب أرقامه الثلاثة إلى درجات صحيحة ونسب صحيحة، فقد يصل لون ذهب إلى HSL وعاد إلى خطوة أو خطوتين من حيث بدأ. وإذا احتجت إلى البايتات نفسها بالضبط فاحتفظ بـhex. ولا شيء يُرفع.