Paletă de culori din imagine

Cum folosești paleta în CSS

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

:root {
  --culoare-1: #1e3a8a; /* 34% */
  --culoare-2: #c2410c; /* 22% */
  --culoare-3: #fbbf24; /* 12% */
}

.antet { background: var(--culoare-1); color: #ffffff; }
.buton { background: var(--culoare-2); color: #ffffff; }

.card {
  background: color-mix(in srgb, var(--culoare-1) 12%, white);
  border-color: color-mix(in srgb, var(--culoare-1) 40%, white);
}
.buton:hover {
  background: color-mix(in srgb, var(--culoare-2) 85%, black);
}

.suprapunere {
  background: rgb(30 58 138 / 0.6);
}

Cum folosești extractorul de culori

1. Alege o imagine sau trage-o în zona de sus. Până atunci vezi paleta unei imagini de exemplu.
2. Setează câte culori vrei (între 2 și 10) și ordinea: după cât ocupă în imagine sau de la închis la deschis.
3. Dă clic pe un cod HEX sau RGB ca să-l copiezi. Dă clic pe imagine ca să afli culoarea exactă a punctului; în Chrome și Edge ai și o pipetă pe tot ecranul.
4. Alege formatul (HEX, RGB, HSL) și prefixul, apoi copiază variabilele CSS. Imaginea rămâne în browser; nu se trimite nimic către server.

Cum sunt alese culorile

Imaginea este micșorată la cel mult 120 de pixeli pe latură, iar pixelii aproape transparenți sunt lăsați deoparte. Apoi algoritmul k-means grupează pixelii asemănători și calculează culoarea medie a fiecărui grup. Procentul arată cât din imagine ocupă grupul. Culorile sunt medii, deci pot fi puțin diferite de orice pixel anume; pentru o nuanță exactă folosește pipeta.

:root {
  --culoare-1: #1e3a8a; /* 34% */
  --culoare-2: #c2410c; /* 22% */
  --culoare-3: #14532d; /* 18% */
}

.buton {
  background: var(--culoare-2);
  color: #ffffff;
}

De la paletă la design

Culorile care ocupă mult (cerul, fundalul) sunt bune pentru fundaluri, iar cele puține și saturate pentru accente și butoane. Verifică mereu contrastul dintre text și fundal; pentru text normal, WCAG cere un raport de cel puțin 4,5:1.

Întrebări frecvente

De ce primesc culori ușor diferite la fiecare imagine asemănătoare?

Culorile sunt medii ale unor grupuri de pixeli. Dacă imaginea se schimbă puțin, grupurile se schimbă și ele. Pentru aceeași imagine și același număr de culori, rezultatul este mereu același.

Pipeta pe tot ecranul nu apare. De ce?

Folosește EyeDropper API, care există în Chrome, Edge și Opera pe calculator. În Firefox și Safari folosește clicul pe imagine.