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

إنشاء لوحة ألوان Material Design

حوّلوا لوناً سداسيّاً واحداً إلى سلّم كامل من درجات Material Design لاستخدامه في الواجهات ورموز التصميم والنماذج الأولية والوثائق.

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

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

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

يحافظ المولّد على اللون المُدخل في الدرجة 500، ثم يحسب الدرجات الفاتحة من 50 إلى 400 والداكنة من 600 إلى 900. تُعاد جميع النتائج بصيغة #RRGGBB وبأحرف كبيرة، فتكون جاهزة للنسخ إلى CSS أو ملف سمة أو مسار عمل للرموز. يتم الحساب فوراً وبصورة قابلة للتكرار، من دون خدمة شبكية أو اختيار لوني ذاتي.

ابدؤوا بلون أساس موثوق

أدخلوا لوناً سداسيّاً من ست خانات مسبوقاً بعلامة المربع، مثل #3F51B5. تصبح هذه القيمة الدرجة 500، وهي المرساة البصرية للسلم الناتج. تمنع الصيغة الصارمة الالتباس بين الاختصار ذي الخانات الثلاث والصيغ التي تضم قناة ألفا والقيم التي لا تبدأ بعلامة المربع. قبل اختيار الأساس، حدّدوا الموضع الذي سيظهر فيه غالباً. فقد يحتاج لون العلامة المستخدم في الأزرار إلى تباين كافٍ فوق الأسطح الفاتحة والداكنة، بينما يحتاج لون مخطط زخرفي إلى التميّز عن السلاسل المجاورة. لا يغيّر المولّد لون المرساة خفيةً لتحقيق أهداف التباين؛ فالإبقاء على الدرجة 500 كما أُدخلت يجعل صلة اللوحة باللون المختار قابلة للتتبّع. تصبح الدرجات ذات الأرقام الأصغر أفتح تدريجياً، وتصبح ذات الأرقام الأكبر أغمق. يستخدم الناتج قيماً سداسية من ست خانات بأحرف كبيرة، لتُنقل مباشرة إلى خصائص CSS أو ملفات رموز JSON أو سمات المكوّنات أو الوثائق. تُرفض السلاسل غير الصالحة بدلاً من تخمينها أو تحليل جزء منها.

افهموا كيفية بناء سلّم الدرجات

تتبع اللوحة درجات Material المعروفة: 50 و100 و200 و300 و400 و500 و600 و700 و800 و900. تطابق الدرجة 500 لون الأساس المُرسل تماماً. في الجانب الفاتح، تُمزج كل قناة من الأحمر والأخضر والأزرق مع الأبيض بنسب ثابتة، وتحصل الدرجة 50 على أقوى تفتيح. وفي الجانب الداكن، تُمزج القنوات نفسها مع الأسود، وتحصل الدرجة 900 على أقوى تعتيم. تُقرّب قيمة كل قناة إلى أقرب عدد صحيح ثم تُحوّل مجدداً إلى الصيغة السداسية. يجعل الاستيفاء الثابت بنظام RGB الخوارزمية واضحة وحتمية؛ فالمدخل نفسه ينتج دائماً القيم العشر نفسها وبالترتيب ذاته. كما يلغي الاعتماد الخفي على ملفات تعريف الشاشات أو إدارة الألوان في المتصفح أو API شبكية أو إعدادات برامج التصميم المتغيرة. يمثل السلم الناتج عائلة لونية عملية بأسلوب Material، لكنه لا يدّعي تساوي المسافات في السطوع المُدرَك. تستجيب الرؤية البشرية للألوان بطرائق مختلفة، ولذلك يمكن استخدام الناتج نقطة انطلاق مستقرة عند وجود متطلبات إدراكية صارمة، ثم مراجعته في سياقه الفعلي.

طبّقوا اللوحة مع الحفاظ على سهولة الوصول

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

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

إنشاء رموز للواجهات

حوّلوا لون علامة معتمداً إلى سلّم متوقع من عشر درجات لحالات المكوّنات وأسطحها.

إعداد نموذج لسمة Material

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

توحيد التسليم إلى التطوير

شاركوا لوحة قابلة للتكرار وملائمة لـJSON بدلاً من عينات ألوان ذات أسماء مبهمة.

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

ما صيغة الإدخال المقبولة؟

استخدموا علامة مربع تليها ست خانات سداسية تماماً، مثل #3F51B5. تُرفض الصيغة المختصرة وقنوات ألفا والقيم من دون علامة المربع.

أي درجة تحتوي على اللون الأصلي؟

الدرجة 500 هي الصورة الموحّدة بالأحرف الكبيرة للون الأصلي، ولا يغيّرها المولّد أبداً.

كيف تُحسب الدرجات الفاتحة والداكنة؟

تُمزج قنوات RGB بنسب ثابتة مع الأبيض للدرجات من 50 إلى 400، ومع الأسود للدرجات من 600 إلى 900.

هل تضمن الدرجة الناتجة تبايناً متاحاً؟

لا. يعتمد التباين على لوني المقدمة والخلفية وحجم النص ووزنه، ولذلك اختبروا كل تركيب مقرر.

ما تكلفة طلب API؟

تبلغ تكلفة كل طلب API ‏$0.002. تنفذ نسخة المتصفح الحساب الحتمي نفسه محلياً.

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

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

الـEndpoint

POSThttps://api.kit.forhosting.com/color/material-palette-generate

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

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

curl -X POST https://api.kit.forhosting.com/color/material-palette-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"base_color":"#3F51B5"}'

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

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/material-palette-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "base_color": "#3F51B5"
},
)
task_id = res.json()["task_id"]

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

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

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

{
  "base_color": "#3F51B5"
}

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

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.material_palette_generate",
  "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 الكامل ←