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

مولد الألوان المتجانسة

أدخل لوناً أساسياً وزاوية لتحصل على جاريه في دائرة الألوان: اللون #3366cc مع 30 درجة يعطي #33b2cc و#4c33cc بنفس التشبع والإضاءة، فتنشأ عائلة من ثلاثة ألوان منسجمة للواجهات والعلامات التجارية. مجاناً في متصفحك.

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

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

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

مثال محلول

إذا أدخلت

اللون: #3366cc
الزاوية: 30

تحصل على

اللوحة: #33b2cc, #3366cc, #4c33cc

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

كيف تعمل إزاحات الصبغة المتجانسة

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

ويتشكّل الجاران المتجانسان بنقل الصبغة إلى صبغة الأساس ناقص الزاوية وصبغة الأساس زائد الزاوية، مع الالتفاف عبر الصفر عندما يعبر المسار حافة الأحمر في العجلة، وترك التشبع والإضاءة دون تغيير حتى تبقى العائلة في نطاق الصفاء والقيمة نفسه. ثم تُحوَّل كل ثلاثية HSL ناتجة عائدةً إلى RGB صحيحًا بالمسار نفسه من الصبغة إلى RGB المستخدم في وحدات ألوان المتصفح، ثم تُنسَّق بصيغة سداسية عشرية صغيرة الأحرف وسلسلة rgb() وسلسلة hsl().

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

أرسل حقل color إلزاميًا كسلسلة سداسية عشرية وحقل angle إلزاميًا كعدد منتهٍ من الدرجات. والصيغ اللونية الصالحة هي ثلاثة أو ستة أرقام سداسية عشرية مع رمز # اختياري في المقدمة؛ وتُتجاهل حالة الأحرف ويُطبَّع الناتج دائمًا إلى صيغة سداسية من ستة أرقام صغيرة الأحرف مع الرمز #. ويجب أن تكون الزاوية أكبر من الصفر ولا تتجاوز 180 حتى يبقى الجاران متميزين ولا ينهارا في قلبٍ بزاوية 180 على نمط التكامل الذي يعبّر عن قصد تناغم مختلف.

ومن الفحوص النموذجية أزرق متوسط #3366cc بزاوية ثلاثين درجة لعائلة باردة تقليدية، وأحمر نقي #ff0000 بثلاثين درجة لجارين برتقالي دافئ وأرجواني، وسداسي قصير من ثلاثة أرقام لتأكيد التوسيع.

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

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

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

وإذا احتجت لاحقًا إلى مخططات متكاملة أو ثلاثية، أو إلى تحويل HSL إلى RGB وحده، أو البحث عن أقرب لون مسمّى في CSS، أو فحوص تباين WCAG، فعاملها كنوايا بحث وصفحات هبوط منفصلة بدلًا من إثقال صفحة مولد الألوان المتجانسة هذه.

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

رموز العلامة الثانوية والثالثية

اشتق صبغتين مجاورتين للعلامة من سداسي أساسي وزاوية ثابتة حتى تبقى أدلة الأسلوب وأنظمة التصميم متسقة عبر واجهات التسويق والمنتج.

لوحات سمات الواجهة وسلاسل المخططات

ولّد متغيرات CSS متسقة أو ألوان سلاسل مخططات من بذرة واحدة دون التوتر العالي التباين للأزواج المتكاملة.

تمارين نظرية الألوان وورش العمل

دع الطلاب يدخلون قيمة سداسية ويجربون إزاحات 30° و45° و60° ليروا كيف تتنقل العائلات المتجانسة حول العجلة مع تثبيت التشبع والإضاءة.

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

ما لوحة الألوان المتجانسة؟

اللوحة المتجانسة ثلاثة ألوان (أو أكثر) تقع متجاورة على عجلة الصبغة. وتبني هذه الأداة بالضبط جارين للون الأساس بإزاحة الصبغة ±الزاوية مع تثبيت التشبع والإضاءة.

أي زاوية ينبغي أن أستخدم؟

ثلاثون درجة هي العائلة المتقاربة التقليدية المستخدمة في كثير من أنظمة التصميم. والقيم الأكبر مثل 45 أو 60 تفتح فصلًا أوسع؛ والنطاق المقبول أكبر من 0 ولا يتجاوز 180 درجة.

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

السداسي العشري في CSS فقط: ‎#rgb أو ‎#rrggbb، مع رمز # في المقدمة أو بدونه.

هل يغيّر المولد التشبع أو الإضاءة؟

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

لماذا لا يمكن أن تتجاوز الزاوية 180 درجة؟

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

أدوات ذات صلة

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

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

الـEndpoint

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

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

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

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

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

import os, requests

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

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

body := bytes.NewBufferString(`{"color":"#3366cc","angle":30}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/analogous", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

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

{
  "color": "#3366cc",
  "angle": 30
}

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

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

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

كيف تعمل إزاحات الصبغة المتجانسة

ويعيد الرد أيضًا لون الأساس المنقّح والزاوية الرقمية وعينات مسمّاة base وanalogous_minus وanalogous_plus، ومصفوفة palette من ثلاثة عناصر مرتبة من الناقص الأبرد عبر الأساس إلى الزائد الأدفأ بالنسبة إلى اتجاه الإزاحة، وحقل formula موجزًا للتوثيق وتنقيح الأخطاء. والصيغ السداسية ذات قناة ألفا والأحرف غير السداسية واللون المفقود والزاوية المفقودة وNaN وInfinity والزاوية الصفرية والزوايا فوق 180 كلها تُرفض بـ invalid_input.

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

ويقبل حقل color أيضًا الاسمين البديلين hex وbase حتى يتمكن JSON السمات القائم الذي يخزن مفتاحي hex أو base من استدعاء العقد نفسه دون خطوة إعادة تسمية. وعند النجاح يتضمن الحمولة color بوصفه السداسي الأساسي المطبَّع، وangle منقّحة من أجل JSON مستقر، وbase مع الدور والحقول hex وr وg وb وh وs وl وrgb وhsl، وanalogous_minus وanalogous_plus بشكل العينة نفسه، وpalette كثلاث سلاسل سداسية، وpalette_hsl كثلاثة كائنات h وs وl، وformula يصف مسار RGB إلى HSL إلى الإزاحة. وتسعير استدعاءات API الناجحة هو الأساس المنشور $0.002 لكل عنصر؛ وحالات فشل التحقق لا تستهلك الرصيد المدفوع مسبقًا.

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

ولأن هذه القدرة محرك parse نقي، فإن تسعير API هو الأساس المنشور $0.002 لكل عنصر ناجح، وفشل التحقق لا يستهلك الرصيد.

أسئلة تقنية

كم التكلفة؟

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

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

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

مثال محلول

كيف تعمل إزاحات الصبغة المتجانسة

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

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

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

رموز العلامة الثانوية والثالثية

لوحات سمات الواجهة وسلاسل المخططات

تمارين نظرية الألوان وورش العمل

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

أدوات ذات صلة

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

الـEndpoint

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

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

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

الأسعار

الأخطاء

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

كيف تعمل إزاحات الصبغة المتجانسة

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

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

أسئلة تقنية

شكرًا