ForHosting KIT · تحرير الصور وتحليلها

تحليل سلسلة HSL إلى RGB

اقرأ لون CSS الملصوق كأرقام: يصبح hsl(210, 80%, 45%) أحمر 23 وأخضر 115 وأزرق 207، أي #1773cf، سواء استخدمت الفواصل أو المسافات أو وحدات مثل deg وturn. مجاناً في متصفحك.

مجاني
يعمل في متصفحك
دون تسجيل
بياناتك لا تغادر جهازك

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

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

مثال محلول

إذا أدخلت

Hsl: hsl(210, 80%, 45%)

تحصل على

H: 210
S: 80
L: 45
المقاومة (Ω): 23

يلصق المصممون والمهندسون حرفيّات CSS من hsl() وhsla() من أوراق الأنماط ورموز Figma وأدوات DevTools في المتصفح، ثم يحتاجون ثلاثيًا ثابتًا من الأحمر والأخضر والأزرق للوحات الرسم والتطبيقات الأصلية ووسائط الصور. يقبل هذا المحلّل سلسلة لون CSS واحدة، ويتسامح مع المسافات الزائدة ووحدات التدرج الاختيارية مثل deg وturn وrad وgrad وعلامات النسبة المئوية الاختيارية على التشبع والإضاءة، ثم يحوّل التدرج والتشبع والإضاءة المحلَّلة عبر مسار وحدة ألوان CSS نفسه الذي تستخدمه المتصفحات عند رسم hsl(). يلتف التدرج كما تلتف الزوايا في CSS؛ ويُرفض التشبع والإضاءة خارج صفر إلى مئة بالمئة حتى لا يتحول خطأ مطبعي إلى أبيض في صمت.

كيف تصبح سلسلة CSS من hsl() ثلاثي RGB

يسمّي لون CSS بصيغة hsl() نقطة في إحداثيات أسطوانية: التدرج زاوية حول العجلة، والتشبع مدى ابتعاد اللون عن الرمادي، والإضاءة مدى قربه من الأسود أو الأبيض. تحلّل هذه القدرة رمز الدالة أولًا. تقبل الصيغة التاريخية بالفواصل hsl(h, s, l) والصيغة الحديثة المفصولة بمسافات hsl(h s l)، مع حرف a في hsla أو بدونه، ومع ألفا اختياري بعد فاصلة رابعة أو بعد خط مائل.

قد يكون التدرج عددًا مجردًا بالدرجات أو يحمل وحدة صريحة: deg أو turn أو rad أو grad. يجوز أن يتضمن التشبع والإضاءة علامة النسبة المئوية أو يحذفاها؛ ويُقرآن كنسب مئوية من صفر إلى مئة. بعد فهم الرمز يتبع التحويل وحدة ألوان CSS ومسار W3C عبر hue2rgb: تُقاس التشبع والإضاءة إلى الفترة الوحدوية، وتُحسب الحدود الوسيطة p وq، وتُؤخذ ثلاث مواضع مزاحمة على الدائرة الوحدوية، ثم يُضرب الناتج بمئتين وخمسة وخمسين ويُقرَّب إلى أعداد صحيحة.

عندما يكون التشبع صفرًا تنهار القنوات الثلاث إلى الرمادي نفسه. المسار حساب خالص بلا ساعات وبلا شبكة، لذا تعطي السلسلة نفسها دائمًا الثلاثي نفسه.

عقد الإدخال والوحدات والمسافات وسلوك الأخطاء

يجب أن تكون القيمة دالة CSS من hsl() أو hsla() بما في ذلك الأقواس؛ ويُرفض ثلاثي أعداد مجرد حتى يبقى العقد محلّل سلاسل لا شكل HSL عدديًا ثانيًا. تُتجاهل المسافات الزائدة داخل الأقواس. يفشل التشبع والإضاءة خارج صفر إلى مئة بالمئة أيضًا بدل القص، حتى لا يتحول خطأ مثل خمسمئة بالمئة إلى أبيض في صمت.

يلتف التدرج مقياسًا لثلاثمئة وستين بعد تحويل الوحدة، مطابقًا CSS، لذا ترسم أربعمئة وثمانون درجة ومئة وعشرون درجة الأخضر نفسه. عند النجاح يعيد الجسم سلسلة الإدخال بعد التشذيب، وh وs وl العددية المحلَّلة (التدرج بالدرجات بعد الالتفاف، والتشبع والإضاءة كنسب مئوية)، وقنوات صحيحة r وg وb، ومصفوفة ثلاثي rgb، وسلسلة rgb() قابلة للطباعة، ورمز hex بأحرف صغيرة، وملاحظة صيغة قصيرة. عندما تضمّنت سلسلة المصدر مكوّن ألفا تتضمن الاستجابة أيضًا a في الفترة الوحدوية وسلسلة rgba()؛ وإن غاب الألفا تُحذف تلك المفاتيح بدل تعيينها إلى null.

مثال: hsl(210, 80%, 45%) يعطي قنوات الأزرق العميق نفسها التي يعيدها محول HSL عددي لتدرج مئتين وعشرة وتشبع ثمانين وإضاءة خمس وأربعين.

أين يستحق تحليل سلسلة hsl() مكانه

تلصق فرق الواجهة الأمامية حرفيّات hsl() من ملف سمة وتحتاج RGB لملء لوحة أو لون أصلي أو مثبت لقطة. تخزّن خطوط رموز التصميم منحدرات العلامة دوال CSS لتبقى مقروءة بجانب أوراق الأنماط، ثم تُصدر قنوات صحيحة لـ UIColor في iOS وAndroid Color وhex البريد. تقارن أدوات الانحدار البصري بكسلات معروضة؛ وتحليل حتمي لنفس سلسلة hsl() المستخدمة في CSS هو السبيل الوحيد لمعرفة الثلاثي ثماني البتات المتوقع دون فتح متصفح.

تطبع مولّدات التوثيق جدول عيّنات من رموز المستودع ويجب ألا تخترع أخضر مختلفًا عما ينشره الموقع. تحتاج المواد التعليمية التي تعرض دوال لون CSS بجانب RGB وhex مرجعًا يبلّغ عن النحو المعطوب بدل أن يستدرك علامة نسبة مئوية ناقصة بالتخمين. تستطيع سكربتات ضمان الجودة أن تسير في ورقة أنماط وتستخرج كل رمز hsl() وتؤكّد أن مثبت RGB ما زال يطابق لقطة الأسبوع الماضي.

إن كان لديكم ثلاثة أرقام أصلًا لا سلسلة CSS، فاستخدموا محول HSL إلى RGB العددي؛ وتملك هذه الصفحة نية البحث عن تحليل سلسلة hsl() إلى ثلاثي RGB.

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

من رموز ورقة الأنماط إلى RGB اللوحة والأصلي

الصقوا حرفيّات hsl() من ملف سمة أو DevTools واحصلوا على r وg وb صحيحة مع hex لملء اللوحات وUIColor وAndroid Color.

خطوط رموز التصميم والتوثيق

سيروا في رموز دوال CSS بمستودع نظام تصميم وأصدروا جدول ثلاثيات RGB ثابتًا يطابق رسم hsl() في المتصفح.

مثبتات الانحدار البصري

حوّلوا سلاسل hsl() نفسها التي ينشرها CSS إلى مثبتات RGB بثمانية بتات حتى تقارن اختبارات اللقطات اللون الذي سيرسمه المتصفح فعلًا.

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

أي صيغ CSS من hsl() يقبلها المحلّل؟

صيغة الفواصل hsl(h, s, l) والصيغة الحديثة بالمسافات hsl(h s l)، إضافة إلى hsla() وألفا اختياري (فاصلة رابعة أو خط مائل). تُتجاهل المسافات الزائدة. يجوز للتدرج استخدام deg أو turn أو rad أو grad.

كيف تُحوَّل hsl() إلى ثلاثي RGB؟

بعد تحليل السلسلة يتبع التحويل مسار hue2rgb لوحدة ألوان CSS على الدائرة الوحدوية. تُقرَّب القنوات إلى أعداد صحيحة 0–255. تعطي السلسلة نفسها دائمًا r وg وb نفسها.

ماذا يحدث إذا كانت سلسلة hsl() معطوبة النحو؟

تُرفض أسماء الدوال الخاطئة والأقواس الناقصة وعدد المكوّنات الخاطئ والنحو المختلط من الفواصل والخط المائل والرموز غير العددية ولا تُفوتر.

هل تلتف وحدات التدرج وهل يُقصّ التشبع والإضاءة؟

يلتف التدرج مقياسًا لـ 360 بعد تحويل الوحدة، مطابقًا CSS. يجب أن يقع التشبع والإضاءة بين 0 و100 بالمئة؛ وتفشل القيم خارج النطاق بدل القص إلى الأبيض أو الأسود.

هل يمكنني لصق لون مباشرة من ورقة أنماط أو من أدوات المطوّر؟

نعم. الصق نص hsl() أو hsla() كاملاً مع الأقواس، مثل hsl(210, 80%, 45%). تُتجاهَل المسافات الزائدة، لكن تُرفض ثلاثة أرقام منفردة من دون hsl().

أدوات ذات صلة

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

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

الـEndpoint

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

صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.

استدعِ الخدمة من بيئتك

curl -X POST https://api.kit.forhosting.com/color/hsl-string-to-rgb \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"hsl":"hsl(210, 80%, 45%)"}'

const res = await fetch("https://api.kit.forhosting.com/color/hsl-string-to-rgb", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "hsl": "hsl(210, 80%, 45%)"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/hsl-string-to-rgb",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "hsl": "hsl(210, 80%, 45%)"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-string-to-rgb", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"hsl":"hsl(210, 80%, 45%)"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"hsl":"hsl(210, 80%, 45%)"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-string-to-rgb", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

مثال على الطلب

{
  "hsl": "hsl(210, 80%, 45%)"
}

مثال على الاستجابة

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.hsl_string_to_rgb",
  "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`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

ملاحظات تقنية

يفشل النحو المعطوب — أقواس ناقصة أو اسم دالة خاطئ أو مكوّنات أقل من اللازم أو رموز غير عددية — بـ invalid_input بدل تخمين لون مجاور.

كيف تصبح سلسلة CSS من hsl() ثلاثي RGB

يكتب المؤلفون تلك النقطة كرمز دالة لا كثلاثة حقول نموذج منفصلة، لذا يترك المحول الذي لا يقبل إلا h وs وl العددية فجوة كلما كان مصدر الحقيقة ورقة أنماط أو ملف JSON لرموز التصميم أو نسخة من DevTools.

عقد الإدخال والوحدات والمسافات وسلوك الأخطاء

أرسلوا جسم JSON بطريقة POST بحقل سلسلة إلزامي واحد اسمه hsl. تُقبل الأسماء البديلة text وvalue وcolor وinput وتعني الشيء نفسه. غياب hsl أو سلسلة فارغة أو سلسلة أطول من مئتين وستة وخمسين حرفًا أو اسم دالة غير hsl أو hsla أو أقواس غير متوازنة أو عدد مكوّنات خاطئ أو نحو مختلط من الفواصل والخط المائل أو رموز ليست أعدادًا منتهية تفشل كلها بـ invalid_input ولا تُفوتر.

أين يستحق تحليل سلسلة hsl() مكانه

ولأن هذه القدرة محرك تحليل نقي، فأداة المتصفح مجانية وتكلفة استدعاء API الناجح هي $0.002 المنشور لكل عنصر؛ ولا تستهلك إخفاقات التحقق الرصيد المدفوع مقدمًا.

أسئلة تقنية

كم يكلف تحليل سلسلة hsl() إلى RGB؟

أداة المتصفح مجانية. تستخدم طلبات API رصيد KIT المدفوع مقدمًا بسعر $0.002 لكل استدعاء ناجح؛ ولا تُفوتر المدخلات غير الصالحة.

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

شغّل الأداة مجانًا

مثال محلول

كيف تصبح سلسلة CSS من hsl() ثلاثي RGB

عقد الإدخال والوحدات والمسافات وسلوك الأخطاء

أين يستحق تحليل سلسلة hsl() مكانه

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

من رموز ورقة الأنماط إلى RGB اللوحة والأصلي

خطوط رموز التصميم والتوثيق

مثبتات الانحدار البصري

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

أدوات ذات صلة

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

الـEndpoint

استدعِ الخدمة من بيئتك

مثال على الطلب

مثال على الاستجابة

الأسعار

الأخطاء

ملاحظات تقنية

كيف تصبح سلسلة CSS من hsl() ثلاثي RGB

عقد الإدخال والوحدات والمسافات وسلوك الأخطاء

أين يستحق تحليل سلسلة hsl() مكانه

أسئلة تقنية

شكرًا