محول HWB إلى HSL
الصبغة 210 مع بياض 20% وسواد 10% تصبح hsl(210 77.78% 55%)، مع بقاء الصبغة كما أدخلتموها تمامًا. انقلوا ألوان التصميم من HWB إلى HSL دون تخمين. مجانًا في متصفحكم.
- مجاني
- يعمل في متصفحك
- دون تسجيل
- بياناتك لا تغادر جهازك
شغّل الأداة مجانًا
مثال محلول
- Hue
- 210
- البياض
- 20
- السواد
- 10
- H
- 210
- S
- 77.7778
- L
- 55
- التشبع
- 77.7778
يحوّل محول HWB إلى HSL زاوية درجة اللون ونسبتي البياض والسواد إلى درجة اللون والتشبع والإضاءة، من دون الاعتماد على محلل ألوان في المتصفح أو خدمة خارجية. وهو يحافظ على الزاوية بعد تطبيعها، ويتحقق من كل مكوّن، ويطبق قاعدة تطبيع HWB القياسية عندما يتجاوز مجموع البياض والسواد مئة بالمئة. تتضمن النتيجة حقول HSL رقمية وكائنًا متداخلًا وسلسلة CSS جاهزة للاستخدام.
أدخل لون HWB كاملًا وافهم قواعد التحقق
تُقاس درجة اللون بالدرجات، ويجوز أن تكون أي زاوية منتهية موجبة أو سالبة؛ إذ يعيدها المحول إلى النطاق المعتاد من صفر شاملًا إلى ثلاثمئة وستين غير شاملة، فتتحول سالب ثلاثين إلى ثلاثمئة وثلاثين، وتتحول أربعمئة وعشرون إلى ستين. البياض والسواد نسبتان مئويتان، ويجب أن تقع كل منهما بين صفر ومئة شاملين. تُقبل كذلك الأسماء المختصرة h وw وb للعملاء الذين يخزنون سجلات HWB موجزة.
تُقبل السلاسل الرقمية إذا لم تتضمن سوى صيغة عشرية أو أسية صحيحة، مما يدعم العملاء المعتمدين على النماذج من دون إضعاف التحقق. يفيد هذا الحد الصارم في مسارات المعالجة لأنه يوقف بيانات المصدر الخاطئة عند خطوة التحويل قبل أن تبدو كأنها قيمة لون معقولة. تكرر الاستجابة نسب المصدر التي تم التحقق منها، مما يسهل تدقيق السجلات وبيانات الاختبار إلى جانب قيم HSL المشتقة.
كيف يتحول البياض والسواد إلى HSL
يصف HWB اللون بأنه درجة لون نقية ممزوجة بالأبيض والأسود. بعد تحويل النسبتين إلى كسرين، يفحص المحول مجموعهما. إذا كان المجموع واحدًا أو أقل، يكون الجزء المتبقي هو صفاء اللون: واحد ناقص البياض ناقص السواد.
تساوي إضاءة HSL واحدًا زائد البياض ناقص السواد، ثم تُقسم النتيجة على اثنين. ويساوي التشبع صفاء اللون مقسومًا على واحد ناقص القيمة المطلقة لحاصل ضعفي الإضاءة ناقص واحد، باستثناء حدود الأسود والأبيض واللون اللالوني حيث يكون التشبع صفرًا. إذا تجاوز مجموع البياض والسواد مئة بالمئة، تطبع قواعد ألوان CSS النسبتين بقسمة كل منهما على مجموعهما.
مع ذلك، تحتفظ درجة اللون المعادة بزاوية الإدخال بعد ضبطها حتى عندما يكون التشبع صفرًا. يحافظ ذلك على ثبات التحويلات العكسية وبيانات لوحة الألوان والمقارنات الحتمية، رغم أن الرمادي المرئي لا يملك درجة لون محسوسة. تُقرب كل النتائج الرقمية المنشورة إلى أربع منازل عشرية لمنع ضوضاء الفاصلة العائمة في اللقطات الاختبارية.
استخدم المخرجات في CSS وأنظمة التصميم والاختبارات الآلية
تعرض الاستجابة الناجحة الحقول h وs وl، حيث تكون درجة اللون بالدرجات والتشبع والإضاءة بالنسبة المئوية. استخدم مشغل المتصفح المجاني لأعمال لوحات الألوان الفردية وأمثلة التوثيق والفحوص التعليمية. لأن التنفيذ لا يتكون إلا من حساب محدود، فإن الإدخال نفسه ينتج دائمًا المخرج نفسه؛ فلا توجد شبكة أو عشوائية أو ساعة نظام أو محلل يعتمد على الإعدادات المحلية أو ملف ألوان خفي.
يعالج هذا المحول HWB إلى HSL فقط. يكون المحول متعدد الصيغ أنسب عند اكتشاف مدخلات HEX أو RGB أو LAB أو CMYK عشوائية، بينما يوفر هذا الطرف المتخصص تحققًا دقيقًا ودلالات تطبيع واضحة لمسارات HWB.
حالات الاستخدام
رحّل رموز ألوان CSS
حوّل رموز تصميم HWB إلى مكونات HSL رقمية وسلسلة CSS، مع الاحتفاظ بدرجة اللون والمزيج الأصليين للمراجعة.
طبّع لوحات الألوان المولدة
عالج مجاميع البياض والسواد المولدة برمجيًا التي تتجاوز مئة بالمئة بقيم فعلية صريحة، من دون مفاجآت تعتمد على المتصفح.
أنشئ بيانات اختبار ألوان ثابتة
استخدم مخرجات HSL المقربة والحتمية في اختبارات الوحدات والأدوات التعليمية وفحوص المطابقة بين لغات البرمجة.
الأسئلة الشائعة
ما الوحدات التي يقبلها المحول؟
درجة اللون زاوية بالدرجات. البياض والسواد نسبتان مئويتان من 0 إلى 100 شاملين، وليسا كسرين من 0 إلى 1.
ماذا يحدث إذا تجاوز مجموع البياض والسواد 100%؟
تُطبع القيمتان تناسبيًا بقسمتهما على مجموعهما وفق قواعد HWB. تكون النتيجة لا لونية، وتكون normalized بالقيمة true، وتُعاد النسب الفعلية.
هل تُحفظ درجة اللون عندما تكون النتيجة رمادية؟
نعم. تُضبط درجة لون الإدخال إلى النطاق 0–360 وتُعاد حتى عندما يكون التشبع صفرًا، للحفاظ على البيانات الوصفية بصورة حتمية.
هل يمكن استخدام الحقول h وw وb؟
تتقدم الأسماء القياسية الطويلة إذا قُدمت الصيغتان معًا.
كيف أحوّل الصبغة 210 مع بياض 20% وسواد 10% إلى HSL؟
النتيجة hsl(210 77.78% 55%). ما يتبقى بعد طرح البياض والسواد هو اللون الخالص، والإضاءة تساوي واحدًا زائد البياض ناقص السواد مقسومًا على اثنين، أي 55%.
أدوات ذات صلة
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/color/hwb-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":210,"whiteness":20,"blackness":10}'const res = await fetch("https://api.kit.forhosting.com/color/hwb-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 210,
"whiteness": 20,
"blackness": 10
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hwb-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 210,
"whiteness": 20,
"blackness": 10
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hwb-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":210,"whiteness":20,"blackness":10}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":210,"whiteness":20,"blackness":10}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hwb-hsl", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"hue": 210,
"whiteness": 20,
"blackness": 10
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hwb_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 لكل عنصر ناجح.
أدخل لون HWB كاملًا وافهم قواعد التحقق
قدّم hue وwhiteness وblackness في صورة أعداد منتهية. تؤدي القيم المفقودة والنصوص غير الرقمية والقيم اللانهائية والنسب الواقعة خارج النطاق إلى invalid_input بدل تخمينها أو قصها بصمت.
كيف يتحول البياض والسواد إلى HSL
لا يبقى مكوّن لوني، فتكون النتيجة رمادية؛ ويعرض effective_whiteness وeffective_blackness المزيج بعد التطبيع، وتكون normalized بالقيمة true.
استخدم المخرجات في CSS وأنظمة التصميم والاختبارات الآلية
كما توفر الأسماء الطويلة hue وsaturation وlightness، وكائن hsl متداخلًا، وhsl_css للاستخدام المباشر في ورقة أنماط أو خاصية مخصصة. تظل نسبتا البياض والسواد الأصليتان ظاهرتين، بينما يميز effective_whiteness وeffective_blackness مزيج HWB الزائد الذي احتاج إلى التطبيع. واستخدم API بسعر $0.002 لكل عنصر ناجح عندما يحتاج مترجم رموز التصميم أو مولد السمات أو برنامج الترحيل أو مهمة التكامل المستمر إلى عقد JSON الثابت نفسه.
أسئلة تقنية
ما تكلفة التحويل عبر API؟
يكلف كل عنصر API ناجح $0.002. مشغل المتصفح مجاني، وتُعاد حالات فشل التحقق بصيغة invalid_input.