Pretvorba barve med RGB, HSL in heksadecimalno

Delo z barvami na spletu vključuje nenehno žongliranje med več zapisi. Pretvornik barv se izogne ročnim napakam in vam omogoča takojšen preklop iz enega formata v drugega glede na kontekst uporabe. Vsak format ima svoje prednosti in vedeti, katerega uporabiti, je eden od refleksov front-end razvijalca.

Tukaj so tipične uporabe, ki motivirajo barvno pretvorbo:

• RGB je izviren v CSS in JavaScript, berejo ga ljudje, da razumejo prevlado (rdeči, zeleni, modri kanali na 0–255).
• HSL naredi spreminjanje odtenka nepomembno: samo prilagodite nasičenost ali svetlost brez ponovnega izračuna vsakega kanala.
• HEX je kanonična oblika za kopiranje in lepljenje: šest znakov, združljivih povsod, idealno za modele Figma, Sketch ali slogovne vodnike.
• Pretvorbe HEX v RGB, RGB v HEX, HEX v HSL in njihove recipročne vrednosti so najpogostejše operacije v CSS in JavaScript.

RGB in RGBA (rdeča, zelena, modra, alfa)

Vsak kanal je kodiran kot celo število med 0 in 255, kar ustreza enemu bajtu na komponento in daje 16.777.216 možnih barv. Kanal alfa RGBA se giblje od 0 (prozorno) do 1 (neprozorno) in nadzoruje prosojnost.

.button {
    barva ozadja: rgb(20, 0, 182);
    barva obrobe: rgba(20, 0, 182, 0,5);
}

HEX in HEX8 (šestnajstiški zapis)

Zelo priljubljena kompaktna oblika: #RRGGBB s šestimi znaki, kjer vsak par predstavlja kanal RGB z osnovo 16. Različica #RRGGBBAA z osmimi znaki doda kanal alfa v šestnajstiški obliki (00 prozoren, FF neprozoren). Obstaja tudi kratek zapis #RGB: #F53 je enakovreden #FF5533.

.title { barva: #1400B6; }
.shadow { barva: #1400B680; } /* alfa 50 % */
.accent { barva: #F53; } /* kratka oblika */

HSL in HSLA (Hue, Saturation, Lightness, Alpha)

HSL opisuje barvo zaznavno. Odtenek je kot na barvnem kolesu (0 do 360°), Nasičenost in Svetlost sta odstotka. To je prednostna oblika za ustvarjanje variacij: osvetlitev gumba, nad katerim lebdite, razbarvanje deaktiviranega stanja, ustvarjanje koherentne palete s spreminjanjem samo odtenka.

$primarni: hsl(247, 100%, 36%);
$primarni-hover: hsl(247, 100%, 46%);   /* bolj jasno */
$primarno utišano: hsl(247, 30%, 36%);    /* manj nasičeno */

Drugi obstoječi formati

CMYK (Cyan, Magenta, Yellow, Key) se uporablja pri tiskanju: opisuje barvo z odštevanjem črnil in ni ustrezen na zaslonu. OKLCH in LAB sta zaznavno enotna prostora, ki sta se pojavila v barvni ravni CSS 4; omogočajo boljši nadzor nad občuteno svetlostjo. To orodje se osredotoča na pretvorbe RGB, HEX in HSL, ki pokrivajo veliko večino spletnih potreb.

HEX v RGB pomeni razčlenjevanje niza v parih znakov in interpretacijo vsakega para kot celega števila z osnovo 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 v HEX je obratna operacija: vsak kanal se pretvori v osnovo 16, dopolni z dvema znakoma in nato poveže.

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

RGB v HSL je bolj algoritemski. Kanale normaliziramo med 0 in 1, izračunamo min in max, da sklepamo o svetlosti, nato nasičenosti in nato odtenku glede na prevladujoči kanal. Celotna formula je dokumentirana v specifikaciji CSS Color Module Level 3.

Orodje deluje v obeh smereh med RGB, HEX in HSL. Če želite izvesti pretvorbo:

1. Izberite obliko vnosa: RGB, HEX ali HSL.
2. Vnesite vrednost (na primer #1400B6, rgb(20, 0, 182) ali hsl(247, 100%, 36%)).
3. Začni pretvorbo: ustrezniki v drugih dveh oblikah se prikažejo takoj.
4. Kopirajte želeni rezultat z uporabo namenskega gumba in ga prilepite v svoj slogovni list ali postavitev.

Izračun se izvede na strani brskalnika, podatki se ne pošljejo strežniku.

• Spletno oblikovanje in CSS: pridobite HEX iz makete in pridobite enakovreden HSL za ustvarjanje lebdenja ali aktivnega stanja brez odstopanja od odtenka.
• Vizualna identiteta in paleta: zavrnite primarno barvo v več različicah (svetla, temna, utišana) z igranjem na svetlost ali nasičenost HSL.
• Ilustracije in grafike: prenesite barvo zaslona (RGB) v šestnajstiško kodo za prenos programski opremi ali odjemalcu.
• Dostopnost: pretvorite v format RGB, da nato izračunate kontrastno razmerje (WCAG AA zahteva 4,5:1 za običajno besedilo) z barvo ozadja.
• Spremenljivke in predprocesorji CSS: Vstavite oblikovalske žetone v datoteko SASS ali temo Tailwind iz ene same referenčne barve.

Nekaj popolnih pretvorb za ponazoritev ujemanja med tremi formati:

#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%)

Z 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)

Kakšna je razlika med HEX in HEX8?

Klasični HEX kodira tri kanale RGB s šestimi znaki (#RRGGBB). HEX8 doda dva znaka za kanal alfa (#RRGGBBAA), ki pomaga upravljati preglednost v enem nizu. #1400B6FF in #1400B6 vizualno dajeta enako barvo, neprozorno.

Ali bi morali imeti v CSS raje HSL ali RGB?

Pri upodabljanju sta enakovredni. HSL je bolj izrazit za generiranje koherentne palete ali različic stanja (lebdenje, fokus), ker spremenimo en sam zaznavni parameter. RGB ostaja praktičen pri delu s podatki s platna ali senzorja.

Zakaj moj HEX daje drugačen odtenek od pričakovanega?

Trije pogosti vzroki: zmeda med kratkim #RGB in dolgim #RRGGBB (znaki so podvojeni, niso povezani), napaka pri kopiranju znaka ali prikaz na neumerjenem zaslonu. Preverite tudi, da vaš CSS ne prekriva nadrejene motnosti, ki spremeni končno upodabljanje.

Za kaj se uporablja alfa kanal RGBA in HSLA?

Kanal alfa nadzoruje motnost barve, od 0 (popolnoma prozorno) do 1 (popolnoma neprozorno). Uporaben je za prekrivanja, sence, onemogočena stanja ali prekrivanja slik. Za razliko od lastnosti CSS opacity, RGBA in HSLA vplivata le na ciljno barvo in ne na njene podrejene.

Ali lahko pretvorimo barvo brez izgube natančnosti?

Med RGB in HEX je pretvorba natančna, oba formata kodirata iste informacije na 24 bitov. Pretvorba v HSL vključuje zaokroževanje odtenka, nasičenosti in svetlosti; povratno potovanje RGB > HSL > RGB lahko torej vrne vrednost, zamaknjeno za eno enoto na določenih kanalih.

Zakaj uporabljati spletni pretvornik namesto interne funkcije?

Za enkratni preizkus naredite prototip palete ali hitro preverite HEX ekvivalent barve HSL, pridobljene iz modela, spletni pretvornik je takojšnji. Za ponavljajoče se programske potrebe ostaja primernejša knjižnica, kot je color, chroma-js ali tinycolor2.