Generator paletă de culori pentru CSS

Exemple de palete de culori

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

:root {
  --primary-50: #f4f7fe;
  --primary-100: #e9effd;
  --primary-200: #c9d8fa;
  --primary-300: #a8c1f7;
  --primary-400: #6692f1;
  --primary-500: #2563eb;
  --primary-600: #1f54c8;
  --primary-700: #1a45a5;
  --primary-800: #143681;
  --primary-900: #0f285e;
}

:root {
  --green-50: #f3faf6;
  --green-100: #e8f6ed;
  --green-200: #c5e8d2;
  --green-300: #a2dab7;
  --green-400: #5cbf80;
  --green-500: #16a34a;
  --green-600: #138b3f;
  --green-700: #0f7234;
  --green-800: #0c5a29;
  --green-900: #09411e;
}

:root {
  --orange-50: #fff8f3;
  --orange-100: #fef1e8;
  --orange-200: #fedcc5;
  --orange-300: #fdc7a2;
  --orange-400: #fb9d5c;
  --orange-500: #f97316;
  --orange-600: #d46213;
  --orange-700: #ae510f;
  --orange-800: #893f0c;
  --orange-900: #642e09;
}

:root {
  --violet-50: #f8f5fe;
  --violet-100: #f2ebfd;
  --violet-200: #decefb;
  --violet-300: #cbb0f8;
  --violet-400: #a375f2;
  --violet-500: #7c3aed;
  --violet-600: #6931c9;
  --violet-700: #5729a6;
  --violet-800: #442082;
  --violet-900: #32175f;
}

:root {
  --pink-50: #fdf4f8;
  --pink-100: #fbe9f1;
  --pink-200: #f6c9dd;
  --pink-300: #f1a9c9;
  --pink-400: #e668a0;
  --pink-500: #db2777;
  --pink-600: #ba2165;
  --pink-700: #991b53;
  --pink-800: #781541;
  --pink-900: #581030;
}

:root {
  --gray-50: #f7f8f9;
  --gray-100: #f0f1f3;
  --gray-200: #d8dce2;
  --gray-300: #c1c7d1;
  --gray-400: #939eae;
  --gray-500: #64748b;
  --gray-600: #556376;
  --gray-700: #465161;
  --gray-800: #37404c;
  --gray-900: #282e38;
}

Cum folosești generatorul de paletă de culori

1. Alege culoarea de bază din selector.
2. Alege tipul de armonie: complementară, analoagă, triadică, complementară divizată, tetradică sau monocromă.
3. Scrie numele variabilei, de exemplu primary; el apare în toate denumirile din cod.
4. Alege formatul: variabile CSS, config Tailwind sau SCSS. Un clic pe orice pătrățel de culoare copiază codul HEX.

Armoniile de pe roata culorilor

Armoniile se obțin rotind nuanța (hue) culorii de bază pe roata culorilor, de 360 de grade:

• Complementară: culoarea opusă, la 180°. Contrast puternic, bună pentru un buton de acțiune.
• Analoagă: vecinele, de obicei la ±30°. Rezultat calm și unitar.
• Triadică: trei culori la câte 120°.
• Complementară divizată: în loc de opusă, cele două vecine ale ei (180° ± 30°).
• Tetradică: patru culori, două perechi de complementare.
• Monocromă: aceeași nuanță, cu luminozitate și saturație diferite.

Nuanțele de la 50 la 900

Convenția, popularizată de Tailwind CSS, numerotează nuanțele de la 50 (aproape alb) la 900 (foarte închis), iar 500 este de obicei apropiată de culoarea de bază. Folosești 50–100 pentru fundaluri, 200–300 pentru borduri, 500–600 pentru butoane și 700–900 pentru text.

Paleta ca variabile CSS

Proprietățile personalizate (custom properties) se definesc o singură dată în :root și se folosesc oriunde cu var(). Dacă schimbi culoarea, o schimbi într-un singur loc.

:root {
  --primary-50: #eff6ff;
  --primary-500: #3b82f6;
  --primary-700: #1d4ed8;
}
.buton {
  background: var(--primary-500);
}
.buton:hover {
  background: var(--primary-700);
}

Înainte să alegi combinațiile de text și fundal, verifică-le în verificatorul de contrast.

Întrebări frecvente

Pot folosi exportul Tailwind în Tailwind 4?

Exportul de tip config (theme.extend.colors) e pentru Tailwind 3. În Tailwind 4 culorile se declară în CSS, în blocul @theme, ca variabile --color-primary-500; poți porni de la exportul cu variabile CSS.

Câte culori ar trebui să aibă un site?

De obicei o culoare principală, eventual una de accent și o gamă de griuri, fiecare cu nuanțele ei. Armoniile cu trei sau patru culori sunt greu de echilibrat; folosește-le cu măsură.