مولّد لوحات الألوان
أنشئ لوحات ألوان متناغمة انطلاقًا من أي لون أساسي. يدعم الأنظمة المكمّلة والمتشابهة والثلاثية والأحادية اللون.
Complementary
#6366F1#F1EE63Analogous
#63ADF1#6366F1#A763F1Triadic
#6366F1#F16366#66F163Split Complement
#6366F1#F1A763#ADF163Tetradic
#6366F1#F163AD#F1EE63#63F1A7Monochromatic
#0F13AC#1D21EB#6366F1#A1A3F7#D0D1FBكيفية استخدام هذه الأداة
- 1
Click the color swatch to open your system color picker, or type a 6-digit hex code like #6366F1 into the text field next to it.
- 2
Watch the six scheme rows update instantly as you change the base color.
- 3
Read the uppercase hex code shown in the bottom-left corner of each swatch and copy the ones you want into your design tool or stylesheet.
ما هو مولّد لوحات الألوان؟
تحدّد نظرية الألوان العلاقات المتناغمة وفق المواضع على عجلة الألوان. تقع الألوان المكمّلة في مواضع متقابلة (180°). والألوان المتشابهة متجاورة (30°). وتستخدم الأنظمة الثلاثية ثلاثة ألوان متساوية البُعد (120°). تحسب هذه الأداة كلًّا منها انطلاقًا من اللون الأساسي الذي تختاره، لتمنحك لوحة انطلاق مبنية على نظرية ألوان مُثبتة.
حالات الاستخدام الشائعة
Picking a primary plus accent color for a website by reading the complementary pair off your brand color.
Building a calm, unified UI background-and-card scheme from the analogous row.
Generating a 5-step monochromatic tint and shade ramp for hover, active, and disabled button states.
Sketching a data-visualization palette where triadic or tetradic colors keep series visually distinct.
Exploring logo or illustration color combinations before committing in Figma or Illustrator.
Quickly grabbing hex codes for a CSS variable set without leaving the browser.
الأسئلة الشائعة
أي نظام هو الأفضل للمواقع الإلكترونية؟▼
أدوات ذات صلة
محوّل الألوان (HEX/RGB/HSL)
حوّل الألوان بين صيغ HEX و RGB و HSL. اختر لونًا بصريًا أو أدخل القيم يدويًا.
مولّد box-shadow في CSS
أنشئ قيم box-shadow في CSS بصريًا. عاين في الوقت الفعلي وانسخ الـ CSS المولَّد.
مولّد التدرّجات اللونية في CSS
أنشئ تدرّجات CSS خطية وشعاعية. اختر الألوان بصريًا وانسخ كود CSS الناتج.
مولّد منحنيات التسارع cubic-bezier
أنشئ منحنيات تسارع (easing) بصيغة cubic-bezier لـ CSS. يتضمن إعدادات مسبقة قياسية.
مولّد border-radius في CSS
أنشئ قيم border-radius معقّدة في CSS بصريًا. تحكّم مستقل في كل زاوية.
مولّد CSS Clamp()
أنشئ قيم CSS مرنة ومتجاوبة باستخدام clamp(). تتدرّج بسلاسة بين الحدين الأدنى والأقصى عبر نطاقات إطار العرض (viewport).