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

مولّد لوحة أحادية اللون

خمس خطوات من #3366cc تعطي #000000 و#193366 و#3366cc و#99b2e6 و#ffffff، وكلها بالصبغة 220 وتشبع 60%. حافظوا على أزرق علامتكم أزرق حقًا من الأسطح الداكنة حتى الخلفيات الفاتحة. مجانًا في متصفحكم.

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

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

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

مثال محلول

إذا أدخلت

اللون: #3366cc

تحصل على

الكمية: 5
Hue: 220
التشبع: 60
الإضاءة الأساسية: 50

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

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

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

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

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

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

ما الذي ترسله وما الذي يعود إليك

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

تشمل الفحوص النموذجية خمس درجات على #3366cc، وثلاث درجات على الأحمر القصير #f00، والتأكد من أن سلسلة غير سداسية تفشل في التحقق. أبقِ steps في النطاق الموثَّق بدل الاعتماد على اقتصاص صامت — تفشل هذه الأداة بصوت عالٍ حتى تبقى أنظمة التصميم قابلة للتنبؤ. فضّل قيم التصدير السداسية من ستة أرقام من دليل أسلوب عندما تحتاج إلى تثبيتات مستقرة عند البكسل؛ تُقبل الصيغة القصيرة من ثلاثة أرقام وتُوسَّع قبل التحويل.

أين تظهر اللوحات الأحادية اللون في العمل الحقيقي

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

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

ألوان CSS المسمّاة مثل tomato خارج النطاق؛ حوّلها أولًا إلى سداسي.

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

أسطح الواجهة وحالاتها بصبغة واحدة

اشتق أسطحًا عميقة وملءات وسطى وخلفيات باهتة من لون أساسي مع تثبيت الصبغة والتشبع.

حملات علامة تبقى على الصبغة

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

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

كيف يبني مولّد اللوحة الأحادية اللون N ألوان؟

يحوّل السداسي إلى HSL، ويثبّت الصبغة والتشبع، ويضع الإضاءة عند L_i = i × 100 / (N − 1) لـ i من 0 إلى N − 1، ثم يعيد كل درجة إلى سداسي وRGB. العيّنة الأولى سوداء والأخيرة بيضاء.

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

Steps هو العدد الكلي لعيّنات اللوحة (عدد صحيح 2–21)، وليس عددًا على كل جانب من الأساس. خمس درجات تنتج خمسة ألوان عند الإضاءة 0 و25 و50 و75 و100 في المئة.

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

يُعاد اللون الأصلي دائمًا كعيّنة base مع RGB المحلَّل محفوظًا.

أي صيغ سداسية تُقبل؟

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

لماذا يكون اللونان الأول والأخير دائمًا الأسود والأبيض؟

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

أدوات ذات صلة

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

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

الـEndpoint

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

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

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

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

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

import os, requests

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

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

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

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

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.monochromatic",
  "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 بدل الاقتصاص الصامت. لا شبكة ولا بذور عشوائية ولا ساعة جدارية — فاللون نفسه والدرجات نفسها تنتج دائمًا JSON نفسه.

ما الذي ترسله وما الذي يعود إليك

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

أين تظهر اللوحات الأحادية اللون في العمل الحقيقي

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

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

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

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

أسئلة تقنية

كم تبلغ تكلفة مولّد اللوحة الأحادية اللون؟

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

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

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

مثال محلول

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

ما الذي ترسله وما الذي يعود إليك

أين تظهر اللوحات الأحادية اللون في العمل الحقيقي

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

أسطح الواجهة وحالاتها بصبغة واحدة

حملات علامة تبقى على الصبغة

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

أدوات ذات صلة

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

الـEndpoint

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

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

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

الأسعار

الأخطاء

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

ما الذي ترسله وما الذي يعود إليك

أين تظهر اللوحات الأحادية اللون في العمل الحقيقي

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

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

أسئلة تقنية

شكرًا