تحويل HSL إلى HEX Hue Saturation Lightness ↔ Hexadecimal مجاناً عبر الإنترنت آمن
اكتب قيمةً بـHSL فتقرأها في الحال بـHEX. يجري الحساب داخل متصفحك، ولا يُرسَل شيء إلى أي مكان، وما يتوقف عليه الجواب مكتوبٌ أدناه لا مفترَض.
لا رفع لأي ملف
من أين جاءت هذه الكتابات
الست عشري وRGB شيءٌ واحد كُتب مرتين. فلون الشاشة ثلاثة أعداد — كم يُبَثّ من الضوء الأحمر والأخضر والأزرق — كلٌّ منها من 0 إلى 255، أي بايت واحد؛ والست عشري يكتب تلك البايتات بالأساس ستة عشر لا غير، فـ#FF8800 وrgb(255, 136, 0) أمرٌ واحد لبكسلٍ واحد. وقد ابتُكر HSL لأن أياً منهما غير مقروءٍ لإنسان: فهو يعطي الصبغة زاويةً على عجلة الألوان، والإشباع والإضاءة نسبتين مئويتين، فيستطيع المصمم أن يُفتِّح لوناً دون أن يعيد حساب ثلاثة أرقام. أما CMYK فمن عالمٍ آخر بالكلية — عالم الحبر لا الضوء. وهو طرحي، مبنيٌّ على أربع ألواح طباعة، ولا يبلغ كل لونٍ تستطيعه الشاشة، لأن الشاشة تبعث الضوء والورق لا يردّه إلا رداً.
أين تصادفها
الست عشري هو ما تكتبه في صحيفة الأنماط وما تناولك إياه أداةُ التصميم. وRGB يظهر حيثما احتاج اللون إلى حساب: التدرجات، والشفافية، وشيفرةٌ تحسب درجةً. وإلى HSL تمتد اليد حين تضبط لوحة ألوانٍ يدوياً، لأن التغييرات المرادة عادةً تغييرٌ في واحدٍ من أعداده الثلاثة. وCMYK هو ما تطلبه المطبعة، والتحويل إليه هو اللحظة التي يكفّ فيها التصميم عن أن يكون ضوءاً ويصير حبراً.
أسئلة متكررة
لماذا تختلف نتيجة CMYK عندي عما تعطيني إياه المطبعة؟
لأنه ليس ثمة تحويلٌ واحد صحيح. فالحساب في هذه الصفحة هو الحساب البسيط المستقل عن الجهاز، وهو الجواب الصحيح حين تحتاج نقطة بدايةٍ أو مكافئاً تقريبياً. أما المطبعة فتحوّل عبر ملفٍّ لونيّ يراعي الحبر والورق والآلة بأعيانها، واللون RGB نفسه يعطي قيم CMYK على الورق اللامع غير ما يعطيه على غير المطليّ. فلكل ما يجب أن يتطابق، اطلب من المطبعة ملفَّها بدل الثقة بمعادلة.
لماذا يتعذّر طبع بعض ألوان الشاشة؟
لأن الاثنين لا يبلغان الألوان نفسها. فالشاشة تصنع اللون بجمع الضوء، وتستطيع سماويّاً أو أخضر زاهياً مشبعاً لا يجاريه الحبر؛ والورق يصنع اللون بامتصاص الضوء، وأسطع ما يبلغه هو بياض الصفحة. وتُسمّى مجموعةُ الألوان التي يبلغها كلٌّ منهما «المدى»، وحيث لا يتداخلان يضطر التحويل إلى اختيار أقرب لونٍ متاح. ولهذا كثيراً ما يبدو اللون الزاهي على الشاشة أبهتَ قليلاً في الطباعة.
هل الجواب دقيق؟
حيث تُعرَّف الوحدتان إحداهما بالأخرى بأعداد صحيحة، نعم — وتقول الصفحة ذلك فوق الرقم، والتقريب الوحيد في عدد المنازل المعروضة. وحيث لا تكون النسبة عشرية منتهية، تعرض الصفحة اثنتي عشرة رقماً معنوياً وتقول إن العلاقة تقريبية، بدل أن تدّعي غير ذلك.
هل يغادر جهازي شيءٌ مما أكتبه؟
لا. الحساب يجري في متصفحك؛ لا يُرفَع شيء، ولا خادم أصلاً ليُرفَع إليه. حمِّل الصفحة مرة واحدة وتبقى تعمل والشبكة مطفأة.
لماذا تحوّل HSL إلى HEX
عملت على لون بصيغة HSL لأنها الصيغة التي تستطيع التفكير بها: صبغة 30، تشبع 29%، إضاءة 28%، بني خافت، ونسخة أشحب عند 34% لحالة التمرير. والآن يجب أن يذهب اللون إلى مكان يريد رمز hex: ملف رموز تصميم، أو ورقة علامة، أو أداة لا تفهم hsl()، أو قالب بريد، أو رسالة إلى زميل. وتحويل HSL إلى HEX هو أخذ اللون الذي فكرت فيه وكتابته بالشكل القصير الذي لا لبس فيه ويفهمه كل شيء.
يعمل التحويل في الاتجاه المعاكس لما يلقاه المصممون أولاً. فهو يبدأ من ثلاثة أرقام سهلة على الإنسان ويصل إلى ثلاثة بايتات. وكل خطوة حساب مباشر، لكنها تتضمن بعض حالات تشبه حساب المثلثات وتقريباً، ولهذا يفضل الناس أن يُجرى لهم. وتفعله الصفحة في متصفحك ولا يُرفع شيء. وستجد أدناه كيف تصير الأرقام الثلاثة ست خانات hex، وما الذي يحتفظ به التحويل، ولماذا قد يصل لون مرّ عبر HSL إلى خطوة أو خطوتين من حيث بدأ، وطرق استخدام المصممين للتحويل، والفخاخ التي يجب تجنبها.
كيف يعمل التحويل
من الصبغة والتشبع والإضاءة إلى الأحمر والأخضر والأزرق
يحسب المحوّل أولاً الكروما، وهي مدى بعد اللون عن الرمادي: تزداد مع التشبع وتنقص كلما ابتعدت الإضاءة عن 50%. ثم يضع الصبغة في واحد من ستة قطاعات من عجلة الألوان، عرض كل منها 60 درجة، ويحدد من القطاع أي القنوات الثلاث عند حدها الأقصى وأيها عند الأدنى وأيها بينهما. وأخيراً يضيف ثابتاً لتخرج الإضاءة صحيحة، ويرفع القيم الثلاث من المدى 0 إلى 1 إلى 0 إلى 255، ويقرّب كلاً منها إلى عدد صحيح. وتُكتب هذه البايتات الثلاثة في الأساس ستة عشر، خانتين لكل منها.
مثال بالأرقام
خذ hsl(30, 29%, 28%). الكروما هي (1 − |2 × 0.28 − 1|) × 0.29 = 0.56 × 0.29 = 0.1624. وصبغة 30 درجة في منتصف القطاع الأول، فالقناة الوسطى نصف الكروما، 0.0812. والثابت الذي يُضاف هو 0.28 − 0.0812 = 0.1988. فالأحمر هو 0.1624 + 0.1988 = 0.3612، والأخضر هو 0.0812 + 0.1988 = 0.28، والأزرق 0.1988. وبعد الضرب في 255 والتقريب تصير هذه 92 و71 و51. وفي hex هي #5C4733.
الرماديات
حين يكون التشبع 0% يكون اللون رمادياً أياً كانت الصبغة، وتتساوى البايتات الثلاثة. و hsl(0, 0%, 50%) هو #808080. وتُهمل الصبغة، فأي رقم صبغة يعطي الرمادي نفسه.
ما يحتفظ به التحويل وما لا يستطيع
يحتفظ باللون كما وصفته
النتيجة هي اللون الذي أعطيت صبغته وتشبعه وإضاءته، مكتوباً بايتات. والأرقام الثلاثة التي كتبتها هي اللون كما تصنفه العين، صبغة على العجلة، ومدى تشبعه، ومدى إضاءته. وهذا هو سبب أن HSL يستحق الاقتناء، والتحويل ينقل اختيارك إلى hex بأمانة.
لا يستطيع وعد الأرقام نفسها عند العودة
يصف الاثنان الألوان نفسها، لكن HSL يبلغها عبر هندسة مختلفة وتُقرّب أرقامه الثلاثة إلى درجات ونسب صحيحة عند كتابتها. فقد يصل لون ذهب إلى HSL وعاد إلى خطوة أو خطوتين من حيث بدأ: مطابق بصرياً، لا بايتاً ببايت. وفي مثالنا كان #5A4632 لوناً يقارب HSL الخاص به hsl(30, 29%, 28%)؛ وتحويل تلك الأرقام المقرّبة عائداً يعطي #5C4733، على بعد خطوتين في الأحمر. وإذا احتجت إلى البايتات بالضبط فاحتفظ بـhex.
علامتا النسبة والدرجة
تقرأ الصفحة الصبغة بالدرجات والتشبع والإضاءة بالنسبة المئوية. ويمكنك كتابتها بالعلامات أو بدونها. والصبغة فوق 360 أو دون 0 تُلف حول العجلة، فـ390 هي نفسها 30.
استخدامات عملية
كتابة ملف رموز تصميم
يخزن نظام التصميم الألوان رموزاً. وتنشئ فرق كثيرة الألوان بصيغة HSL لأنها تستطيع التفكير بها، وتنشرها بصيغة hex لأن كل أداة تقرؤها. حوّل HSL إلى HEX مرة لكل رمز، فيكون الملف المنشور شيئاً يستطيع الجميع استخدامه.
إنتاج ألوان لأدوات لا تقرأ hsl()
تقبل برامج البريد وبعض محررات المستندات وبرامج الرسوميات الأقدم ومكتبات رسوم بيانية كثيرة hex فقط. وكل ما عملت عليه بصيغة HSL يجب أن يُحوَّل قبل أن تستطيع استخدامه.
فحص لوحة مولَّدة
السكربت الذي يولّد لوحة بتدوير الصبغة يعطي قائمة من قيم hsl(). ولتراها رموزاً كالتي تضعها في ورقة أنماط أو تسلمها لمصمم حوّل كلاً منها إلى hex. ويتيح لك أيضاً أن تلتقط القيم التي تُقرّب إلى الرمز نفسه فلا تختلف حقاً.
مشاركة لون في رسالة
رمز hex قصير وقابل للنسخ ويفهمه تقريباً كل من يعمل بالألوان. أما قيمة hsl() فأطول وأقل ألفة خارج التصميم. وحين ترسل لوناً إلى شخص فـhex هو الشكل المهذب.
كيف تحوّل HSL إلى HEX هنا
اكتب قيمة hsl أو الصقها
أدخل اللون في الحقل الأول بصيغة hsl(30, 29%, 28%)، أو الأرقام الثلاثة فقط. الصبغة بالدرجات، والتشبع والإضاءة بالنسبة المئوية.
اقرأ رمز hex
يظهر الجواب فوراً، كما في hsl(30, 29%, 28%) = #5C4733. ويُكتب بأحرف كبيرة وعلامة #.
انسخه إلى عملك
استخدم الرمز في ورقة أنماطك أو ملف الرموز أو رسالتك. وللاتجاه المعاكس فإن HEX إلى HSL على بعد نقرة.
من أين تأتي هذه الصيغ
hex وRGB هما الشيء نفسه مكتوباً مرتين
لون الشاشة ثلاثة أرقام، كم من الضوء الأحمر والأخضر والأزرق يُبعث، كل منها من 0 إلى 255، أي بايت واحد. ويكتب hex ببساطة هذه البايتات في الأساس ستة عشر. ولترى الأرقام حوّل HEX إلى RGB.
HSL وCMYK
اخترع HSL لأن أياً منهما لا يقرؤه الإنسان: فهو يعطي الصبغة زاوية حول عجلة ألوان، مع التشبع والإضاءة نسباً مئوية، ليستطيع المصمم أن يجعل شيئاً أفتح دون إعادة حساب ثلاثة أرقام. أما CMYK فتنتمي إلى عالم مختلف تماماً، حبر لا ضوء. وهي طرحية، مبنية من أربعة ألواح طباعة، ولا تبلغ كل لون تبلغه الشاشة، لأن الشاشة تبعث الضوء بينما الورق يعكسه فقط.
فخاخ عند تحويل HSL إلى HEX
توقع استعادة الرمز الأصلي
إذا بدأت من رمز hex وحوّلته إلى HSL ولم تعدّل شيئاً ثم حوّلته عائداً فقد تحصل على رمز مختلف على بعد خطوة أو خطوتين. ولون واحد لا يُرى الفرق. أما في نظام تصميم فقرر أي الشكلين هو الأصل، واعتبر الآخر مشتقاً.
خلط التشبع والإضاءة
من السهل تبديل الاثنين خطأً: فـ hsl(30, 28%, 29%) ليس hsl(30, 29%, 28%). والترتيب هو الصبغة ثم التشبع ثم الإضاءة. فإذا لم يبدُ اللون على الشاشة كما توقعت فتحقق من أنك لم تعكسهما.
نسيان أن الإضاءة ليست السطوع
قد يبدو لونان بالإضاءة نفسها مختلفين في السطوع. فالأصفر عند إضاءة 50% يبدو أسطع بكثير من الأزرق عند 50%. وإذا كنت تختار ألواناً للنص والخلفية فافحص تباينها بأداة مناسبة، لا بمقارنة أرقام الإضاءة.
استخدام قيم خارج المدى
يُقيَّد التشبع والإضاءة من 0 إلى 100 في المئة. والقيم خارج هذا المدى تُقصّ. وإضاءة 120% ليست أسطع من الأبيض؛ بل هي أبيض.
أسئلة يطرحها الناس قبل التحويل
ما هو hsl(0, 100%, 50%) بصيغة hex؟
#FF0000، أحمر نقي.
ما هو hsl(0, 0%, 100%) بصيغة hex؟
#FFFFFF، أبيض.
هل أستطيع استخدام الكسور العشرية؟
نعم. hsl(30.5, 28.6%, 27.8%) مقبول. وتُقرّب النتيجة إلى بايتات صحيحة.
هل التحويل دقيق؟
يعطي البايتات الدقيقة للأرقام التي كتبتها، مقرّبة إلى قيم صحيحة. وقد تصل العودة إلى خطوة بعيداً لأن أرقام HSL قُرّبت.
هل يُرفع لوني؟
لا. يجري الحساب في متصفحك ولا يُرسل شيء إلى أي مكان.
كيف أعود؟
بـHEX إلى HSL.
الاختيار الحكيم عند تحويل HSL إلى HEX
قرر أي الشكلين هو الأصل
إذا صمّمت بصيغة HSL فاحتفظ بقيم HSL مصدراً وانشر hex ناتجاً. وإذا أعطتك العلامة hex فاحتفظ به واستخدم HSL للتنويعات فقط. ومزج الاثنين مصدرين متساويين هو ما يخلق الانجراف.
استخدم HSL للتنويع وhex للتثبيت
حين تحتاج إلى عائلة من الدرجات فاعمل بصيغة HSL. وحين تحتاج إلى تثبيت لون ليكون مطابقاً في كل أداة فاكتبه بصيغة hex.
احتفظ بالأرقام التي كتبتها
سجّل قيم HSL بجانب hex في ملاحظة لوحتك. فإذا أراد أحدهم لاحقاً نسخة أشحب فيمكنه البدء من أرقامك لا من رمز قُرّب فعلاً.
قطاعات العجلة الستة
أي قناة عالية وأيها منخفضة
يقسم التحويل العجلة إلى ستة قطاعات من 60 درجة، وفي كل منها قناة عند حدها الأقصى وأخرى عند الأدنى وثالثة تتغير بسلاسة. من 0 إلى 60 يكون الأحمر عند الأقصى والأزرق عند الأدنى ويرتفع الأخضر: يتحول الأحمر إلى أصفر. ومن 60 إلى 120 يكون الأخضر عند الأقصى ويهبط الأحمر: يتحول الأصفر إلى أخضر. ومن 120 إلى 180 يبقى الأخضر عالياً ويرتفع الأزرق: يتحول الأخضر إلى سماوي. ومن 180 إلى 240 يتسلم الأزرق ويهبط الأخضر. ومن 240 إلى 300 يبقى الأزرق عالياً ويرتفع الأحمر: يتحول الأزرق إلى أرجواني. ومن 300 إلى 360 يتسلم الأحمر من جديد ويهبط الأزرق. وحين تحوّل HSL إلى HEX يفيد أن تعرف في أي قطاع صبغتك، لأن ذلك يخبرك أي الأزواج الثلاثة في الجواب سيكون الأكبر.
لماذا يحمل الجواب شبه العائلة
الألوان ذات الصبغة والتشبع نفسيهما والإضاءة المختلفة تعطي رموز hex تبدو كأقارب: النمط نفسه في أي زوج عالٍ وأيها منخفض، مقيساً صعوداً أو هبوطاً فقط. #5C4733 و#7A5F44 و#A38461 كلها من العائلة نفسها، الأحمر الأكبر ثم الأخضر ثم الأزرق. وتستطيع أن تتعلم قراءة هذا بنظرة، وهو يجعل التقاط الأخطاء أسهل.
بناء سلّم إضاءة
صبغة واحدة، تسع درجات
استخدام عملي جداً للتحويل هو بناء سلّم للون واحد من شاحب جداً إلى داكن جداً، من النوع الذي تسميه أنظمة التصميم 50 و100 و200 وهكذا حتى 900. اختر صبغة وتشبعاً، وانتقل بالإضاءة عبر قيم مثل 96 و90 و80 و70 و60 و50 و40 و30 و20 في المئة. حوّل HSL إلى HEX لكل درجة، فيكون لديك تسعة رموز تنتمي معاً. وخفض التشبع قليلاً عند الطرفين، بضع نقاط عند أشحب الدرجات وأغمقها، يبدو غالباً أطبع من إبقائه ثابتاً.
تسمية الدرجات
أعطِ كل درجة اسماً يسجل دورها لا قيمتها: surface لأشحبها، وborder للتي تليها، وtext لأغمقها. وفي الشيفرة يخبر الاسم القارئ التالي لأي غرض اللون، وتستطيع تغيير الرقم وراءه دون لمس القواعد التي تستخدمه.
السمات الفاتحة والداكنة
عكس السلّم
السمة الداكنة غالباً هي السمة الفاتحة مع قلب السلّم: تصير الدرجة الأشحب خلفية الصفحة في السمة الفاتحة وتصير الأغمق الخلفية في الداكنة. وإذا بنيت السلّم بصيغة HSL فلا تكلّفك السمة الداكنة سوى مجموعة تحويلات ثانية. أبقِ الصبغة ثابتة لتحفظ طابع العلامة، وعدّل التشبع قليلاً، لأن الألوان المشبعة تبدو قاسية على خلفيات داكنة.
فحص السمتين
اختبر كل زوج نص وخلفية في السمتين للتباين. فاللون الذي يصلح على الأبيض قد يفشل على ما يقارب الأسود، والفحص يأخذ دقيقة بأداة تباين ورموز hex التي أنتجتها للتو.
حين لا تملك إلا فكرة تقريبية عن اللون
ابدأ من العجلة ثم حسّن
أحياناً لا يكون لديك رمز hex أصلاً، بل فكرة فقط: أزرق هادئ، أو برتقالي دافئ، أو أخضر منعش. HSL مكان جيد للبدء، لأنك تستطيع اختيار صبغة من معالم العجلة، وضبط تشبع معتدل وإضاءة متوسطة، ثم تحوّل HSL إلى HEX لترى ما لديك. فإذا بدا صاخباً جداً فاخفض التشبع؛ وإذا بدا مسطحاً فحرّك الإضاءة. وكل محاولة تكلّف ثواني، وتنتهي برمز hex تستطيع وضعه مباشرة في ورقة أنماط.
محوّلات ذات صلة
تغطي أسرة الأدوات نفسها التحويلات المجاورة. وللعودة استخدم HEX إلى HSL. وللأرقام وراء الرمز هناك HEX إلى RGB وRGB إلى HEX، وللطباعة HEX إلى CMYK وCMYK إلى HEX. وللأحجام في ورقة الأنماط نفسها فإن px إلى rem يفعل للأطوال ما تفعله هذه الصفحة للألوان.
مثال محلول
لنفترض أنك اخترت أخضر لحالة النجاح في تطبيق: hsl(145, 55%, 38%). تكتبه وتقرأ #2C9658. وتستخدم ذلك الرمز في ملف الرموز باسم --success. ولخلفية إشعار نجاح تأخذ الصبغة نفسها، hsl(145, 45%, 94%)، وتقرأ #E9F7EF. وللحد hsl(145, 45%, 78%)، الذي يُقرأ #AEE0C3. ثلاثة رموز وصبغة واحدة، اشتُقت كلها في دقيقة، وكل منها رمز hex عادي تستطيع أي أداة في الفريق فتحه.
قائمة تحقق قصيرة
قبل التحويل
تحقق من ترتيب الأرقام الثلاثة: الصبغة والتشبع والإضاءة. وقرر أي الشكلين هو أصلك.
أثناء التحويل
اكتب القيم واقرأ hex وانسخه مع علامة #.
بعد التحويل
انظر إلى اللون على الشاشة في السياق، ودوّن قيم HSL بجانب الرمز لوقت لاحق.
أخطاء شائعة
تبديل التشبع والإضاءة
الترتيب هو الصبغة ثم التشبع ثم الإضاءة.
توقع استعادة hex القديم
قد يصل على بعد خطوة. احتفظ بالأصل إن كان ذلك مهماً.
مقارنة الإضاءة بدل التباين
استخدم أداة تباين للنص والخلفية.
ألوانك تبقى على جهازك
يجري الحساب محلياً. يستخدم متصفحك أنت قيمك ولا يُرسل شيء إلى أي مكان. فلا شيء يُحذف بعد ذلك ولا حساب يُنشأ. وهذه هي الطريقة الواضحة لتحويل HSL إلى HEX.
الخلاصة
لتحويل HSL إلى HEX هنا، اكتب الصبغة بالدرجات والتشبع والإضاءة بالنسبة المئوية، واقرأ رمز hex فوراً. يحتفظ التحويل باللون كما تصنفه العين: صبغة على العجلة، ومدى تشبعه، ومدى إضاءته. ويصف الشكلان الألوان نفسها، لكن HSL يبلغها عبر هندسة مختلفة وتُقرّب أرقامه الثلاثة إلى درجات صحيحة ونسب صحيحة، فقد يصل لون ذهب إلى HSL وعاد إلى خطوة أو خطوتين من حيث بدأ. وإذا احتجت إلى البايتات بالضبط فاحتفظ بـhex. ولا شيء يُرفع.