Konverzija boje između RGB, HSL i heksadecimalne

Rad s bojom na webu uključuje stalno žongliranje između nekoliko zapisa. Pretvarač boja izbjegava ručne pogreške i omogućuje trenutno prebacivanje s jednog formata na drugi, ovisno o kontekstu korištenja. Svaki format ima svoje prednosti, a znati koji koristiti jedan je od refleksa front-end programera.

Evo tipičnih upotreba koje motiviraju pretvorbu boja:

• RGB izvorni je u CSS-u i JavaScriptu, čitljiv je ljudima kako bi razumjeli dominantu (crveni, zeleni, plavi kanali na 0-255).
• HSL čini promjenu nijanse trivijalnom: samo podesite zasićenost ili svjetlinu bez ponovnog izračunavanja svakog kanala.
• HEX je kanonski format za kopiranje i lijepljenje: šest znakova, kompatibilan posvuda, idealan za Figma, Sketch modele ili stilske vodiče.
• Konverzije HEX u RGB, RGB u HEX, HEX u HSL i njihove recipročne vrijednosti najčešće su operacije u CSS-u i JavaScriptu.

RGB i RGBA (crvena, zelena, plava, alfa)

Svaki kanal je kodiran kao cijeli broj između 0 i 255, što odgovara jednom bajtu po komponenti i daje 16.777.216 mogućih boja. RGBA alfa kanal kreće se od 0 (proziran) do 1 (neproziran) i kontrolira prozirnost.

.gumb {
    boja pozadine: rgb(20, 0, 182);
    boja obruba: rgba(20, 0, 182, 0,5);
}

HEX i HEX8 (heksadecimalni zapis)

Vrlo popularan kompaktni format: #RRGGBB od šest znakova, gdje svaki par predstavlja RGB kanal u bazi 16. Varijanta #RRGGBBAA od osam znakova dodaje alfa kanal u heksadecimalnom obliku (00 proziran, FF neproziran). Kratka oznaka #RGB također postoji: #F53 je ekvivalent #FF5533.

.naslov { boja: #1400B6; }
.shadow { boja: #1400B680; } /* alfa 50% */
.akcent { boja: #F53; } /* kratki oblik */

HSL i HSLA (boja, zasićenost, svjetlina, alfa)

HSL perceptivno opisuje boju. Nijansa je kut na kotaču boja (0 do 360°), Zasićenost i Svjetlina su postoci. Ovo je preferirani format za generiranje varijacija: osvjetljavanje gumba nad kojim lebdi, desaturacija deaktiviranog stanja, stvaranje koherentne palete mijenjanjem samo nijanse.

$primarni: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* jasnije */
$primarni-prigušeni: hsl(247, 30%, 36%);    /* manje zasićen */

Ostali postojeći formati

CMYK (Cyan, Magenta, Yellow, Key) koristi se u ispisu: opisuje boju oduzimanjem tinti i nije relevantan na ekranu. OKLCH i LAB perceptivno su uniformni prostori koji su se pojavili u CSS razini boja 4; omogućuju bolju kontrolu osvjetljenja. Ovaj se alat fokusira na RGB, HEX i HSL pretvorbe, koje pokrivaju veliku većinu web potreba.

HEX u RGB predstavlja raščlanjivanje niza u parovima znakova i tumačenje svakog para kao cijelog broja s bazom 16:

const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB u HEX je obrnuta operacija: svaki kanal se pretvara u bazu 16, dopunjuje u dva znaka, a zatim spaja.

const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB u HSL je više algoritamski. Normaliziramo kanale između 0 i 1, izračunavamo min i max kako bismo zaključili svjetlinu, zatim zasićenost, a zatim nijansu prema dominantnom kanalu. Potpuna formula dokumentirana je u specifikaciji CSS Color Module Level 3.

Alat radi u oba smjera između RGB, HEX i HSL. Da biste izvršili pretvorbu:

1. Odaberite format unosa: RGB, HEX ili HSL.
2. Unesite vrijednost (na primjer #1400B6, rgb(20, 0, 182) ili hsl(247, 100%, 36%)).
3. Pokrenite pretvorbu: ekvivalenti u druga dva formata prikazuju se odmah.
4. Kopirajte željeni rezultat pomoću namjenskog gumba i zalijepite ga u svoju tablicu stilova ili izgled.

Izračun se vrši na strani preglednika, podaci se ne šalju poslužitelju.

• Web dizajn i CSS: dohvatite HEX iz makete i nabavite ekvivalentni HSL za generiranje lebdenja ili aktivnog stanja bez odstupanja od nijanse.
• Vizualni identitet i paleta: odbijte primarnu boju u nekoliko varijacija (svijetla, tamna, prigušena) igrajući na svjetlini ili HSL zasićenosti.
• Ilustracije i grafike: transponirajte boju zaslona (RGB) u heksadecimalni kod za prijenos softveru ili klijentu.
• Pristupačnost: pretvorite u RGB format kako biste izračunali omjer kontrasta (WCAG AA zahtijeva 4,5:1 za normalan tekst) s bojom pozadine.
• CSS varijable i predprocesori: unesite tokene dizajna u SASS datoteku ili temu Tailwind iz jedne referentne boje.

Neke potpune pretvorbe za ilustraciju korespondencije između tri formata:

#1400B6 -> rgb(20, 0, 182) -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51) -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113) -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15) -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0) -> hsl(0, 0%, 0%)

S alfa kanalom:

#1400B680 -> rgba(20, 0, 182, 0,50) -> hsla(247, 100%, 36%, 0,50)
#FF5733CC -> rgba(255, 87, 51, 0,80) -> hsla(11, 100%, 60%, 0,80)

Koja je razlika između HEX i HEX8?

Klasični HEX kodira tri RGB kanala preko šest znakova (#RRGGBB). HEX8 dodaje dva znaka za alfa kanal (#RRGGBBAA), što pomaže u upravljanju transparentnošću u jednom nizu. #1400B6FF i #1400B6 vizualno daju istu boju, neprozirnu.

Trebamo li preferirati HSL ili RGB u CSS-u?

Dva su ekvivalentna u prikazivanju. HSL je izražajniji za generiranje koherentne palete ili varijanti stanja (lebdjenje, fokus), jer mijenjamo jedan perceptivni parametar. RGB ostaje praktičan pri radu s podacima s platna ili senzora.

Zašto moj HEX daje drugačiju nijansu od očekivane?

Tri uobičajena uzroka: zabuna između kratkog #RGB i dugog #RRGGBB (znakovi su duplicirani, nisu spojeni), pogreška kopiranja na znaku ili prikaz na nekalibriranom zaslonu. Također provjerite da vaš CSS ne prekriva nadređenu neprozirnost koja mijenja konačno prikazivanje.

Za što se koristi alfa kanal RGBA i HSLA?

Alfa kanal kontrolira neprozirnost boje, od 0 (potpuno prozirno) do 1 (potpuno neprozirno). Korisno je za preklapanja, sjene, onemogućena stanja ili preklapanja slika. Za razliku od svojstva CSS opacity, RGBA i HSLA utječu samo na ciljanu boju, a ne na njezine potomke.

Možemo li pretvoriti boju bez gubitka preciznosti?

Između RGB i HEX konverzija je točna, oba formata kodiraju iste informacije na 24 bita. Pretvorba u HSL uključuje zaokruživanje nijansi, zasićenosti i svjetline; povratno putovanje RGB > HSL > RGB stoga može vratiti vrijednost pomaknutu za jednu jedinicu na određenim kanalima.

Zašto koristiti mrežni pretvarač umjesto interne funkcije?

Za jednokratni test, napravite prototip palete ili brzo provjerite HEX ekvivalent HSL boje izdvojene iz modela, mrežni pretvarač je odmah dostupan. Za programsku potrebu koja se ponavlja, biblioteka kao što je color, chroma-js ili tinycolor2 ostaje prikladnija.