مولّد لوحات الألوان

لوحات متكاملة ومتناظرة وثلاثية وأحادية اللون من لون واحد.

Runs in your browser — your text and files never leave your device.

Base colour

Hex value

Three- or six-digit hex, with or without the #.

Complementary

Analogous

Triadic

Tetradic

Monochromatic

Muted

Copy as CSS variables

/* Complementary */
--color-1: #6366f1;
--color-2: #f1ee63;

/* Analogous */
--color-1: #63adf1;
--color-2: #6389f1;
--color-3: #6366f1;
--color-4: #8463f1;
--color-5: #a763f1;

/* Triadic */
--color-1: #6366f1;
--color-2: #f16366;
--color-3: #66f163;

/* Tetradic */
--color-1: #6366f1;
--color-2: #f163ad;
--color-3: #f1ee63;
--color-4: #63f1a7;

/* Monochromatic */
--color-1: #0b0d75;
--color-2: #1114bb;
--color-3: #2c30ec;
--color-4: #7375f2;
--color-5: #b9baf9;

/* Muted */
--color-1: #8e8fc6;
--color-2: #7f81d5;
--color-3: #6366f1;

Click any swatch to copy its hex value.

يجري ترجمة نص الدليل الخاص بهذه الأداة. English

التصنيفات

مولّد التدرجاتأنشئ تدرجًا خطيًا أو دائريًا أو مخروطيًا وانسخ كود CSS.Open the tool

مولّد ظل CSSاضبط box-shadow مع معاينة مباشرة وانسخ الكود.Open the tool

مولّد الحواف الدائريةدائر كل زاوية على حدة وانسخ كود border-radius.Open the tool