استيفاء لونين بنظام HSL عبر أقصر مسار للون
يمكنكم مزج لونين بالتحرك في فضاء HSL بدلا من حساب متوسط قنوات الأحمر والأخضر والأزرق.
شغّل الأداة مجانًا
أدخلوا لونين سداسيين وكسرا بين الصفر والواحد، فتُرجع القدرة النقطة الواقعة بينهما على هيئة قيم hex وRGB وHSL مطبّعة. يسلك اللون الجانب الأقصر من دائرة الألوان، مع قاعدة ثابتة عند تعادل مساري نصف الدورة تماما، ولذلك تنتج الطلبات المتطابقة النتيجة نفسها دائما. تجعل عملية التحقق الصارمة هذه الأداة مناسبة لأدوات التصميم ومسارات رموز السمات والإطارات المفتاحية للرسوم المتحركة والاختبارات القابلة للتكرار.
آلية الاستيفاء في HSL عبر أقصر مسار
يبدأ كل إدخال بلون سداسي من 3 أو 6 خانات، مع علامة الشباك في البداية أو من دونها. يوسّع المحرك الصيغة المختصرة، ويوحّد حالة الأحرف، ويحوّل قنوات sRGB الصحيحة إلى HSL، ثم يعامل اللون كزاوية لا كعدد خطي عادي. يصبح هذا الفرق مهما قرب حد دائرة الألوان. فالمزج من 350 درجة إلى 10 درجات ينبغي أن يقطع 20 درجة عبر الأحمر، لا أن يسلك الطريق الطويل عبر معظم الألوان الأخرى. لذلك تُطبّع القيمة الموقعة للفرق إلى المجال نصف المفتوح الذي يبدأ من -180 درجة مشمولة وينتهي عند 180 درجة غير مشمولة. وعند التعادل الدقيق عند 180 درجة يُختار الاتجاه السالب دائما، فتغدو حالة كانت ستبقى ملتبسة حتمية. يُستوفى التشبع والإضاءة مباشرة باستعمال الكسر نفسه. ثم يُحوّل لون HSL الناتج إلى قنوات RGB صحيحة مقربة وإلى سلسلة سداسية صغيرة الأحرف من 6 خانات. تُقرّب مكونات HSL وفرق اللون المعروضان إلى 6 منازل عشرية للحفاظ على JSON ثابت مع دقة مفيدة. لا تدخل الشبكة أو القيم العشوائية أو الساعة أو أي حالة قابلة للتغيير في هذه العملية الحسابية.
اختيار الكسر وفهم الاستجابة
اضبطوا t على 0 للحصول على لون البداية، أو على 1 للحصول على لون النهاية، أو على عدد عشري بينهما لحساب نقطة وسطية. تنقل القيمة 0.25 كل مكوّن HSL مستوفى ربع المسافة، بينما تختار 0.5 نقطة المنتصف. تكرر الاستجابة لوني الطرفين بعد التطبيع والكسر الدقيق، ثم تقدم hex وكائن rgb ذي القنوات الصحيحة r وg وb وكائن hsl تكون فيه h بالدرجات وتكون s وl بالنسب المئوية. يكشف الحقل hue_delta المسار الزاوي الكامل ذا الإشارة الذي اختير قبل ضربه في t. أما الحقل المصاحب hue_path فقيمته increasing أو decreasing أو none، وهو مفيد لتشخيص التدرجات التي تعبر درجة الصفر أو لإعادة إنتاج المسار في محرّك عرض آخر. تأخذ الأطراف الرمادية اللون التقليدي المحسوب وهو صفر، لأن لون RGB اللالوني لا يملك لونا مرئيا محددا. يبقى الاستيفاء حتميا في هذه الحالة، لكن إضافة التشبع بين الرمادي وطرف ملون قد تكشف القيمة التقليدية المستعملة للرمادي. أرسلوا t كعدد JSON لا كنص بين علامتي اقتباس.
الاستخدام الآمن في التصميم والإنتاج
تلائم هذه العملية كل نظام يحتاج إلى لون قابل لإعادة الإنتاج بين محطتين معلومتين. يستطيع منشئ السمات توليد رموز لحالات المرور أو الضغط أو الانتقال من دون تضمين مكتبة ألوان. ويمكن لخدمة رسوم بيانية طلب عينات متساوية التباعد باستدعاء القدرة بكسور مثل 0 و0.25 و0.5 و0.75 و1. كما يستطيع مسار الرسوم المتحركة حساب إطارات مفتاحية لا يعبر لونها بصورة غير متوقعة القوس الطويل عبر الأخضر أو الأزرق. تفيد العملية أيضا في اختبارات الانحدار لأن الإدخال المطبّع والتقريب المحدود يسهّلان المقارنة. لا يقبل هذا endpoint عمدا إلا ألوان RGB السداسية؛ فقنوات ألفا وأسماء ألوان CSS وسلاسل rgb() وسلاسل HSL ومساحات الألوان واسعة النطاق تقع خارج العقد. تفشل في التحقق الأطوال غير الصحيحة والمحارف غير السداسية والحقول المفقودة والكسور غير المنتهية والقيم الواقعة خارج النطاق. تبلغ تكلفة تنفيذ API ناجح $0.002 لكل عنصر، ويستخدم المتصفح المحرك النقي نفسه. ليس استيفاء HSL متساويا إدراكيا، لذا اختاروا أداة قائمة على LAB عندما تكون الخطوات المتساوية بصريا أهم من سلوك اللون المألوف في CSS.
حالات الاستخدام
إنشاء حالات السمات
أنشئوا ألوانا وسطية حتمية لرموز المرور والتركيز والتنشيط والاختيار.
بناء عينات تدرج مدمجة
قيّموا سلسلة من الكسور لإنتاج محطات HSL تتبع قوس اللون الأقصر.
إنشاء إطارات متحركة مفتاحية
احسبوا ألوانا ثابتة من دون دورات طويلة عرضية حول دائرة الألوان.
الأسئلة الشائعة
ماذا تعني t؟
تمثل t كسر الاستيفاء: يعيد 0 اللون الأول، ويعيد 1 اللون الثاني، وتنتج القيم بينهما ألوانا وسطية.
كيف يُختار اتجاه اللون؟
يتبع اللون أقصر فرق دائري. إذا بلغ الاتجاهان 180 درجة تماما، يُختار الاتجاه المتناقص بصورة ثابتة.
ما تنسيقات الألوان المقبولة؟
يقبل الإدخال لون RGB سداسيا من 3 أو 6 خانات مع علامة شباك اختيارية. وتُرفض ألفا والأسماء ودوال CSS.
لماذا يختلف مزج HSL عن مزج RGB؟
يستوفي HSL اللون والتشبع والإضاءة، بينما يحسب RGB متوسط شدة القنوات، ولذلك تسلك الألوان الوسطية مسارات مختلفة.
ما تكلفة استدعاء API؟
تبلغ تكلفة استدعاء API ناجح $0.002 لكل عنصر. ويمكن تشغيل المحرك الحتمي نفسه في المتصفح.
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/color/interpolate-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color1":"#ff0000","color2":"#0000ff","t":0.5}'const res = await fetch("https://api.kit.forhosting.com/color/interpolate-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color1": "#ff0000",
"color2": "#0000ff",
"t": 0.5
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/interpolate-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color1": "#ff0000",
"color2": "#0000ff",
"t": 0.5
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/interpolate-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color1":"#ff0000","color2":"#0000ff","t":0.5}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color1":"#ff0000","color2":"#0000ff","t":0.5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/interpolate-hsl", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"color1": "#ff0000",
"color2": "#0000ff",
"t": 0.5
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.interpolate_hsl",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |