Generator de paletă de culori

Cum folosești generatorul de paletă de culori

1. Alege o Culoare de bază cu eșantionul de culoare sau scrie orice cod în Codul culorii de bază (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), un nume CSS…).
2. Alege o Armonie: Complementară, Analogă, Triadică, Complementară divizată, Tetradică (dreptunghi), Pătrat sau Monocromă.
3. Alege Cercul cromatic: HSL (clasic) sau OKLCH (perceptual). Paleta se actualizează la fiecare modificare; Generează paleta o reîmprospătează și el.
4. Copiază o singură culoare cu butonul Copiază de sub eșantion sau alege un format la Exportă ca (Listă HEX, Variabile CSS, Variabile SCSS, Listă JSON sau Culori Tailwind) și folosește Copiază sau Descarcă pentru întreaga paletă.

Fiecare eșantion afișează codul HEX în negru sau alb, în funcție de ce contrastează mai bine, și poziția lui față de culoarea de bază (de exemplu +120°).

Armoniile cromatice

Armoniile cromatice sunt unghiuri fixe pe cercul cromatic. Pornind de la nuanța ta de bază, instrumentul rotește nuanța și păstrează saturația și luminozitatea culorii de bază.

• Complementară (0°, 180°): culoarea opusă. Contrast maxim, excelentă pentru un buton de îndemn la acțiune pe lângă culoarea principală a brandului.
• Analogă (−60°, −30°, 0°, +30°, +60°): culori vecine pe cerc. Combinații calme, naturale, potrivite pentru fundaluri și ilustrații.
• Triadică (0°, 120°, 240°): trei nuanțe egal distanțate. Vioaie și echilibrată; de obicei o culoare domină, iar celelalte două sunt accente.
• Complementară divizată (0°, 150°, 210°): cele două culori vecine complementarei. Contrast puternic, cu mai puțină tensiune decât o pereche complementară pură.
• Tetradică (dreptunghi) (0°, 60°, 180°, 240°): două perechi complementare. Palete bogate, care au nevoie de o culoare dominantă ca să rămână coerente.
• Pătrat (0°, 90°, 180°, 270°): patru nuanțe egal distanțate.
• Monocromă: o singură nuanță în cinci trepte de luminozitate, de la închis la deschis. Ideală pentru stări de interfață, grafice și designuri discrete.

Cerc HSL sau OKLCH?

Cercul HSL (clasic) este cel tradițional, folosit de majoritatea instrumentelor de design și a tutorialelor. Dezavantajul lui este că unghiuri egale nu arată la fel de luminoase: galbenul de la 60° pare mult mai deschis decât albastrul de la 240° la aceeași luminozitate HSL.

Cercul OKLCH (perceptual) rotește nuanța în modelul de culoare Oklab, conceput astfel încât luminozitatea să pară constantă. Paletele construite pe el au culori cu greutate vizuală asemănătoare, ceea ce ajută la un contrast accesibil. Unele culori rotite pot ieși din gama pe care o poate afișa un ecran; instrumentul le reduce atunci ușor cromaticitatea ca să rămână afișabile.

Cum folosești paleta exportată

Variabilele CSS produc un bloc :root cu --color-1, --color-2… pe care îl poți lipi într-o foaie de stil. Variabilele SCSS dau linii de tipul $color-1: …;, Lista JSON dă o listă de șiruri HEX pentru scripturi, iar Culorile Tailwind dau un obiect colors cu cheile 100, 200, 300… pe care îl lipești în configurația Tailwind.

Înainte să publici, verifică contrastul textului: o armonie garantează nuanțe plăcute, nu text lizibil. Folosește neutre închise sau deschise pentru textul de bază și păstrează culorile saturate ale paletei pentru accente, butoane și grafice.