ForHosting KIT · أدوات المطورين

تحويل HSL إلى نص CSS

حوّل قيم تدرّج اللون والتشبّع والإضاءة المنفصلة إلى نص CSS منسّق بصيغة hsl() من دون تركيب علامات الترقيم يدوياً أو استعمال تقريب غير متّسق أو نسيان علامات النسبة المئوية.

● Betaمجاني · داخل متصفحك

شغّل الأداة مجانًا اطّلع على الـAPI

استخدمها من الويبAPIالبريدTelegramالتطبيق قريبًا

تتحقق الأداة من كل مكوّن، وتطبّع التدرّج ضمن دائرة الألوان، وتقرّب القيم وفق الدقة المختارة، ثم تعيد نتيجة متوقعة. تفيد الأداة كلما احتجتم إلى تحويل بيانات ألوان منظّمة إلى CSS جاهز للمتصفح، بدءاً من مسارات رموز التصميم ومولّدات السمات ووصولاً إلى الاختبارات الآلية والقوالب وأدوات التطوير الصغيرة.

أدخلوا مكوّنات HSL كأرقام

أرسلوا تدرّج اللون والتشبّع والإضاءة كأرقام JSON، لا كتعبير CSS منسّق جزئياً. يمثّل التدرّج زاوية بالدرجات، ويمكن أن يكون موجباً أو سالباً أو أكبر من دورة كاملة. تعيده الأداة إلى المجال القياسي الذي يبدأ من 0 وينتهي قبل 360، ولذلك يعادل -30 القيمة 330 وتصبح 390 مساوية لـ30. يمثّل التشبّع والإضاءة نسبتين مئويتين، لكنهما يُدخلان من دون العلامة؛ استعملوا 65 للتعبير عن خمسة وستين في المئة. يجب أن تبقى القيمتان بين 0 و100. كذلك يجب أن تكون جميع القيم الإلزامية أرقاماً محدودة؛ تُرفض السلاسل مثل «50» والحقول المفقودة وnull وInfinity وNaN كي تظهر أخطاء البيانات مبكراً وتبقى النتائج متطابقة في API والمتصفح والاختبارات.

تحكموا في التقريب الحتمي

استخدموا precision لتحديد الحد الأقصى للمنازل العشرية المحفوظة في المكوّنات الثلاثة. القيمة الافتراضية هي 2، وتُقبل الأعداد الصحيحة من 0 إلى 6. تنتج القيمة 0 مكوّنات صحيحة، بينما تحفظ القيم الأعلى تفاصيل أكثر. يحدث التقريب بعد تطبيع التدرّج، وتُحذف الأصفار النهائية غير الضرورية ويُكتب الصفر السالب كصفر عادي. لا تعتمد القواعد على الإعدادات الإقليمية: تبقى الفاصلة العشرية نقطة، وتُفصل الوسائط بفاصلة ومسافة، ويحصل التشبّع والإضاءة دائماً على علامة النسبة المئوية. لذلك تعيد المدخلات الصالحة نفسها نصاً مطابقاً تماماً في كل بيئة تشغيل.

استخدموا CSS الناتج بأمان

تتضمن النتيجة حقل css بقيمة وفق الصيغة hsl(h, s%, l%). يمكنكم وضعها في تعريف نمط أو خاصية DOM أو رمز تصميم أو اختبار golden. تقتصر القدرة على التنسيق؛ فهي لا تحوّل RGB أو القيم الست عشرية، ولا تضيف شفافية ألفا، ولا تحسب التباين، ولا تقرر صلاحية اللون للنص. عند إنشاء السمات، تحققوا من السجلات المصدر ونسّقوا كل لون منفرداً ليسهل تحديد الخطأ. إذا كانت الدقة جزءاً من اصطلاح منشور، فأرسلوها صراحة. تبلغ كلفة كل طلب آلي $0.002. ضعوا النص الناتج فقط في موضع يتوقع قيمة لون CSS، وليس داخل المحددات أو عناصر الترميز الأخرى.

حالات الاستخدام

إنشاء رموز التصميم

حوّلوا سجلات HSL المحسوبة إلى قيم CSS متّسقة قبل كتابة متغيرات السمات أو ملفات الرموز.

توحيد مخرجات النماذج

تحققوا من أرقام منتقي الألوان وأنشئوا نصاً ثابتاً للمعاينة أو التخزين أو خصائص الأنماط.

إعداد اختبارات مستقرة

طبّقوا تقريباً ومسافات ثابتة لمنع تغيّر اللقطات بسبب اختلاف تنسيق الأرقام المتكافئة.

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

ما كلفة الطلب الواحد؟

السعر الأساسي لخدمة API هو $0.002 لكل طلب.

هل تتضمن المدخلات علامات النسبة المئوية؟

لا. أرسلوا أرقاماً من 0 إلى 100، وستضيف الأداة العلامات المطلوبة.

ماذا يحدث لتدرّج خارج المجال من 0 إلى 360؟

يُلف حول دائرة الألوان إلى المجال الذي يبدأ من 0 وينتهي قبل 360.

كم منزلة عشرية يمكن الاحتفاظ بها؟

اضبطوا precision على عدد صحيح من 0 إلى 6. القيمة الافتراضية 2، وتُحذف الأصفار النهائية.

هل تدعم الأداة شفافية ألفا؟

لا. تنتج نص hsl() معتماً من ثلاثة مكوّنات ولا تقبل مكوّن ألفا.

للمطوّرين — الوصول عبر API

كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.

الـEndpoint

POSThttps://api.kit.forhosting.com/color/hsl-to-css

صادِق على طلبك بترويسة 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 فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.

الأخطاء

HTTP	الرمز	المعنى
`401`	`unauthorized`	مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك.
`402`	`insufficient_balance`	رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة.
`404`	`unknown_type`	نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب.
`429`	`rate_limited`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

اطّلع على توثيق KIT الكامل ←