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

OKLCH إلى سلسلة CSS

الإضاءة 0.7 والكروما 0.15 والصبغة 180 تصبح oklch(0.7000 0.1500 180.00)، أو oklch(70.0000% 0.1500 180.00) إن فضّلتم النسب المئوية. فتُكتب كل رموزكم وملفات الأنماط بالطريقة نفسها وبالمنازل العشرية نفسها. مجانًا في متصفحكم.

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

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

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

مثال محلول

إذا أدخلت

L: 0.7
C: 0.15
H: 180

تحصل على

L المقرّب: 0.7
C المقرّب: 0.15
H المقرّب: 180
المنازل العشرية لـ L: 4

OKLCH هو فضاء اللون الإدراكي وراء وحدة CSS Color Module Level 4 الحديثة، إذ يتيح للمصممين ضبط الإضاءة والصفاء والصبغة بشكل مستقل بينما يُجري المتصفح تعيين النطاق اللوني للقيم خارج المدى. تحتاج أنظمة التصميم وأنابيب الرموز ومولّدات التوثيق إلى طريقة حتمية لتحويل مكوّنات OKLCH الرقمية إلى سلسلة دالة oklch() جاهزة للصق تُتحقَّق بالطريقة نفسها في كل بيئة. تقبل هذه القدرة إضاءة في الفترة الوحدوية وصفاءً غير سالب وصبغة بالدرجات وقناة ألفا اختيارية، ثم تقرّب كل مكوّن إلى منازل عشرية ثابتة وتُصدر شكل الإضاءة الوحدوية وشكل الإضاءة بالنسبة المئوية لدالة CSS.

ما هو OKLCH ولماذا تهم سلسلة CSS من oklch()

يفصل OKLCH اللون إلى ثلاثة محاور ذات معنى إدراكي: L للإضاءة من الأسود إلى الأبيض على مقياس شبه منتظم، وC للصفاء (مدى تلون العينة؛ الصفر يعني لوناً عديم الصبغة تماماً)، وH لزاوية الصبغة بالدرجات حول عجلة الألوان. بخلاف HSL التقليدي، تميل خطوات الإضاءة المتساوية في OKLCH إلى الظهور أكثر اتساقاً للعين البشرية، ولهذا تخزّن أنظمة التصميم التي تهاجر من hex وHSL منحدرات العلامة غالباً في OKLCH أولاً.

تعرّض وحدة CSS Color Module Level 4 هذا الفضاء مباشرة عبر الدالة oklch()، فيمكن لورقة أنماط أن تعلن oklch(0.72 0.14 250) أو الشكل النسبي المكافئ oklch(72% 0.14 250) دون تحويل sRGB وسيط يقصّ النطاق مبكراً. تستخدم الشفافية الاختيارية صيغة الشَرطة المائلة الحديثة oklch(L C H / A) بما يوافق دوال لون CSS الأخرى. يوحّد هذا الطرف ذلك العقد: التحقق من النطاقات والتقريب بدقة ثابتة وإرجاع شكلي CSS للإضاءة الوحدوية والنسبية ليختار المستهلك أسلوب المؤسسة دون إعادة تنفيذ قواعد التنسيق.

عقد الإدخال وقواعد التقريب وشكل الاستجابة

يفعّل الألفا الاختياري بين صفر وواحد الشفافية بشرطة مائلة في السلسلة المُصدَرة. لا تُفوتر إخفاقات التحقق تلك. مثال: l يساوي 0.7 وc يساوي 0.15 وh يساوي 180 ينتج oklch(0.7000 0.1500 180.00) وoklch(70.0000% 0.1500 180.00).

مع ألفا 0.5 يظهر شكل الشَرطة: oklch(0.7000 0.1500 180.00 / 0.5000). لا تُلف الصبغة إلى الفترة من صفر إلى ثلاثمئة وستين حتى تبقى الزوايا متعددة اللفات أو السالبة المقصودة في CSS الذي يقبل أي نوع زاوية. اقرنوا هذا المنسّق بمحوّل منفصل إن احتجتم hex أو sRGB؛ هذه القدرة تتحقق من OKLCH وتسلسله لـ CSS فقط.

أين يقدّم منسّق OKLCH إلى CSS قيمة حقيقية

تحوّل مستودعات رموز التصميم وأنابيب style-dictionary كائنات لون منظَّمة إلى خصائص CSS مخصصة؛ يحافظ منسّق مشترك على كل حزمة في المستودع الأحادي ضمن قواعد oklch() نفسها بدلاً من قوالب مرتجلة. تستطيع مكتبات المكوّنات وتوثيق Storybook عرض عيّنات حية تقودها عناصر تحكم رقمية لـ L وC وH مع نسخ حقل css الدقيق إلى المقتطفات. تحتاج أدوات الإتاحة والسمات التي تولّد منحدرات فاتحة وداكنة في OKLCH إلى خطوة أخيرة لا تخترع CSS غير قانوني أبداً.

تستفيد مواقع التسويق التي تتنافس على عبارات مثل OKLCH إلى سلسلة CSS أو منسّق oklch من ودجة مجانية في المتصفح تطابق نتيجتها مسار الأتمتة المدفوع بايتًا بايتًا. لا يستهلك فشل التحقق الرصيد.

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

توثيق Storybook والمكوّنات

حرّكوا عناصر L وC وH في عرض حي وانسخوا حقل css الدقيق إلى مقتطفات شيفرة تطابق أوراق أنماط الإنتاج.

مولّدات السمات والمنحدرات

بعد حساب خطوات OKLCH للوضعين الفاتح والداكن، نسّقوا كل توقف كـ oklch() صالح من CSS Color Level 4 مع ألفا اختياري بشرطة مائلة للأسطح الشفافة.

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

كيف أنسّق OKLCH كسلسلة CSS من oklch()؟

أرسلوا أعداداً منتهية l في [0,1] وc ≥ 0 وh بالدرجات. يضيف الألفا الاختياري شفافية بشرطة مائلة.

ما النطاقات الصالحة لـ L وC وH والألفا؟

يجب أن تكون الإضاءة في [0, 1] والصفاء غير سالب والصبغة أي زاوية منتهية بالدرجات والألفا (إن أُرسل) في [0, 1].

كيف يُتحكَّم بالتقريب؟

الافتراضي أربع منازل لـ L وC واثنتان لـ H.

هل تحوّل الأداة OKLCH إلى hex أو RGB؟

لا. تتحقق من OKLCH وتنسّقه فقط إلى سلاسل CSS oklch() حديثة. استخدموا قدرة تحويل لون منفصلة إن احتجتم قنوات sRGB أو hex.

كيف أضيف الشفافية إلى لون oklch()؟

حدّدوا قيمة عتامة بين 0 و1 فتُكتب بعد شرطة مائلة. مع إضاءة 0.7 وكروما 0.15 وصبغة 180 وعتامة 0.5 تحصلون على oklch(0.7000 0.1500 180.00 / 0.5000).

أدوات ذات صلة

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

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

الـEndpoint

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

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

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

curl -X POST https://api.kit.forhosting.com/color/oklch-to-css \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"l":0.7,"c":0.15,"h":180}'

const res = await fetch("https://api.kit.forhosting.com/color/oklch-to-css", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "l": 0.7,
    "c": 0.15,
    "h": 180
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/oklch-to-css",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "l": 0.7,
    "c": 0.15,
    "h": 180
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/oklch-to-css", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"l":0.7,"c":0.15,"h":180}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"l":0.7,"c":0.15,"h":180}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/oklch-to-css", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

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

{
  "l": 0.7,
  "c": 0.15,
  "h": 180
}

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

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

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

تفشل النطاقات غير الصالحة بـ invalid_input بدلاً من إنتاج هراء صامت. المنطق النقي نفسه يشغّل ودجة المتصفح المجانية ومسار API، فلا تختلف جسور Figma إلى الشيفرة أو إضافات Storybook أو عمال الحافة في المسافات أو التقريب أو صيغة الألفا بالشرطة المائلة.

ما هو OKLCH ولماذا تهم سلسلة CSS من oklch()

يجب إذن أن تُنتج الأدوات التي تبني رموزاً أو JSON للسمة أو CSS مولَّداً سلسلة ثابتة بايتًا بايتًا: القيم نفسها لـ L وC وH تعطي دائماً المنازل العشرية والمسافات والأقواس نفسها.

عقد الإدخال وقواعد التقريب وشكل الاستجابة

أرسلوا جسم JSON يتضمن الأعداد المنتهية الإلزامية l (إضاءة في الفترة المغلقة من صفر إلى واحد) وc (صفاء أكبر من أو يساوي صفراً) وh (صبغة بالدرجات، أي زاوية منتهية). تستبدل الأعداد الصحيحة الاختيارية l_decimals وc_decimals وh_decimals (كل منها من صفر إلى عشرة) الافتراضيات أربعة وأربعة واثنين من المنازل العشرية على التوالي؛ ويُطبع الألفا عند وجوده دائماً بأربع منازل. قد يصل كل حقل كعدد JSON أو كسلسلة رقمية؛ تفشل الحقول الناقصة والقيم غير المنتهية والمنطقيات وL أو الألفا خارج المدى بـ invalid_input مع تسمية الحقل، ويُرفض الصفاء السالب بالطريقة نفسها. عند النجاح يعيد الجسم المكوّنات الخام والمكوّنات المقرّبة وميزانيات المنازل المستخدمة وhas_alpha وحقل css بسلسلة oklch() ذات الإضاءة الوحدوية وحقل css_percent حيث تُكتب L كنسبة مئوية بنفس الدقة، إضافة إلى سلاسل method وformula وmessage لواجهة المستخدم.

أين يقدّم منسّق OKLCH إلى CSS قيمة حقيقية

ولأن التنفيذ parse نقي من المستوى A، تكلف كل مكالمة ناجحة السعر الأساسي المنشور $0.002 دون رموز نموذج ودون شبكة صادرة. حافظوا على الطلبات صغيرة وثبّتوا سلسلتي css وcss_percent في الاختبارات لتحصلوا على حروف لون CSS حديثة قابلة لإعادة الإنتاج لأنظمة التصميم وعمال الحافة ومولّدات التوثيق دون إقامة مكتبة كاملة لعلم الألوان من أجل مهمة تنسيق.

حالات التكامل

أنابيب رموز التصميم ومتغيرات CSS

سلسلوا منحدرات علامة OKLCH إلى خصائص مخصصة oklch() مستقرة لـ style-dictionary أو Theo أو JSON سمة يدوي دون انحراف سلاسل الفاصلة العائمة بين آلات CI.

أسئلة تقنية

كم تكلفة أداة OKLCH إلى سلسلة CSS؟

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

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

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

مثال محلول

ما هو OKLCH ولماذا تهم سلسلة CSS من oklch()

عقد الإدخال وقواعد التقريب وشكل الاستجابة

أين يقدّم منسّق OKLCH إلى CSS قيمة حقيقية

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

توثيق Storybook والمكوّنات

مولّدات السمات والمنحدرات

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

أدوات ذات صلة

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

الـEndpoint

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

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

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

الأسعار

الأخطاء

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

ما هو OKLCH ولماذا تهم سلسلة CSS من oklch()

عقد الإدخال وقواعد التقريب وشكل الاستجابة

أين يقدّم منسّق OKLCH إلى CSS قيمة حقيقية

حالات التكامل

أنابيب رموز التصميم ومتغيرات CSS

أسئلة تقنية

شكرًا