لوحة صبغات متساوية التباعد
خمسة ألوان تبدأ من الصبغة 200° تتباعد بمقدار 72°: أولها #269dd9 وآخرها #26d93e. يبقى التشبع والإضاءة ثابتين، فلا يطغى جزء من العجلة على مخططكم. مجانًا في متصفحكم.
- مجاني
- يعمل في متصفحك
- دون تسجيل
- بياناتك لا تغادر جهازك
شغّل الأداة مجانًا
مثال محلول
- Hue
- 200
- الكمية
- 5
- التشبع
- 70
- السطوع
- 50
- الخطوة (°)
- 72
- المخطط
- #269dd9, #8526d9, #d92656, #d9cd26, #26d93e
- درجات اللون
- 200, 272, 344, 56, 128
يولّد مولّد لوحة الصبغات المتساوية التباعد N لونًا بخطوات زاوية متساوية حول عجلة الألوان، بدءًا من صبغة الأساس التي تختارونها مع الإبقاء على التشبع والإضاءة ثابتين. فرق العلامة التي تبني سلاسل مخططات متعددة المحطات، ومطوّرو الواجهة الذين يبنون رموز سمات للوحات المعلومات، وطلاب التصميم الذين يدرسون تباعد الصبغات المتساوي يحتاجون إلى تلك الخريطة الحتمية نفسها دون فتح حزمة تصميم كاملة.
ما لوحة الصبغات المتساوية التباعد ولماذا تهمّ الخطوات المتساوية
التباعد الزاوي المتساوي على دائرة الصبغة هو الطريقة الكلاسيكية لبناء سلسلة متعددة الألوان لا تحابي أي قطاع من العجلة. تستخدم المخططات التكميلية مائة وثمانين درجة، والثلاثية مائة وعشرين، والرباعية تسعين؛ تعمّم هذه القدرة الفكرة على أي عدد صحيح N من اثنين إلى ستة وثلاثين بتعيين الخطوة إلى ثلاثمائة وستين مقسومة على N والمشي من صبغة الأساس.
يبقى التشبع والإضاءة ثابتين عمدًا: نية البحث عن لوحة صبغات متساوية التباعد هي دوران صبغة متوازن لا اختراع منحدرات قيمة أو كروما، لذا يعطي بدء حيّ متوسط الإضاءة رفاقًا أحياء متوسطي الإضاءة، ويعطي بدء باستيل رفاق باستيل. عندما يكون التشبع صفرًا ينهار كل عضو نحو الرمادي لأن الألوان اللالونية لا تملك صبغة ذات معنى للتدوير؛ هذه فيزياء لون صحيحة وليست خللًا.
كثيرًا ما يقرن المعلّمون هذه الأداة بمولّدات مخططات ثابتة حتى يرى الطلاب كيف يغيّر N التوتر البصري وكيف يمكن لصبغة الأساس نفسها أن تغذي سلسلة مخططات بخمس محطات أو خريطة نوعية باثنتي عشرة. تستخدم أنظمة التصميم هذا الهيكل عندما يحتاج المنتج إلى لوحة فئوية تتوسع مع عدد السلاسل بدل ترميز ثلاثة أو أربعة تأكيدات علامة ثابتة.
نصائح عملية وحدود وعمليات بحث ذات صلة
ابدؤوا من صبغة العلامة أو الواجهة التي تثقون بها أصلًا لا من اختيار عشوائي على العجلة؛ العضو الأول دائمًا هو صبغة الأساس عند الإزاحة صفر بعد اللف، لذا الفهرس صفر هو لون هويتكم بمصطلحات HSL. فضّلوا أعدادًا صحيحة تطابق حجم سلسلة المخطط أو وسيلة الإيضاح؛ خمس محطات تعطي خطوات سبعين ودرجتين، وست تعطي ستين، وثمانٍ تعطي خمسًا وأربعين، واثنتا عشرة تعطي ثلاثين.
أبقوا التشبع والإضاءة ضمن النطاقات التي يتحقق منها مسار إمكانية الوصول لديكم—التباعد المتساوي للصبغة لا يضمن تباين WCAG ضد خلفية ثابتة، لذا اقرنوا هذه اللوحة بفاحص تباين عندما يستقر النص على تعبئات صلبة. لا تتوقعوا مخرجات تكميلية فقط أو ثلاثية فقط من هذه الصفحة: تلك المخططات الثابتة أدوات منفصلة بنية SEO خاصة؛ استخدموا هذه القدرة عندما يكون N معاملًا تتحكمون فيه. ألوان CSS المسماة وسلاسل hex خارج النطاق هنا؛ حوّلوها أولًا إلى صبغة وتشبع وإضاءة إن بدأتم من hex رمز.
عند كتابة الاختبارات غطّوا حالة متعددة المحطات حية واحدة على الأقل، وcount يساوي اثنين (قسمة مائة وثمانين درجة)، وتشبعًا قريبًا من الرمادي، وcount غير صالح متعمدًا حتى تثبت رياضيات التباعد والتحقق معًا. تستهدف هذه الصفحة من يبحثون عن لوحة صبغات متساوية التباعد أو مولّد عجلة صبغة متساوية أو أداة N لون مجانية حول العجلة عبر الإنترنت؛ وليست مستخرج لوحة من صورة ولا محوّلًا كاملًا متعدد الفضاءات.
حالات الاستخدام
سلاسل مخططات ولوحات معلومات فئوية
تختار فرق البيانات صبغة علامة أساسًا وعدد سلاسل N ثم تُدخل قائمة hex من scheme في مكتبات المخططات لألوان فئوية متساوية التباعد.
سقالة رموز التصميم للسمات
يولّد مطوّرو الواجهة N خاصية CSS مخصصة من صبغة أساس بتشبع وإضاءة ثابتين لأطقم واجهة متعددة التأكيدات.
الأسئلة الشائعة
ما لوحة الصبغات المتساوية التباعد؟
N لونًا موضوعة بخطوات زاوية متساوية على دائرة الصبغة.
هل هذا مثل المخططات الثلاثية أو التكميلية؟
تعمّم هذه القدرة على أي N مسموح تختارونه.
كم درجة تفصل بين كل لون والذي يليه؟
الخطوة هي 360 درجة مقسومة على عدد الألوان. مع خمسة ألوان تكون الخطوة 72°، فتتابع صبغة الأساس 200° إلى 272° ثم 344° ثم 56° ثم 128° حول العجلة.
لماذا تظهر كل الألوان رمادية؟
لأن التشبع مضبوط على 0. اللون بلا تشبع لا صبغة له تدور، فتتحول كل العينات إلى الرمادي نفسه. ارفعوا التشبع، مثلًا إلى 70%، فتعود الصبغات إلى التمايز.
كم لونًا يمكنني توليده؟
من 2 إلى 36 لونًا. اختاروا عددًا يساوي سلاسل مخططكم أو عناصر وسيلة الإيضاح، فيحصل كل عنصر على صبغة خاصة على مسافة متساوية من غيرها.
أدوات ذات صلة
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/color/hue-wheel \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":200,"count":5,"saturation":70,"lightness":50}'const res = await fetch("https://api.kit.forhosting.com/color/hue-wheel", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 200,
"count": 5,
"saturation": 70,
"lightness": 50
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hue-wheel",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 200,
"count": 5,
"saturation": 70,
"lightness": 50
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hue-wheel", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":200,"count":5,"saturation":70,"lightness":50}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":200,"count":5,"saturation":70,"lightness":50}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hue-wheel", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"hue": 200,
"count": 5,
"saturation": 70,
"lightness": 50
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hue_wheel",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |
ملاحظات تقنية
المدخلات غير الصالحة—حقول ناقصة، عدد غير صحيح، عدد خارج النطاق المسموح، تشبع أو إضاءة خارج صفر إلى مائة—تفشل بخطأ invalid_input واضح بدل اختراع لوحة. المسار حساب صرف—بلا شبكة ولا بذور عشوائية ولا اعتماد على الساعة—لذا يعيد مشغّل المتصفح المجاني وواجهة API المدفوعة مسبقًا نفس JSON في كل استدعاء.
ما لوحة الصبغات المتساوية التباعد ولماذا تهمّ الخطوات المتساوية
تعيد الاستجابة دائمًا فهرسة الأعضاء من الصفر وتبلّغ offset_deg وhue حتى تتمكن الوثائق ورموز التصميم والاختبارات الآلية من تأكيد مواضع العجلة الدقيقة دون إعادة ترتيب يدوي.
كيف تستدعون API وماذا يعود
يُفضَّل تثبيت مصفوفتي scheme وhues في اختبارات الوحدة حتى يظهر أي تغيير لاحق في التقريب أو تحويل HSL فورًا. أرسلوا جسم JSON بأربعة أعداد منتهية إلزامية: hue كزاوية الأساس بالدرجات (يُقبل أي قيمة منتهية وتُلفّ في الفترة نصف المفتوحة من صفر إلى ثلاثمائة وستين)، وcount كعدد صحيح من اثنين إلى ستة وثلاثين، وsaturation كنسبة مئوية من صفر إلى مائة، وlightness كنسبة مئوية من صفر إلى مائة. تُقبل السلاسل الرقمية كما تُقبل أعداد JSON. عند النجاح تعيد الاستجابة الصبغة المعيارية، وcount المعكوس، والتشبع والإضاءة المقرّبين، وstep_deg مساويًا لثلاثمائة وستين مقسومة على count بتقريب عشري ثابت، ومصفوفة scheme من سلاسل #rrggbb صغيرة الحروف بترتيب المسير، ومصفوفة hues لزوايا الأعضاء، ومصفوفة colors من كائنات غنية لكل منها index وoffset_deg وhue وhex وhex6 وr وg وb وrgb وcss وhsl، إضافة إلى رسالة إنجليزية قصيرة ومصفوفة steps توثّق التطبيع وحجم الخطوة وكل تحويل. فشل التحقق—حقل ناقص، قيمة غير منتهية، count غير صحيح، count خارج اثنين إلى ستة وثلاثين، أو تشبع أو إضاءة خارج صفر إلى مائة—يعيد invalid_input ولا يُحاسب أبدًا. التسعير مبلغ ثابت $0.002 لكل طلب ناجح بوحدة item.
نصائح عملية وحدود وعمليات بحث ذات صلة
المهام الفاشلة التي تعيد invalid_input لا تستهلك رصيدًا مدفوعًا مسبقًا، مما يبقي سكربتات التصميم الاستكشافية والتحقق من النماذج رخيصة أثناء لصق قيم غير مكتملة.
حالات التكامل
تمارين عجلة الألوان في الصف
يقارن الطلاب قطاعات متساوية مرسومة يدويًا مع step_deg حتمي ويؤكدون مصفوفات hues في الواجبات أو تمارين البرمجة.
أسئلة تقنية
ما المدخلات الإلزامية؟
أربعة أعداد: hue (درجات، تُلفّ في [0, 360))، count (صحيح 2–36)، saturation (0–100%)، وlightness (0–100%). القيم غير الصالحة تعيد invalid_input.
كيف يُحسب حجم الخطوة؟
step_deg = 360 / count بتقريب عشري مستقر. يستخدم العضو i الصيغة hue wrap(base + i × step_deg).
هل أداة لوحة الصبغات المتساوية التباعد مجانية؟
أداة المتصفح مجانية وتعمل محليًا. تستخدم استدعاءات API رصيد KIT المدفوع مسبقًا بمبلغ $0.002 لكل طلب ناجح؛ المهام الفاشلة لا تُحاسب أبدًا.