طريقة الاستخدام
- 1أدخل اللون الأساسي بمنتقي الألوان أو بصيغة HEX/RGB، أو اضغط «لون عشوائي» للإلهام.
- 2اختر نموذج الألوان: OKLCH يحافظ على تساوي الإضاءة المدركة، وHSL يستخدم عجلة الألوان التقليدية.
- 3استعرض اللوحات المتكاملة والمتجاورة والثلاثية والمتكاملة المنقسمة والرباعية والمربعة وأحادية اللون، وانقر على أي عينة لتجعلها اللون الأساسي الجديد.
- 4اضغط «صدّر هذه اللوحة» وانسخها كمتغيرات CSS أو قائمة HEX، وافتح أداة فحص التباين لاختبار أزواج النص والخلفية.
أنواع تناسق الألوان
يستخدم التناسق المتكامل لونين متقابلين على العجلة (180°) فيعطي تباينًا قويًا. ويجمع التناسق المتجاور ألوانًا متجاورة (±30°) فيبدو هادئًا وطبيعيًا. ويقسم التناسق الثلاثي العجلة إلى ثلاثة ألوان بفارق 120°، بينما يأخذ المتكامل المنقسم جاري اللون المقابل (150° و210°) لتوازن ألطف. أما التناسق الرباعي (المستطيل) والمربع فيمنحان لوحات غنية من أربعة ألوان، وتعتمد اللوحة أحادية اللون على درجات أفتح وأغمق من اللون نفسه.
HSL أم OKLCH؟
عند تدوير درجة اللون في HSL تتغير الإضاءة المدركة كثيرًا، فيبدو الأصفر أفتح بكثير من الأزرق رغم تساوي التشبع والإضاءة. أما OKLCH فنموذج إدراكي يثبت الإضاءة والكروما أثناء تدوير الدرجة، فتبدو اللوحة أكثر توازنًا. الألوان التي تخرج عن نطاق sRGB تُعاد إليه بخفض الكروما. استخدم HSL لنتائج قريبة من عجلة الرسامين التقليدية، وOKLCH للوحات الواجهات والعلامات التجارية.
التباين وسهولة الوصول
يظهر تحت كل عينة معدل التباين وفق WCAG مع نص أبيض (◻) وأسود (◼): 4.5:1 فأكثر يحقق مستوى AA للنص العادي (أخضر)، ومن 3:1 إلى 4.5:1 يصلح للنص الكبير فقط (أصفر)، وما دون ذلك ضعيف للنص (أحمر). إذا كانت اللوحة لموقع ويب فافحص أزواج النص والخلفية الفعلية في أداة فحص التباين. تتم جميع الحسابات داخل متصفحك.
الأسئلة الشائعة
كيف أجد اللون المكمل؟
بتدوير درجة اللون 180° على عجلة الألوان. تقوم الأداة بذلك بنموذج HSL أو OKLCH وتعطيك قيمة HEX.
ما الألوان التي تتناسق معًا؟
الألوان الواقعة بزوايا محددة على العجلة: المتقابلة (متكاملة)، والمتجاورة (متجاورة)، وبفارق 120° (ثلاثية)، أو 90° (مربعة). واللوحات أحادية اللون متناسقة دائمًا.
هل يمكنني تصدير اللوحة إلى CSS؟
نعم. اضغط «صدّر هذه اللوحة» واختر متغيرات CSS ثم انسخ، فتحصل على كتلة :root بمتغيرات --color-…، كما تتوفر قائمة HEX.
هل تُظهر الأداة كيف تختلط الدهانات؟
لا، فهي تعمل على ألوان الشاشة (RGB). لمعرفة كيف تختلط الأصباغ الحقيقية استخدم أداة خلط الألوان.
النتائج غير مرضية؟
تواصل مع Webin Agency لمواقع سريعة متوافقة مع السيو، ومتاجر إلكترونية، وإدارة إعلانات Google.