مولّد نظام الألوان الرباعي
أدخل #e74c3c واحصل على أربعة ألوان في زوجين متقابلين: الأحمر مع السماوي #3cd7e7، والليموني #d7e73c مع مقابله، عند 0 و60 و180 و240 درجة على دائرة الألوان. مجانية في متصفحك.
- مجاني
- يعمل في متصفحك
- دون تسجيل
- بياناتك لا تغادر جهازك
شغّل الأداة مجانًا
مثال محلول
- Hex
- #e74c3c
- Hex المُدخل
- #e74c3c
- أكواد Hex
- #e74c3c, #d7e73c, #3cd7e7, #4c3ce7
- درجات اللون
- 5.614035, 65.614035, 185.614035, 245.614035
- الإزاحات
- 0, 60, 180, 240
يبني مولّد نظام الألوان الرباعي هذا لوحة أربعة ألوان مستطيلة من كود hex واحد بصيغة CSS. تُدخل لونًا أساسيًا مثل #e74c3c أو الصيغة المختصرة #f00؛ يحوّله المحرك إلى HSL، ويثبّت التشبع والإضاءة، ويدور بزاوية اللون في أربع خطوات حتمية عند صفر وستين ومئة وثمانين ومئتين وأربعين درجة. تضع هذه الإزاحات زوجين متكاملين على عجلة الألوان بحيث تكوّن الدرجات الأربع مستطيلًا رباعيًا كلاسيكيًا، لا لوحة عشوائية. تعيد كل استجابة ناجحة كود hex المُدخل بعد تطبيعه، وأربع درجات مفصّلة ب hex وRGB وHSL، إضافة إلى مصفوفتَي hex وhues مسطّحتين لرموز التصميم ومتغيرات CSS.
ما هو نظام الألوان الرباعي (المستطيل) وما الذي تحتويه الاستجابة
نظام الألوان الرباعي، ويُسمى أيضًا التناغم المستطيل، يستخدم أربع درجات لون مرتَّبة كزوجين متكاملين على عجلة الألوان. بدءًا من درجة اللون الأساسية h، يضع هذا المولّد الألوان عند h زائد صفر درجة، وh زائد ستين درجة، وh زائد مئة وثمانين درجة، وh زائد مئتين وأربعين درجة، ثم يعيد بناء كل لون بالتشبع والإضاءة الأصليين. هذا الفصل بستين درجة بين الزوجين يخلق مستطيلًا لا مربعًا (الذي يستخدم خطوات تسعين درجة).
تجلس الأزواج المتكاملة متقابلة، لذا توازن اللوحة الضغط الدافئ والبارد بينما تبقى مرتبطة بلون العلامة التجارية الذي كتبته. تشمل الحالات المرفوضة فقدان hex، والقيم غير النصية، والرموز الأطول من سبعة أحرف، وأي سلسلة ليست ثلاثة أو ستة أرقام سداسية عشرية مع علامة تجزئة بادئة اختيارية.
كيف يُقرأ مدخل hex وكيف تبقى الدرجات الأربع قابلة لإعادة الإنتاج
قد تتضمن القيم علامة التجزئة البادئة أو تحذفها، وقد تستخدم الصيغة المختصرة الثلاثية الأرقام مثل f00، التي تتوسّع رقمًا برقم إلى ff0000 قبل أي تحويل. الأرقام غير حساسة لحالة الأحرف وتُطبَّع دائمًا إلى مخرجات سداسية سفلية من ستة أرقام حتى تبقى الملفات المرجعية ومتغيرات CSS ثابتة عبر التشغيلات. بعد التحليل، تتحوّل القنوات إلى HSL بصيغ sRGB القياسية؛ وتُؤخذ درجة اللون بالدرجات على الدائرة من صفر إلى ثلاثمئة وستين، بينما يبقى التشبع والإضاءة كسورًا وحدوية لا تتغيّر عبر الخطوات الأربع.
تُطبَّق كل إزاحة بمعامل باقي موجب حتى لا تتسرّب قيم وسيطة سالبة، ثم تتحوّل HSL مرة أخرى إلى RGB صحيحة مع تقييد القنوات ورقمين سداسيين سفليين لكل قناة.
أين تندرج اللوحات الرباعية في عمل المنتج والعلامة التجارية وواجهة المستخدم
يلجأ المصممون إلى الأنظمة الرباعية عندما تحتاج علامة تجارية إلى أكثر من لون تمييزي واحد ويجب أن تبقى متناغمة: غالبًا ما تحتاج المواقع التسويقية، والرسوم البيانية متعددة السلاسل، وألوان حالة لوحات المعلومات، وأنظمة الرسوم التوضيحية إلى أربع درجات مترابطة تبدو مقصودة. تستخدم فرق المنتجات تخطيط المستطيل لاشتقاق ألوان التمرير والتركيز والرسوم البيانية ودعوات العمل من كود hex واحد للشركة دون ابتكار أكواد hex عشوائية في جدول بيانات. يستخدمها المعلمون وطلاب التصميم لتوضيح الأزواج المتكاملة وهندسة درجة اللون دون تطبيقات سطح مكتب غامضة تغيّر الخوارزميات بين الإصدارات.
اجمعها مع فاحصات التباين عندما تكون إمكانية الوصول هي الخطوة التالية، ومع محوّلات RGB أو HSL عندما تحتاج صيغًا وسيطة لأدوات أخرى في مجموعتك.
حالات الاستخدام
لوحات العلامة التجارية والتسويق
وسّع كود hex واحدًا للشركة إلى أربعة ألوان بتناغم مستطيل للحملات ومجموعات الرسوم التوضيحية وصفحات الهبوط متعددة التمييز.
لهجات الرسوم البيانية ولوحات المعلومات
اشتق أربعة ألوان سلاسل مترابطة من درجة لون أساسية للعلامة التجارية حتى تبقى الرسوم البيانية متعددة الخطوط متوازنة دون ضجيج hex مختار يدويًا.
الأسئلة الشائعة
كيف تُختار الدرجات الأربع؟
من درجة اللون الأساسية h، توضع الألوان عند h+0° وh+60° وh+180° وh+240° بالتشبع والإضاءة نفسيهما. هذا هو التخطيط المستطيل (الرباعي) الكلاسيكي: زوجان متكاملان مفصولان بستين درجة.
ما صيغ hex المقبولة؟
أكواد hex بصيغة CSS من ثلاثة أو ستة أرقام، مع أو دون علامة # البادئة (مثل #e74c3c أو e74c3c أو #f00 أو f00).
هل هذا مطابق لنظام الألوان المربّع؟
لا. يستخدم النظام المربّع خطوات تسعين درجة. يستخدم هذا المولّد إزاحات المستطيل 0/60/180/240 بحيث تكوّن الأزواج مستطيلًا غير مربّع على العجلة.
هل تختار الأداة الألوان من صورة؟
لا. تدور فقط درجة لون الكود hex الذي تقدّمه. للألوان السائدة من الصور، استخدم مستخرج لوحة صور بدلًا من ذلك.
لماذا تبدو الألوان الأربعة بالشدة نفسها؟
لأن الأداة تدير درجة اللون فقط وتحافظ على تشبّع لون الأساس وإضاءته. لذلك تبدو العيّنات الأربع من عائلة واحدة وتبقى مرتبطة بلون علامتك التجارية.
أدوات ذات صلة
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/color/tetradic \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#e74c3c"}'const res = await fetch("https://api.kit.forhosting.com/color/tetradic", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#e74c3c"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/tetradic",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#e74c3c"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/tetradic", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#e74c3c"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#e74c3c"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/tetradic", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"hex": "#e74c3c"
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.tetradic",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الحدود
hex_max_len | 7 |
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |
ملاحظات تقنية
المسار حسابي صرف بلا اتصال شبكي، ولا أخذ عيّنات، ولا اختصارات مرتبطة بالتاريخ، لذا يعطي الأساس نفسه دائمًا الألوان الأربعة نفسها في CI، وفي الأداة المجانية بالمتصفح، وعبر API. استخدمها مجانًا على هذه الصفحة لاستكشاف الهوية البصرية ونماذج واجهة المستخدم، أو استدعِ API بسعر $0.002 لكل طلب ناجح عندما تحتاج إلى بيانات رباعية قابلة لإعادة الإنتاج في أنظمة التصميم أو مولّدات السمات أو خطوط أنابيب التنسيق الآلي.
ما هو نظام الألوان الرباعي (المستطيل) وما الذي تحتويه الاستجابة
تتضمن الاستجابة input_hex كصيغة سداسية مطبَّعة، وكائن base للدرجة الأولى، ومصفوفة colors من أربعة كائنات لكل منها hex وr وg وb وh وs وl وhue_offset وسلاسل rgb وhsl، إضافة إلى مصفوفتَي hexes وhues للراحة، وقائمة offsets، وscheme مضبوطة على tetradic، وmethod باسم hue_rotate_rectangle، وتذكيرًا موجزًا بالصيغة. لا يوجد نموذج توليدي ولا أخذ عيّنات من صورة: يبني المحرك أربع درجات دقيقة من hex صالح أو يرفض الطلب ب invalid_input. إن احتجت إلى أزواج متكاملة فقط، أو لوحات مستخرجة من صور، أو فحوصات تباين WCAG، فاستخدم تلك الأدوات المخصصة؛ هذه الصفحة تجيب فقط عن التوسيع الرباعي المستطيل بمخرجات رقمية ثابتة تناسب رموز التصميم واختبارات الوحدة ومستهلكي API الذين يجب ألا يخترعوا ألوانًا.
كيف يُقرأ مدخل hex وكيف تبقى الدرجات الأربع قابلة لإعادة الإنتاج
الحقل المفضّل هو hex، لكن الأسماء البديلة color وbase وinput مقبولة أيضًا حتى تعيد النماذج وسلاسل الاستعلام وتصديرات أدوات التصميم استخدام العقد نفسه دون إعادة تسمية الأعمدة. تُقرَّب الحقول العشرية الاختيارية مثل h وs وl إلى عدد ثابت من الخانات العشرية حتى لا تنحرف مقارنات JSON على محركات JavaScript مختلفة. اجمع بين التشغيل المجاني في المتصفح على هذه الصفحة وAPI المدفوعة عندما تحتاج إلى اللوحة نفسها داخل خط أنابيب آلي، أو خطوة نشر حزمة سمة، أو مُهيّئ متعدد المستأجرين للعلامة البيضاء يجب ألا يغيّر درجات اللون بصمت بين عمليات النشر.
أين تندرج اللوحات الرباعية في عمل المنتج والعلامة التجارية وواجهة المستخدم
يستدعي المهندسون العقد نفسه من النصوص البرمجية لتوليد خصائص CSS مخصصة، وخرائط سمات Tailwind، وJSON لرموز التصميم، وملفات مرجعية ل Storybook حتى تشترك كل بيئة في الدرجات الأربع نفسها. يعمل هذا العمل بالكامل داخل متصفحك في هذه الصفحة؛ ومن خلال API يكلّف كل استعلام ناجح $0.002، ولا يُفرض رسم على التحقق الفاشل، ولا يُخزَّن شيء بعد إعادة الاستجابة. هذا الفصل — الاستكشاف التفاعلي المجاني وواجهة برمجية مدفوعة مطابقة — يتوافق مع بقية كتالوج KIT من الفئة tier A ويتيح لك الانتقال من استكشاف في Figma إلى ملف سمة إنتاجي دون تغيير النتيجة الرياضية.
حالات التكامل
رموز التصميم وسمات CSS
ولّد مصفوفتَي hexes وhues قابلتين لإعادة الإنتاج لمتغيرات CSS وخرائط Tailwind وJSON رموز التصميم المحفوظة في git.
أسئلة تقنية
كم يكلّف مولّد نظام الألوان الرباعي؟
هو مجاني في متصفحك على هذه الصفحة. عبر API يكلّف الطلب الناجح $0.002؛ ولا تُفرض رسوم على المدخلات غير الصالحة.