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

Hex إلى متغير CSS

حوّل لوناً منفرداً إلى متغير CSS قابل لإعادة الاستخدام: يصبح #3366ff مع الاسم brand-primary السطرَ --brand-primary: #3366ff;، مع توسيع الصيغة المختصرة وكتابة الرمز بأحرف صغيرة. مجاناً في متصفحك.

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

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

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

مثال محلول

إذا أدخلت

Hex: #3366ff
الاسم: brand-primary

تحصل على

القيمة: #3366ff
Hex6: 3366ff
سداسي عشري خام: #3366ff
الاسم: --brand-primary

خاصية CSS المخصصة —وتُدعى أيضاً متغير CSS— رمز قابل لإعادة الاستخدام تعلنونه مرة وتراجعونه بـ var() في ورقة أنماط أو ملف سمة أو أنبوب رموز تصميم.

ما هي خاصية CSS المخصصة ولماذا تغليف لون hex

خصائص CSS المخصصة إعلانات CSS عادية تبدأ أسماؤها بشرطتين. يبقى hex صيغة التبادل التي ما تزال معظم أدوات الاختيار وملفات PDF للعلامة وملفات الرموز تصدّرها، لكن #3366ff خاماً ليس عقد ورقة أنماط: لا اسم له ولا بادئة -- ولا فاصلة منقوطة ختامية. تغليفه كإعلان معرّف بشرطات تحويل صغير ودقيق يفشل مع ذلك في الأنابيب — علامات شباك ناقصة، مزج أحرف كبيرة وصغيرة، اختصار ثلاثي غير موسَّع، أسماء تبدأ برقم، متغيرات Sass بالدولار ملصوقة بالعادة، أو غلاف var() حيث ينبغي المعرّف وحده.

كل خطأ من تلك ينتج CSS يبدو شبه صحيح ثم يفشل عند التحليل أو في مراجعة. خطوة مخصصة من hex إلى متغير CSS توحّد العقد: التحقق من اللون، والتحقق من الاسم، وتوسيع الاختصار، وجعل hex السداسي صغيراً، والحفاظ على حالة أحرف المعرّف، وإصدار مسافة بعد النقطتين وفاصلة منقوطة ختامية. النتيجة سطر تعريف جاهز للصق في :root أو صنف سمة أو tokens.css مولَّد دون إعادة اشتقاق القواعد في كل مستودع.

أين يقدّم منسّق hex إلى متغير CSS قيمة حقيقية

تحوّل مستودعات رموز التصميم وأنابيب Style Dictionary كائنات لوحة منظَّمة إلى خصائص CSS مخصصة؛ يحافظ منسّق مشترك على كل حزمة ضمن قواعد الإعلان نفسها بدل قوالب مرتجلة تختلف في حالة الشباك أو الاختصار أو المسافة بعد النقطتين. تستطيع مكتبات المكوّنات وتوثيق Storybook عرض منتقي لون وحقل اسم ونسخ declaration الدقيق إلى مقتطفات تطابق أوراق الإنتاج. تحتاج مولّدات السمات التي تُصدر كتل :root فاتحة وداكنة إلى خطوة أخيرة لا تخترع معرّفاً بشرطات غير قانوني ولا تسقط الفاصلة المنقوطة.

تستفيد صفحات التسويق التي تتنافس على hex إلى متغير css أو hex إلى خاصية CSS مخصصة من ودجة مجانية في المتصفح تطابق نتيجتها مسار الأتمتة بايتًا بايتًا. فضّلوا هذه القدرة عندما يكون لديكم سلفاً رمز hex واسم مختار وتحتاجون سطر التعريف فقط؛ فهي لا تحوّل hex إلى HSL ولا تحل ألوان CSS المسماة مثل rebeccapurple ولا تقبل hex ألفا بثمانية أرقام.

ثبّتوا سلسلة declaration في الاختبارات واحفظوا الأسماء بنمط kebab-case أو اصطلاح المؤسسة لتحصلوا على أسطر خاصية مخصصة قابلة لإعادة الإنتاج لأنظمة التصميم وعمال الحافة ومولّدات التوثيق دون إقامة مكتبة كاملة لعلم الألوان من أجل مهمة تغليف.

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

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

دعوا المؤلفين يختارون hex واسم رمز ثم ينسخون حقل declaration الدقيق إلى مقتطفات شيفرة تطابق كتلة :root في الإنتاج.

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

بعد حساب منحدر hex فاتح أو داكن، غلّفوا كل توقف كخاصية CSS مخصصة مسماة ليكون ملف السمة CSS صالحاً من أول إصدار.

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

كيف أغلّف لون hex كخاصية CSS مخصصة؟

أرسلوا hex (3 أو 6 أرقام، # اختياري) وname (مع -- أو بدونه).

هل يحتاج الاسم إلى -- بادئة؟

لا. يصبح brand-primary و--brand-primary كليهما --brand-primary. تُحفظ حالة الأحرف.

أي صيغ hex مقبولة؟

ألوان ست عشرية بثلاثة أرقام (#RGB) وستة أرقام (#RRGGBB)، مع # بادئة أو بدونها. يوسَّع الاختصار. لا تُقبل صيغ الألفا (#RGBA و#RRGGBBAA) ولا ألوان CSS المسماة.

كيف يبدو سطر التعريف؟

دائماً --<ident>: #<ستة أرقام hex صغيرة>; بمسافة واحدة بعد النقطتين وفاصلة منقوطة ختامية. مثال: --brand-primary: #3366ff;.

ما أسماء المتغيرات المرفوضة؟

يجب أن يبدأ الاسم بحرف أو بشرطة سفلية، ويجوز أن تسبقه شرطة واحدة، وألا يحتوي إلا على حروف وأرقام وشرطات وشرطات سفلية. ويُرفض الاسم الذي يبدأ برقم أو متغير Sass بعلامة $ بدلاً من إنتاج CSS معطوب.

أدوات ذات صلة

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

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

الـEndpoint

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

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

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

curl -X POST https://api.kit.forhosting.com/color/hex-to-css-var \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"hex":"#3366ff","name":"brand-primary"}'

const res = await fetch("https://api.kit.forhosting.com/color/hex-to-css-var", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "hex": "#3366ff",
    "name": "brand-primary"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/hex-to-css-var",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "hex": "#3366ff",
    "name": "brand-primary"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hex-to-css-var", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"hex":"#3366ff","name":"brand-primary"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"hex":"#3366ff","name":"brand-primary"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hex-to-css-var", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

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

{
  "hex": "#3366ff",
  "name": "brand-primary"
}

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

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.hex_to_css_var",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

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

الحدود

max_name_len 64

الأخطاء

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

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

ما تزال الفرق تخزّن ألوان العلامة كرموز hex في Figma وملفات PDF للعلامة ولوحات JSON، ثم تحتاج سطراً حتمياً واحداً للصق في :root أو كتلة سمة. تغلف هذه الأداة لون hex متحقَّقاً منه في إعلان خاصية مخصصة مسماة: تختارون اسم المتغير، ويعيد المحلّل تطبيع hex إلى ستة أرقام صغيرة مع علامة الشباك، ويتحقق من أن الاسم معرّف بشرطات قانوني، ويعيد سطر التعريف --name: #rrggbb;. تفشل رموز hex غير الصالحة والمعرّفات غير القانونية بـ invalid_input بدل إصدار CSS لن يُحلَّل. المنطق النقي نفسه يعمل مجاناً في المتصفح وعلى API، فلا تنحرف الرموز المولَّدة بين المعاينات المحلية والتكامل المستمر وأوراق الإنتاج.

ما هي خاصية CSS المخصصة ولماذا تغليف لون hex

تكتبون --brand-primary: #3366ff; على :root أو أي محدِّد، ثم تستهلكون الرمز بـ color: var(--brand-primary) على الأزرار والروابط والسطوح. ذلك المصدر الواحد للحقيقة هو كيف تبقي أنظمة التصميم hex من Figma ولوحة JSON وورقة إنتاج متفقة دون ملاحقة عشرات الحرفيات المضمَّنة.

عقد الإدخال وقواعد التحقق وسطر التعريف

تُقصّ المسافات المحيطة. عند النجاح يُعاد hex دائماً مثل #rrggbb صغير، ويوسَّع اختصار الثلاثة أرقام (#abc يصبح #aabbcc)، ويُعاد الاسم ببادئة -- مع الإبقاء على حالة الأحرف الأصلية. الحقل الرئيس declaration هو سطر التعريف نفسه: --brand-primary: #3366ff;. أرسلوا جسم JSON بسلسلتين إلزاميتين. hex هو اللون: ثلاثة أو ستة أرقام ست عشرية، علامة شباك بادئة اختيارية، أحرف كبيرة أو صغيرة. تقبل الأسماء البديلة color وvalue وtext وinput وcode المحلّل نفسه. name هو معرّف الخاصية المخصصة، مع -- بادئة أو بدونها؛ تشمل البدائل variable وvar وvar_name وcustom_property وident. تُقسم السلسلة نفسها إلى variable وvalue لجداول الرموز، ويغلّف root_block السطر مثل :root { --brand-primary: #3366ff; } لبذرة ورقة بلصقة واحدة. القنوات الصحيحة r وg وb والأعلام shorthand وhad_hash وhad_prefix تصف الشكل الأصلي. فشل التحقق —حقل ناقص، hex فارغ بعد شباك، طول غير ثلاثة أو ستة، محارف غير hex، بادئة برمجة 0x، مسافات داخل الاسم، بادئة $ لـ Sass، غلاف var()، معرّف لا يبدأ بحرف أو شرطة سفلية، أو اسم أطول من أربعة وستين محرفاً بما فيها البادئة— يعيد invalid_input مع تسمية الحقل ولا يُفوتر أبداً. التسعير مبلغ ثابت $0.002 لكل طلب ناجح.

أين يقدّم منسّق hex إلى متغير CSS قيمة حقيقية

ولأن التنفيذ parse نقي من المستوى A، تكلف كل مكالمة ناجحة السعر الأساسي المنشور $0.002 دون رموز نموذج ودون شبكة صادرة، ولا يستهلك فشل التحقق الرصيد.

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

أنابيب رموز التصميم وأوراق الأنماط

حوّلوا إدخالات hex من ملف JSON للعلامة إلى أسطر مستقرة --name: #rrggbb; لأجل Style Dictionary أو Theo أو tokens.css يدوي دون انحراف حالة أو اختصار بين الآلات.

أسئلة تقنية

كم تكلفة أداة hex إلى متغير CSS؟

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

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

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

مثال محلول

ما هي خاصية CSS المخصصة ولماذا تغليف لون hex

أين يقدّم منسّق hex إلى متغير CSS قيمة حقيقية

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

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

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

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

أدوات ذات صلة

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

الـEndpoint

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

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

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

الأسعار

الحدود

الأخطاء

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

ما هي خاصية CSS المخصصة ولماذا تغليف لون hex

عقد الإدخال وقواعد التحقق وسطر التعريف

أين يقدّم منسّق hex إلى متغير CSS قيمة حقيقية

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

أنابيب رموز التصميم وأوراق الأنماط

أسئلة تقنية

شكرًا