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

مولّد ظلال الألوان

ابنِ سلّمًا كاملًا من الداكن إلى الفاتح انطلاقًا من لون علامة واحد: اللون #3366cc بثلاث خطوات يعطي سبع عينات، من #000000 مرورًا باللون #224488 واللون الأصلي حتى #bbccee و#ffffff. تتغير الإضاءة وحدها ويبقى اللون والتشبع. مجاني في متصفحك.

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

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

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

مثال محلول

إذا أدخلت

لون hex: #3366cc

تحصل على

الكمية: 7
إضاءة الأساس: 50

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

كيف تدرّج الدرجات الفاتحة والظلال الإضاءة

ابدأ بلون hex في CSS مثل hash ثلاثة ثلاثة ستة ستة c c أو الشكل القصير hash ثلاثة ستة c. يوسّع المحلّل الرموز ثلاثية الأرقام، ويحوّل الأرقام إلى أحرف صغيرة، ويحوّل كل زوج إلى أعداد صحيحة للأحمر والأخضر والأزرق من صفر إلى مئتين وخمسة وخمسين. تُسقَط تلك القنوات على الدرجة اللونية والتشبع والإضاءة بصيغ CSS وW3C القياسية: الإضاءة متوسط الكسور القصوى والدنيا للقناة، والتشبع يعتمد على تلك الإضاءة، والدرجة اللونية تُقاس بالدرجات حول عجلة الألوان مع رماديّات لا لونية تبلّغ درجة صفر.

الظلال لا تُمزَج نحو الأسود في RGB؛ فهي تخفض نسبة الإضاءة فقط بينما تبقى الدرجة اللونية والتشبع ثابتين. لمؤشر الخطوة k من واحد إلى عدد الخطوات المختار، تستخدم كل ظلّ إضاءة تساوي إضاءة الأساس مضروبة في واحد ناقص k على الخطوات، فتقع أبعد ظلّ عند الأسود الخالص بإضاءة صفر وأقرب ظلّ تحت الأساس مباشرة. ترفع الدرجات الفاتحة الإضاءة نحو الأبيض بالطريقة نفسها: تصبح الإضاءة إضاءة الأساس زائد المسافة المتبقية حتى مئة، مُقاسَة بـ k على الخطوات، فأبعد درجة فاتحة أبيض خالص.

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

الخطوات غير الصحيحة أو القيم خارج واحد إلى عشرين تفشل في التحقق حتى لا يتجاوز العملاء النطاق المسموح بصمت.

ما ترسله وما تستلمه

أرسل حقلين: color كسلسلة hex وsteps كعدد صحيح بين واحد وعشرين شمولًا. تتضمن كل عينة role وindex وstep وhex والأعداد الصحيحة r g b وأرقام الدرجة والتشبع والإضاءة وسلاسل rgb وhsl القابلة للطباعة. role هو shade للخطوات الأغمق وbase للأصل وtint للخطوات الأفتح؛ وstep سالب للظلال وصفر للأساس وموجب للدرجات الفاتحة حتى يرتّب العملاء أو يصفّوا دون إعادة اشتقاق الإضاءة. سلسلة formula قصيرة توثّق قواعد تدريج L للوثائق والدعم.

فحوصات نموذجية: ثلاث خطوات على hash ثلاثة ثلاثة ستة ستة c c، وخمس خطوات على الأحمر الخالص، والتأكد من فشل hex غير صالح في التحقق. استخدم النموذج المجاني في المتصفح لمراجعات التصميم والمنحدرات السريعة، ثم استدعِ العقد ذاته من البرامج النصية عند الحاجة إلى توليد جماعي لمقاييس الرموز. أبقِ steps ضمن النطاق الموثّق بدل الاعتماد على قصّ صامت — تفشل هذه الأداة بصراحة حتى تبقى أنظمة التصميم قابلة للتوقع.

أين تظهر مقاييس الظلال في العمل الحقيقي

يبني مصمّمو المنتج منحدرات واجهة كاملة بتوليد حالات active أغمق وخلفيات hover أفتح من أساسي علامة دون انحراف الدرجة اللونية، فتظل سلّم CTA كحلي كحليًّا من الحالة المضغوطة إلى السطح الناعم. يستكشف مراجعو الإتاحة مرافقي ألوان النص أو الأيقونات على سلّم إضاءة ثم يسلّمون المرشحين إلى فاحص تباين بدل تخمين الدرجات الوسطى بالعين. تنتج فرق التسويق باستيلات حملات وإبرازات عميقة من شعارات مشبعة لافتات اجتماعية وترويسات بريد مع الحفاظ على هوية الدرجة اللونية للعلامة.

يكتب مهندسو الواجهة منحدرات ظل في التكامل المستمر حتى يمنح لون علامة واحد سلّمًا موثّقًا للمخططات والرقائق والشارات والأزرار الثانوية. إن احتجت لاحقًا خطوة تفتيح واحدة أو تحويل HSL إلى RGB أو بناء لوحة مماثلة أو فحص تباين WCAG، عاملها نوايا بحث وصفحات هبوط منفصلة بدل إثقال صفحة الظلال هذه.

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

حالات hover والضغط في الواجهة

اشتق ظلال ضغط أغمق ودرجات hover أفتح من لون أساسي مع الإبقاء على الدرجة اللونية والتشبع ثابتين.

باستيلات تسويق وإبرازات عميقة

أنتج عينات أفتح وأغمق جاهزة للحملة من ألوان شعار مشبعة للافتات والشرائح والإبداعات الاجتماعية.

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

كيف يبني مولّد ظلال الألوان هذا المقياس؟

يحوّل hex إلى HSL، ويدرّج الإضاءة نحو الأسود للظلال (L = L×(1−k/steps)) ونحو الأبيض للدرجات الفاتحة (L = L+(100−L)×(k/steps))، ويثبت الدرجة اللونية والتشبع، ثم يعيد كل خطوة إلى hex وRGB.

ماذا يعني المعامل steps؟

steps هو عدد خطوات الإضاءة على كل جانب من لون الأساس (عدد صحيح 1–20). إجمالي العينات 2×steps+1 بما فيها الأساس، مرتّبة من الأغمق إلى الأفتح.

ما الفرق بين الظل والدرجة الفاتحة؟

يخفض الظل إضاءة HSL نحو الأسود؛ وترفع الدرجة الفاتحة الإضاءة نحو الأبيض. كلاهما يحافظ على الدرجة اللونية والتشبع الأصليين لاستقرار هوية العلامة.

ما تنسيقات hex المقبولة؟

hex في CSS بثلاثة وستة أرقام، مع أو بدون علامة مزدوجة في البداية.

لماذا ينتهي السلّم بالأسود الصافي والأبيض الصافي؟

لأن أغمق ظل يصل إلى إضاءة 0 وأفتح درجة تصل إلى 100. وتتوزع الخطوات بينهما بالتساوي، بينما تبقى درجة اللون والتشبع في اللون الأصلي كما هما.

أدوات ذات صلة

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

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

الـEndpoint

POSThttps://api.kit.forhosting.com/color/shades

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

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

curl -X POST https://api.kit.forhosting.com/color/shades \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"color":"#3366cc","steps":3}'

const res = await fetch("https://api.kit.forhosting.com/color/shades", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "color": "#3366cc",
    "steps": 3
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/shades",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "color": "#3366cc",
    "steps": 3
},
)
task_id = res.json()["task_id"]

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

body := bytes.NewBufferString(`{"color":"#3366cc","steps":3}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/shades", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

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

{
  "color": "#3366cc",
  "steps": 3
}

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

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

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

بلا استدعاءات شبكة ولا بذور عشوائية ولا انجراف نموذج — اللون والخطوات المتطابقان ينتجان دائمًا JSON نفسه.

ما ترسله وما تستلمه

يقبل color أيضًا الاسمين البديلين hex وbase؛ ويقبل steps الاسمين count وn. الحقول الناقصة والأحرف غير hex والأطوال الخاطئة وNaN وInfinity وغير الصحيحة وsteps خارج الفترة المغلقة تفشل بـ invalid_input ولا تُحتسب. عند النجاح تعيد الاستجابة اللون المطبّع سداسي الأرقام والعدد الصحيح steps، ثم تقدّم count يساوي ضعفي steps زائد واحد، وlightness_base من HSL الأصلي، وعينة base، ومصفوفتي shades وtints منفصلتين، ومصفوفة swatches كاملة مرتّبة من الأغمق إلى الأفتح، وقائمة hexes للراحة. تسعير استدعاءات API الناجحة هو الأساس المنشور $0.002 لكل عنصر؛ وأخطاء التحقق لا تستهلك الرصيد المدفوع مسبقًا.

أين تظهر مقاييس الظلال في العمل الحقيقي

تصدر خطوط أنابيب رموز التصميم متغيرات CSS أو مقاييس سمات JSON من hex أساس واحد وتخزّن كل عينة مشتقة لأسطح الوضع الفاتح والداكن. يمكن لمؤلفي المناهج الذين يدرّسون HSL أن يُظهروا أن تدريج L وحده يختلف عن المزج نحو الأسود أو الأبيض في RGB، ويريدون JSON نفسه في ودجة المتصفح وفي API. لأن هذه القدرة محرّك parse نقي، تسعير API هو الأساس المنشور $0.002 لكل عنصر ناجح والتحقق الفاشل لا يستهلك الرصيد.

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

منحدرات ظل لرموز التصميم

أنشئ سلّمًا كاملًا من الأغمق إلى الأفتح من hex علامة لمتغيرات CSS وJSON السمة وأنظمة متعددة العلامات.

أسئلة تقنية

كم التكلفة؟

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

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

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

مثال محلول

كيف تدرّج الدرجات الفاتحة والظلال الإضاءة

ما ترسله وما تستلمه

أين تظهر مقاييس الظلال في العمل الحقيقي

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

حالات hover والضغط في الواجهة

باستيلات تسويق وإبرازات عميقة

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

أدوات ذات صلة

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

الـEndpoint

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

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

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

الأسعار

الأخطاء

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

ما ترسله وما تستلمه

أين تظهر مقاييس الظلال في العمل الحقيقي

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

منحدرات ظل لرموز التصميم

أسئلة تقنية

شكرًا