محول hex إلى HSL
حوّل رمز hex إلى قيم تضبطها بالعين: يعادل #FF8040 صبغة 20.1° وتشبعاً 100% وإضاءة 62.55%، جاهزاً للصق بصيغة hsl(20.1 100% 62.55%). مجاناً في متصفحك.
- مجاني
- يعمل في متصفحك
- دون تسجيل
- بياناتك لا تغادر جهازك
شغّل الأداة مجانًا
مثال محلول
- سداسي
- #FF8040
- أرقام hex
- FF8040
- المقاومة (Ω)
- 255
- G
- 128
- B
- 64
غالبًا ما يخزّن المصممون ومطورو الواجهة الأمامية وأنظمة العلامة الألوان كرموز hex مثل #FF8040 أو الشكل القصير #f80، لكنهم يحتاجون الصبغة والتشبع والإضاءة لضبط النغمة دون انحراف السطوع، وبناء متغيرات CSS، أو تغذية رموز تصميم واعية باللون. يقبل محول hex إلى HSL هذا رمز لون سداسي عشري بثلاثة أو ستة أرقام مع أو بدون # بادئة، ويوسّع الأشكال المختصرة كما يفعل CSS، وينفّذ تحويلًا حتميًا بأسلوب sRGB، ويعيد الصبغة بالدرجات والتشبع والإضاءة كنسب مئوية، مع سلاسل CSS hsl حديثة وقديمة يمكن لصقها في أوراق الأنماط. رموز hex غير الصالحة—طول خاطئ، أحرف غير hex، أو حقل مفقود—تفشل بخطأ إدخال غير صالح واضح حتى لا تصبح البيانات السيئة تثبيتًا صامتًا.
إدخال رمز hex وما يحسبه التحويل
قدّموا حقل سلسلة باسم hex برمز لون سداسي عشري من ثلاثة أو ستة أرقام. # البادئة اختيارية، لذا يُقبل #FF8040 و FF8040، وكذلك الأشكال القصيرة #f80 و f80. تُتجاهل حالة الأحرف: الأرقام الصغيرة والكبيرة والمختلطة تتوحّد إلى نفس النتيجة.
تتوسع الرموز ثلاثية الأرقام بمضاعفة كل رقم—f80 يصبح FF8800—مطابقة لقاعدة اختصار لون CSS في المتصفحات. بعد التوسيع يحلّل المحرك رقمين hex لكل قناة إلى أعداد صحيحة أحمر وأخضر وأزرق من صفر إلى 255، ثم يُطبّع كل قناة بالقسمة على 255 لتستقر القيم في الفترة الوحدوية. يجد الحد الأقصى والأدنى لتلك المكونات الثلاثة المطبّعة والكرومة كفرقها.
الإضاءة نصف مجموع الأقصى والأدنى. عندما تكون الكرومة صفرًا يكون اللون عديم اللون: الصبغة صفر والتشبع صفر، وتبقى الإضاءة وحدها لوصف الرمادي من الأسود عبر الرمادي المتوسط إلى الأبيض. عندما تكون الكرومة موجبة، التشبع هو الكرومة مقسومة على واحد ناقص القيمة المطلقة لضعفي الإضاءة ناقص واحد، وهي صيغة تشبع HSL القياسية في CSS ومكدسات الرسوم.
تُبنى الصبغة من قطاع عجلة الألوان حيث تقع القناة القصوى: هيمنة أحمر أو أخضر أو أزرق، مُقاسة إلى درجات في المدى نصف المفتوح من صفر حتى 360.
التحويل في عمل التصميم اليومي وحدوده
استخدموا محول hex إلى HSL المجاني داخل المتصفح لتعديلات اللوحة وعروض المحاضرات والفحوصات السريعة دون تثبيت مكتبة ألوان. فضّلوا هذه النقطة عندما تكون نية البحث وإطار المنتج تحديدًا hex إلى HSL مع تحقق صارم من الرمز؛ لثلاثيات قناة RGB استخدموا محول RGB إلى HSL المخصص، وللتحويل متعدد الصيغ بين HEX و RGB و HSL و LAB و CMYK في استدعاء واحد استخدموا محول الألوان الأوسع في الكتالوج.
اقرنوا مخرجات HSL بفاحصي التباين عند بناء سمات ميسّرة، أو غذّوا إزاحات الصبغة في خطوط أنابيب رموز العلامة التي تُبقي الإضاءة ثابتة أثناء تدوير ألوان التمييز المشتقة من عينة hex للعلامة. تتبع مدخلات المصدر نفس قواعد الاحتفاظ لعناصر parse الأخرى في KIT، والنتائج آمنة للتثبيت في ثوابت التكامل المستمر لأن الخوارزمية حتمية بالكامل.
حالات الاستخدام
رموز CSS وتصميم من ألوان hex العلامة
حوّلوا عينات hex من أدوات التصميم إلى HSL حتى تضبط السمات الصبغة أو الإضاءة مع سياسات تشبع متسقة في الوضعين الفاتح والداكن.
خطوط أنابيب اللوحة والعلامة
الأتمتة التي تبدأ من ألوان hex العلامة تستخرج مكوّنات HSL لتوليد تدرجات وظلال ومتغيرات تمييز دون قبول رموز تالفة بصمت.
الأسئلة الشائعة
كيف أحول لون hex إلى HSL بهذه الأداة؟
تتضمن الاستجابة h و s و l وقنوات RGB وسلاسل CSS وكائن hsl متداخلاً.
ماذا يحدث إذا كان رمز hex غير صالح؟
تُقبل فقط 3 أو 6 أرقام سداسية عشرية (# بادئة اختيارية). الطول الخاطئ أو الأحرف غير hex تُرفض ولا تُحسب.
هل الصبغة والتشبع والإضاءة نسب مئوية أم كسور 0–1؟
الصبغة بالدرجات من 0 حتى 360. التشبع والإضاءة نسب مئوية من 0 إلى 100، موافقة لاستخدام hsl() الشائع في CSS.
هل يمكنني استخدام رموز hex قصيرة بثلاثة أرقام؟
نعم. رموز مثل #f80 تتوسع إلى #FF8800 بمضاعفة كل رقم، مطابقة لقواعد اختصار CSS، ثم تُحوَّل إلى HSL.
ماذا يحدث مع رمادي مثل #808080؟
قنواته الثلاث متساوية، لذا يكون التشبع 0 والصبغة 0 أيضاً. وعندئذ تصف الإضاءة وحدها اللون، من الأسود مروراً بالرمادي المتوسط حتى الأبيض.
أدوات ذات صلة
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/color/hex-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#FF8040"}'const res = await fetch("https://api.kit.forhosting.com/color/hex-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#FF8040"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hex-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#FF8040"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hex-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#FF8040"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#FF8040"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hex-hsl", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"hex": "#FF8040"
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hex_hsl",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |
ملاحظات تقنية
يعمل ودجة المتصفح مجانًا على جهازكم؛ وتفرض API المدفوعة مسبقًا $0.002 لكل عنصر ناجح عندما تحتاج الخوادم وSDK نفس العقد.
إدخال رمز hex وما يحسبه التحويل
تربط الأسماء البديلة color و colour و value و hex_code بنفس الحقل عندما يفضّل العملاء تلك الأسماء. المدخلات المتطابقة تنتج دائمًا JSON متطابقًا لأن المسار حساب بحت بلا شبكة ولا بذرة عشوائية ولا ساعة جدارية.
قراءة الصبغة والتشبع والإضاءة وصدى RGB وسلاسل CSS
ثم تعرض h و s و l للصبغة بالدرجات والتشبع بالمئة والإضاءة بالمئة. تُقرّب القيم إلى أربع منازل عشرية لثوابت مستقرة مع بقاء الدقة كافية لعمل التصميم. عند النجاح تتضمن الاستجابة سلسلة hex مطبّعة بـ # بادئة وستة أرقام كبيرة، وحقل hex_digits بلا #، والقنوات r و g و b الموسّعة للتحقق من التحليل أو الربط بأدوات RGB فقط. تظهر الأعداد الثلاثة نفسها تحت الأسماء الطويلة hue و saturation و lightness، ومتداخلة داخل كائن hsl، حتى يختار كود الواجهة وعروض SDK والمقيّمون الشكل المناسب بلا تعيين إضافي. تُدرج سلسلتان جاهزتان للصق: hsl_css تستخدم الشكل الحديث لوحدة CSS Color مفصولًا بمسافات مثل hsl(20.1 100% 62.55%)، و hsl_legacy تستخدم الشكل الكلاسيكي بالفواصل والأقواس الذي ما زالت المحللات القديمة تتوقعه. حقل method دائمًا hex_to_hsl حتى تتفرع الموجّهات اللاحقة بلا شمّ الأشكال. الأحمر النقي #FF0000 يعطي صبغة صفر بتشبع كامل وإضاءة متوسطة؛ الأخضر النقي #00FF00 والأزرق النقي #0000FF يقعان قرب 120 و 240 درجة على التوالي؛ القنوات المتساوية مثل #808080 تنتج رماديًا بتشبع صفر. hex المفقود والسلاسل الفارغة والأحرف غير hex والأطوال غير 3 أو 6 أرقام تفشل جميعًا بـ invalid_input ولا تُحسب بعد رفض المحرك.
استخدام API والتسعير وسير عمل التصميم والحدود العملية
أرسلوا جسم JSON بالسلسلة المطلوبة hex مضبوطة على رمز لون بثلاثة أو ستة أرقام. استخدموا API المدفوعة مسبقًا عندما يحتاج نظام تصميم أو مولّد سمات أو خط أنابيب إمكانية وصول أو أداة لون تجارة إلكترونية عقدًا مستقرًا تحت رصيد KIT بمبلغ $0.002 لكل عنصر ناجح؛ فشل التحقق لا يستهلك الرصيد أبدًا بعد رفض المحرك. يمكن لمؤلفي SDK ربط h و s و l مباشرة بعناصر تحكم النماذج أو خصائص CSS المخصصة دون إعادة تنفيذ تحليل hex والتحويل في كل لغة.
حالات التكامل
تعليم وتقييم رياضيات اللون
تتحقق الدورات وتقييمات البرمجة من إجابات hex→HSL للطلاب مقابل JSON حتمي، مع invalid_input واضح عندما يكون رمز hex تالفًا.
أسئلة تقنية
هل محول hex إلى HSL مجاني؟
تعمل أداة المتصفح مجانًا على جهازكم. تستخدم استدعاءات API رصيد KIT المدفوع مسبقًا بمبلغ $0.002 لكل عنصر ناجح؛ فشل التحقق لا يُحسب.