ما هو عجلة الألوان؟

اختر لوناً أساسياً وشاهد أنظمة الألوان المكمّلة والمتجاورة والثلاثية والمكمّلة المنقسمة والرباعية والأحادية على عجلة تفاعلية. تعرض كل لوحة لون نسبة تباينها وفق WCAG مقابل الأبيض والأسود، ويمكنك تصدير اللوحة كاملة كنص أو كصورة PNG قابلة للمشاركة.

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

كيفية الاستخدام

1. انقر أو اسحب على عجلة الألوان لاختيار درجة اللون الأساسية، أو أدخل قيمة HEX محددة في حقل الإدخال.
2. اختر نوع التناسق (مكمّل، متجاور، ثلاثي، مكمّل منقسم، أو رباعي) لرؤية الألوان المتطابقة مُبرزة على العجلة.
3. انسخ أي لون مُولَّد بصيغة HEX أو RGB أو HSL أو CMYK أو OKLCH بالنقر على العينة. صدّر اللوحة الكاملة لاستخدامها في أدوات التصميم الخاصة بك.

متى تستخدم

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

النتيجة

يختار مصمم ويب اللون #E87040 كلون العلامة التجارية، ويتحول إلى التناسق الثلاثي، فيحصل على ثلاثة ألوان تمييز متوازنة لصفحته — بنقرة واحدة فقط.

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

ما الفرق بين التناسق المتشابه والتناسق الثلاثي؟

المتشابه يأخذ ألواناً متجاورة على العجلة (في حدود ٣٠ درجة) فيبدو هادئاً ومتوحّداً. الثلاثي يفصل ثلاثة ألوان بمسافة ١٢٠ درجة، فيعطي تبايناً عالياً وتوازناً يبعث الحيوية في التصميم.

متى أختار التكميلي بدل التكميلي المقسوم؟

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

لماذا تتغير ألوان التناسق عندما أحرّك شريط الإضاءة؟

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

هل أحصل على اللوحة كمتغيرات CSS أو بصيغة أدوات التصميم؟

اضغط أي عيّنة لنسخ HEX أو RGB أو HSL أو CMYK أو OKLCH إلى الحافظة. من هناك تذهب مباشرة إلى ملف CSS مثل --brand-primary: #E87040، أو إلى حقل hex في Figma، أو إلى إعدادات الألوان المخصّصة في Tailwind.

هل التناسق الرباعي هو نفسه التناسق المستطيل؟

نعم. الرباعي (يُسمّى أيضاً مستطيلاً) يختار أربعة ألوان تكوّن مستطيلاً على العجلة، أي زوجين تكميليّين. يعطي لوحة أغنى لكن تحتاج إلى لون مهيمن واحد وإلا انتهى التصميم بمظهر مزدحم.

أدوات ذات صلة