أداة مجانية

مولد Color Theme

إنشاء لوحات ألوان متممة وتناسقية وثلاثية وأحادية اللون من أي لون hex. قم بالتصدير إلى Tailwind ومتغيرات CSS وSCSS وMaterial UI والمزيد.

اختر لون أساسي

RGB

0, 82, 204

HSL

216°, 100%, 40%

الإعدادات المسبقة السريعة

مخططات التناسق اللوني

Two colors opposite on the color wheel — high contrast, bold pairings.

#0052CC

0,82,204

216°,100%,40%

#CC7A00

204,122,0

36°,100%,40%

الظلال والدرجات

نفس الصبغة من الأفتح إلى الأغمق — مفيد لمقاييس نظام التصميم.

#E5F0FF

229,240,255

215°,100%,95%

#B3D1FF

179,209,255

216°,100%,85%

#80B3FF

128,179,255

216°,100%,75%

#3385FF

51,133,255

216°,100%,60%

#005CE6

0,92,230

216°,100%,45%

#003D99

0,61,153

216°,100%,30%

#002966

0,41,102

216°,100%,20%

#001433

0,20,51

216°,100%,10%

تصدير الإطار

قم بتصدير مقياس اللون الخاص بك جاهزاً للصق في مشروعك.

يستخدم في أسماء المتغيرات/الفئات
brand-colors.css
@import "tailwindcss";

@theme {
  --color-brand-50: #F0F6FF;
  --color-brand-100: #DCEAFE;
  --color-brand-200: #B4D1FD;
  --color-brand-300: #74AAFB;
  --color-brand-400: #2E80FA;
  --color-brand-500: #065FE5;
  --color-brand-600: #054AB3;
  --color-brand-700: #033886;
  --color-brand-800: #02275E;
  --color-brand-900: #02193C;
  --color-brand-950: #010E23;
  --color-brand: #0052CC;
}

المقياس المُنشأ (11 steps)

جميع المخططات في لمحة

Complementary

Analogous

Triadic

Split-Complementary

Tetradic

Monochromatic

شرح التناسق اللوني

مخططات التناسق اللوني مشتقة من العلاقات بين الألوان على عجلة الألوان. الألوان المتممة متقابلة وتخلق تبايناً عالياً. الألوان المتناسقة متجاورة وتشعر بالتماسك. تستخدم المخططات الثلاثية ثلاثة ألوان متباعدة بالتساوي للتوازن النابض بالحياة.

تصدير نظام التصميم

تنشئ علامة تبويب Framework Export مقياس لون جاهز للصق لـ Tailwind CSS v3/v4 وMaterial UI وChakra UI وshadcn/ui والخصائص المخصصة CSS ومتغيرات SCSS.

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

  1. أدخل أو اختر لون hex.
  2. استعرض مخططات التناسق — متمم وتناسقي وثلاثي وغيرها.
  3. انتقل إلى Framework Export لتحميل أو نسخ المقياس لنظام التصميم الخاص بك.

تحدث جميع حسابات الألوان في متصفحك — لا يتم إرسال أي شيء إلى أي خادم.

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

ما تنسيقات الألوان المدعومة؟
يقبل الإدخال hex (#RRGGBB أو #RGB). يعرض الإخراج hex و RGB و HSL لكل لون.
هل يمكنني التصدير إلى Tailwind CSS؟
نعم. يُنشئ قسم Framework Export مقاييس ألوان Tailwind v3 و v4، بالإضافة إلى متغيرات CSS و SCSS و Material UI و Chakra UI و shadcn/ui.
هل الأداة مجانية؟
نعم، مجانية تماماً بدون الحاجة للتسجيل.

أدوات ذات صلة

Color Contrast

Check WCAG AA and AAA color contrast ratios for web accessibility

Color Converter

Convert colors between HEX, RGB, HSL, HSV, and CSS named colors instantly

CSS Gradient Generator

Build linear, radial, and conic CSS gradients visually — drag color stops, share via URL