تحويل HSL إلى نص CSS
احصل على قيمة hsl() جاهزة للمتصفح دون كتابة الفواصل وعلامات النسبة يدوياً: الصبغة 210.456 والتشبع 64.444 والإضاءة 42.225 تصبح hsl(210.46, 64.44%, 42.23%) بمنزلتين عشريتين افتراضياً. مجاناً في متصفحك.
- مجاني
- يعمل في متصفحك
- دون تسجيل
- بياناتك لا تغادر جهازك
شغّل الأداة مجانًا
مثال محلول
- Hue
- 210.456
- التشبع
- 64.444
- السطوع
- 42.225
- Css
- hsl(210.46, 64.44%, 42.23%)
حوّل قيم تدرّج اللون والتشبّع والإضاءة المنفصلة إلى نص CSS منسّق بصيغة hsl() من دون تركيب علامات الترقيم يدوياً أو استعمال تقريب غير متّسق أو نسيان علامات النسبة المئوية. تتحقق الأداة من كل مكوّن، وتطبّع التدرّج ضمن دائرة الألوان، وتقرّب القيم وفق الدقة المختارة، ثم تعيد نتيجة متوقعة. تفيد الأداة كلما احتجتم إلى تحويل بيانات ألوان منظّمة إلى CSS جاهز للمتصفح، بدءاً من مسارات رموز التصميم ومولّدات السمات ووصولاً إلى الاختبارات الآلية والقوالب وأدوات التطوير الصغيرة.
أدخلوا مكوّنات HSL كأرقام
يمثّل التدرّج زاوية بالدرجات، ويمكن أن يكون موجباً أو سالباً أو أكبر من دورة كاملة. تعيده الأداة إلى المجال القياسي الذي يبدأ من 0 وينتهي قبل 360، ولذلك يعادل -30 القيمة 330 وتصبح 390 مساوية لـ30. يمثّل التشبّع والإضاءة نسبتين مئويتين، لكنهما يُدخلان من دون العلامة؛ استعملوا 65 للتعبير عن خمسة وستين في المئة.
يجب أن تبقى القيمتان بين 0 و100.
تحكموا في التقريب الحتمي
استخدموا precision لتحديد الحد الأقصى للمنازل العشرية المحفوظة في المكوّنات الثلاثة. القيمة الافتراضية هي 2، وتُقبل الأعداد الصحيحة من 0 إلى 6. تنتج القيمة 0 مكوّنات صحيحة، بينما تحفظ القيم الأعلى تفاصيل أكثر.
يحدث التقريب بعد تطبيع التدرّج، وتُحذف الأصفار النهائية غير الضرورية ويُكتب الصفر السالب كصفر عادي. لا تعتمد القواعد على الإعدادات الإقليمية: تبقى الفاصلة العشرية نقطة، وتُفصل الوسائط بفاصلة ومسافة، ويحصل التشبّع والإضاءة دائماً على علامة النسبة المئوية. لذلك تعيد المدخلات الصالحة نفسها نصاً مطابقاً تماماً في كل بيئة تشغيل.
استخدموا CSS الناتج بأمان
تتضمن النتيجة حقل css بقيمة وفق الصيغة hsl(h, s%, l%). تقتصر القدرة على التنسيق؛ فهي لا تحوّل RGB أو القيم الست عشرية، ولا تضيف شفافية ألفا، ولا تحسب التباين، ولا تقرر صلاحية اللون للنص. عند إنشاء السمات، تحققوا من السجلات المصدر ونسّقوا كل لون منفرداً ليسهل تحديد الخطأ.
إذا كانت الدقة جزءاً من اصطلاح منشور، فأرسلوها صراحة. ضعوا النص الناتج فقط في موضع يتوقع قيمة لون CSS، وليس داخل المحددات أو عناصر الترميز الأخرى.
حالات الاستخدام
إنشاء رموز التصميم
حوّلوا سجلات HSL المحسوبة إلى قيم CSS متّسقة قبل كتابة متغيرات السمات أو ملفات الرموز.
توحيد مخرجات النماذج
تحققوا من أرقام منتقي الألوان وأنشئوا نصاً ثابتاً للمعاينة أو التخزين أو خصائص الأنماط.
إعداد اختبارات مستقرة
طبّقوا تقريباً ومسافات ثابتة لمنع تغيّر اللقطات بسبب اختلاف تنسيق الأرقام المتكافئة.
الأسئلة الشائعة
هل تتضمن المدخلات علامات النسبة المئوية؟
لا. أرسلوا أرقاماً من 0 إلى 100، وستضيف الأداة العلامات المطلوبة.
ماذا يحدث لتدرّج خارج المجال من 0 إلى 360؟
يُلف حول دائرة الألوان إلى المجال الذي يبدأ من 0 وينتهي قبل 360.
كم منزلة عشرية يمكن الاحتفاظ بها؟
اضبطوا precision على عدد صحيح من 0 إلى 6. القيمة الافتراضية 2، وتُحذف الأصفار النهائية.
هل تدعم الأداة شفافية ألفا؟
لا. تنتج نص hsl() معتماً من ثلاثة مكوّنات ولا تقبل مكوّن ألفا.
هل تتغير النتيجة بحسب لغتي أو منطقتي؟
لا. القواعد ثابتة ولا تتبع الإعدادات الإقليمية، ففاصل الكسور العشرية نقطة دائماً، والقيم نفسها تعطي دائماً hsl(210.46, 64.44%, 42.23%) الصالحة في أي متصفح.
أدوات ذات صلة
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/color/hsl-to-css \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":210.456,"saturation":64.444,"lightness":42.225}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-to-css", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 210.456,
"saturation": 64.444,
"lightness": 42.225
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-to-css",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 210.456,
"saturation": 64.444,
"lightness": 42.225
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-to-css", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":210.456,"saturation":64.444,"lightness":42.225}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":210.456,"saturation":64.444,"lightness":42.225}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-to-css", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"hue": 210.456,
"saturation": 64.444,
"lightness": 42.225
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_to_css",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |
ملاحظات تقنية
أدخلوا مكوّنات HSL كأرقام
أرسلوا تدرّج اللون والتشبّع والإضاءة كأرقام JSON، لا كتعبير CSS منسّق جزئياً. كذلك يجب أن تكون جميع القيم الإلزامية أرقاماً محدودة؛ تُرفض السلاسل مثل «50» والحقول المفقودة وnull وInfinity وNaN كي تظهر أخطاء البيانات مبكراً وتبقى النتائج متطابقة في API والمتصفح والاختبارات.
استخدموا CSS الناتج بأمان
تبلغ كلفة كل طلب آلي $0.002.
أسئلة تقنية
ما كلفة الطلب الواحد؟
السعر الأساسي لخدمة API هو $0.002 لكل طلب.