ForHosting KIT · أدوات المطورين

توليد تدرجات لونية فاتحة

أنشئوا لوحة موثوقة من التدرجات الفاتحة انطلاقًا من لون أساسي واحد، من دون تخمين القيم الوسيطة أو ضبط المنزلقات بالعين.

● Betaمجاني · داخل متصفحك

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

تمزج هذه الأداة اللون السداسي المحدد مع الأبيض بنسب متساوية، وتعيد قيم HEX وRGB دقيقة لكل درجة. الحساب حتمي، ولذلك ينتج اللون نفسه وعدد الخطوات نفسه اللوحة ذاتها دائمًا. استخدموها لإعداد حالات الواجهات والخلفيات والرسوم البيانية والرسوم التوضيحية ورموز التصميم التي تحتاج إلى انتقال واضح من اللون الأصلي حتى الأبيض.

اختاروا لونًا أساسيًا وعددًا مناسبًا من الخطوات

ابدؤوا بلون أساسي سداسي من ثلاثة أرقام أو ستة، مثل #36c أو #3366cc. تُوسّع الصيغة القصيرة قبل الحساب، ولذلك يمثل المثالان اللون نفسه تمامًا ويعطيان نتائج متطابقة. اختاروا بعد ذلك عددًا من خطوة واحدة إلى عشرين خطوة. يعبّر العدد عن التدرجات الفاتحة المولدة، من دون احتساب اللون الأساسي الأصلي، مع احتساب الأبيض الخالص بوصفه النتيجة الأخيرة. وعليه، تمزج أربع خطوات اللون الأساسي مع الأبيض بنسب 25% و50% و75% و100%. يناسب العدد الصغير تسلسلًا بصريًا موجزًا للواجهة، بينما يوفر العدد الأكبر خيارات أدق لتصور البيانات أو الرسوم التوضيحية أو استكشاف الرموز. تعرض النتيجة اللون الأساسي بعد توحيد صيغته وكل درجة مولدة بصورة منفصلة، وبذلك يتضح ما أُدخل وما حُسب. ولأن المسار ينتهي دائمًا بالأبيض، يكون تغير نسبة المزج متساويًا بين العينات المتجاورة، حتى عندما تختلف الفروق المرئية باختلاف اللون الأساسي والشاشة.

افهموا معادلة المزج الحتمية

تُمزج كل قناة من قنوات الأحمر والأخضر والأزرق بصورة مستقلة باتجاه 255، وهي قيمة القناة في اللون الأبيض. لحساب الدرجة رقم k في لوحة من n خطوات، تستخدم الأداة المعادلة base + (255 − base) × k/n، ثم تقرّب قيمة القناة إلى أقرب عدد صحيح. يحافظ تطبيق النسبة نفسها على القنوات الثلاث على الصلة باللون الأصلي، مع تقليل المسافة إلى الأبيض تدريجيًا. تتضمن الاستجابة فهرسًا يبدأ من واحد، ونسبة مزج الأبيض الدقيقة، وقيمة HEX موحدة بالأحرف الصغيرة، وأرقام القنوات منفردة، ونص RGB. هذا استيفاء مباشر في فضاء sRGB؛ فهو لا يغير إضاءة HSL، ولا يجري مزجًا بصريًا مصححًا بأشعة غاما، ولا يحاول تحقيق تساوٍ إدراكي. يهم هذا الفرق عند مقارنة المخرجات ببرامج الرسوم التي توفر عدة فضاءات للمزج. صُممت المعادلة لتكون بسيطة وموثقة وثابتة، ولذلك تلائم نصوص البناء واللقطات وتوليد الرموز آليًا والأنظمة التي تكون فيها قابلية إعادة النتائج أهم من الضبط البصري الذاتي.

طبّقوا اللوحة بأمان في نظام التصميم

تعاملوا مع القيم المولدة بوصفها مقياس بداية متسقًا، ثم اختبروها في سياقها الفعلي. تفيد الدرجات الفاتحة في الصفوف المحددة وخلفيات التنبيهات والحدود الرقيقة وتعبئة الرسوم البيانية وأسطح التحويم والمساحات الزخرفية، لكن الانتظام الرياضي للوحة لا يضمن تلقائيًا تباينًا متاحًا للجميع. اختبروا النصوص والأيقونات الأمامية فوق كل درجة مختارة وفق متطلبات التباين السارية على منتجكم. احتفظوا باللون الأساسي في رمز منفصل، وسمّوا القيم المولدة بحسب دورها أو نسبة مزجها، مثل brand-tint-25 أو info-background، بدل الاعتماد على موضعها في القائمة وحده. تظل الأسماء المبنية على النسبة مفهومة إذا استخدمت لوحة لاحقة عددًا مختلفًا من الخطوات. في مسارات العمل الآلية، خزّنوا قيم HEX المعادة مباشرة واحتفظوا بلون الإدخال وعدد الخطوات معها لتتمكنوا من إعادة إنتاج اللوحة. تُرفض الألوان غير الصالحة والصيغ السداسية ذات قناة ألفا والأعداد الكسرية والقيم خارج النطاق، بدل تصحيحها بصمت، مما يمنع مرور تغييرات غير مقصودة في الرموز من دون ملاحظة.

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

إنشاء رموز لأسطح الواجهات

أنشئوا خلفيات فاتحة وحدودًا وحالات تحديد قابلة للتكرار من لون علامة تجارية أو لون دلالي معتمد.

إعداد تنويعات لونية للرسوم البيانية

ولّدوا ألوان تعبئة فاتحة ومتوقعة تظل مرتبطة بصريًا باللون الرئيسي للسلسلة.

أتمتة توثيق لوحة الألوان

أنتجوا قيم HEX وRGB ثابتة لصفحات نظام التصميم وتوليد الشفرة والاختبارات وملفات التسليم.

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

ما تكلفة الطلب الواحد؟

تبلغ تكلفة كل طلب API مقدار $0.002. تحتوي المخرجات على لوحة التدرجات الفاتحة المطلوبة كاملة.

هل تتضمن اللوحة اللون الأساسي؟

تعرض الاستجابة اللون الأساسي الموحد منفصلًا. لا تتضمن قائمة الدرجات إلا المزجات التي تزداد سطوعًا وتنتهي بالأبيض.

لماذا تكون الدرجة الأخيرة بيضاء دائمًا؟

لأن الخطوات تقسم المسار الكامل من اللون الأساسي إلى مزجه مع الأبيض بنسبة 100% إلى فواصل متساوية.

ما صيغ الألوان المقبولة؟

استخدموا ثلاثة أرقام سداسية أو ستة، مع علامة الشباك في البداية أو من دونها. تُرفض قنوات ألفا وصيغ ألوان CSS الأخرى.

هل تضمن هذه الدرجات متطلبات التباين المتاح؟

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

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

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

الـEndpoint

POSThttps://api.kit.forhosting.com/color/tints-palette

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

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

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

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

import os, requests

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

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

body := bytes.NewBufferString(`{"color":"#3366cc","steps":4}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/tints-palette", 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": 4
}

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

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

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