مولّد لوحات الألوان
ولّد لوحات ألوان من لون أساسي بتناسقات متتامة ومتجاورة وثلاثية ورباعية ومربعة وأحادية اللون. ثبّت الألوان وصدّر CSS/Tailwind.
إعدادات اللوحة
درجة اللون الأساسية + الدرجة المقابلة (180°).
اقفل الألوان التي تعجبك؛ يختار زر «إعادة التوليد» لونًا أساسيًا عشوائيًا جديدًا ويحتفظ بالألوان المقفلة.
تصدير
اللوحة
:root {
--palette-1: #3b82f6;
--palette-2: #b07d00;
}أدوات ذات صلة
عرض الكلما هو مولّد لوحات الألوان؟
يبني لوحة من لون أساسي واحد بتناسقات عجلة الألوان الكلاسيكية. يمكن تدوير الصبغة بـ OKLCH الإدراكي (يُبقي الإضاءة المدركة متساوية) أو HSL الكلاسيكي. يمكن تثبيت الألوان قبل إعادة التوليد، وتُصدَّر اللوحة كمتغيرات CSS أو SCSS أو إعداد Tailwind v3 أو @theme في Tailwind v4 أو JSON.
كيفية استخدام مولّد لوحات الألوان
- أدخل اللون الأساسي (hex أو rgb() أو hsl() أو oklch()) أو انقر إعادة التوليد للون عشوائي.
- اختر التناسق اللوني وهل تُدار الصبغة في OKLCH أو HSL.
- ثبّت الألوان التي تريد إبقاءها؛ فتستبدل إعادة التوليد غير المثبتة فقط.
- انقر على عينة لنسخ قيمة hex الخاصة بها.
- اختر صيغة التصدير واسم الرمز وانسخ الكود.
مثال
Base #ff0000, Triadic, HSL
:root {
--palette-1: #ff0000;
--palette-2: #00ff00;
--palette-3: #0000ff;
} متى تستخدم مولّد لوحات الألوان
استخدمه لاستكشاف أنظمة ألوان لعلامة تجارية أو سمة واجهة أو رسم توضيحي. التناسق نقطة بداية وليس فحصاً لإمكانية الوصول: تحقق من تباين النص والخلفية على حدة. ولتوسيع لون واحد إلى سلم 50–950 استخدم مولّد Color Shades.
كيف يعمل مولّد لوحات الألوان
تدوّر التناسقات صبغة اللون الأساسي بزوايا ثابتة مع إبقاء الإشباع/الكروما والإضاءة: المتتام 0°/180° والمتجاور 0°/±30°/±60° والثلاثي 0°/120°/240° والمتتام المنقسم 0°/150°/210° والرباعي 0°/60°/180°/240° والمربع 0°/90°/180°/270°. يُبقي أحادي اللون الصبغة ويغيّر الإضاءة بمقدار −30 و−15 و0 و+15 و+30 (نسبة HSL) أو ±0.15/±0.3 (L في OKLCH). تُلاءَم ألوان OKLCH الخارجة عن sRGB بخفض الكروما. تختار إعادة التوليد أساساً عشوائياً بصبغة 0–360° وإشباع 55–85% وإضاءة 45–60%.
حالات الاستخدام الشائعة
- استكشاف ألوان العلامة التجارية من لون شعار
- ألوان مميزة لسمة واجهة
- ألوان فئات لتصور البيانات
- تصدير لوحة كخصائص CSS مخصصة
- إعداد سمة Tailwind
الأسئلة الشائعة
هل أدوّر الصبغة في OKLCH أم HSL؟
يُبقي OKLCH الإضاءة المدركة لكل الألوان متساوية فتنتج لوحات أكثر توازناً. أما HSL فيطابق عجلة الألوان الكلاسيكية في أدوات تصميم كثيرة لكن ألوانه قد تتفاوت كثيراً في السطوع.
ماذا يفعل التثبيت؟
تحتفظ العينة المثبتة بلونها عندما تغيّر اللون الأساسي أو التناسق أو تضغط إعادة التوليد.
هل اللوحات سهلة الوصول؟
لا تقول التناسقات شيئاً عن التباين. تحقق من تركيبات النص والخلفية وفق نسب تباين WCAG قبل استخدامها.