Konverter en farve mellem RGB, HSL og hexadecimal

At arbejde med farve på nettet involverer konstant at jonglere mellem flere notationer. En farvekonverter undgår manuelle fejl og giver dig mulighed for øjeblikkeligt at skifte fra et format til et andet afhængigt af brugskonteksten. Hvert format har sine styrker, og at vide, hvilket man skal bruge, er en af frontend-udviklerens reflekser.

Her er de typiske anvendelser, der motiverer en farvekonvertering:

• RGB er indbygget i CSS og JavaScript, kan læses af mennesker til at forstå en dominant (røde, grønne, blå kanaler på 0-255).
• HSL gør ændring af en nuance triviel: Juster bare mætningen eller lysstyrken uden at genberegne hver kanal.
• HEX er det kanoniske format til kopiering og indsæt: seks tegn, kompatible overalt, ideel til Figma, Sketch-modeller eller stilguider.
• Konverteringerne HEX til RGB, RGB til HEX, HEX til HSL og deres gensidige er de mest almindelige operationer i CSS og JavaScript.

RGB og RGBA (rød, grøn, blå, alfa)

Hver kanal er kodet som et heltal mellem 0 og 255, hvilket svarer til en byte pr. komponent og giver 16.777.216 mulige farver. RGBA's alfakanal spænder fra 0 (gennemsigtig) til 1 (ugennemsigtig) og kontrollerer gennemsigtighed.

.button {
    baggrundsfarve: rgb(20, 0, 182);
    kantfarve: rgba(20, 0, 182, 0,5);
}

HEX og HEX8 (hexadecimal notation)

Meget populært kompakt format: #RRGGBB på seks tegn, hvor hvert par repræsenterer en RGB-kanal i base 16. Varianten #RRGGBBAA på otte tegn tilføjer alfakanalen i hexadecimal (00 transparent, FF uigennemsigtig). Den korte notation #RGB findes også: #F53 svarer til #FF5533.

.title { farve: #1400B6; }
.shadow { farve: #1400B680; } /* alfa 50 % */
.accent { farve: #F53; } /* kort form */

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

HSL beskriver farve perceptuelt. Nuance er en vinkel på farvehjulet (0 til 360°), Mætning og Lyshed er procenter. Dette er det foretrukne format til generering af variationer: lysere en knap, der svæver over, desaturation af en deaktiveret tilstand, skabe en sammenhængende palet ved kun at variere farvetonen.

$primær: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* klarere */
$primær-dæmpet: hsl(247, 30%, 36%);    /* mindre mættet */

Andre eksisterende formater

CMYK (cyan, magenta, gul, nøgle) bruges til udskrivning: den beskriver en farve ved at trække blæk fra og er ikke relevant på skærmen. OKLCH og LAB er perceptuelt ensartede rum, der optrådte i CSS-farveniveau 4; de giver bedre kontrol over den følte lysstyrke. Dette værktøj fokuserer på RGB-, HEX- og HSL-konverteringer, som dækker langt de fleste webbehov.

HEX til RGB svarer til at parse strengen i par af tegn og fortolke hvert par som et heltal på basis af 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 til HEX er den omvendte handling: hver kanal konverteres til base 16, polstres til to tegn og kædes derefter sammen.

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

RGB til HSL er mere algoritmisk. Vi normaliserer kanalerne mellem 0 og 1, vi beregner min og max for at udlede lysstyrken, derefter mætningen, derefter farvetonen i henhold til den dominerende kanal. Den fulde formel er dokumenteret i CSS Color Module Level 3-specifikationen.

Værktøjet arbejder i begge retninger mellem RGB, HEX og HSL. Sådan udfører du en konvertering:

1. Vælg inputformat: RGB, HEX eller HSL.
2. Indtast værdien (f.eks. #1400B6, rgb(20, 0, 182) eller hsl(247, 100%, 36%)).
3. Start konverteringen: ækvivalenterne i de to andre formater vises med det samme.
4. Kopiér det ønskede resultat ved hjælp af den dedikerede knap, og indsæt det i dit typografiark eller layout.

Beregningen foretages på browsersiden, ingen data sendes til en server.

• Webdesign og CSS: Hent en HEX fra en mockup og opnå den tilsvarende HSL for at generere en hover eller aktiv tilstand uden at afvige fra nuancen.
• Visuel identitet og palet: Afvis en primær farve i flere variationer (lys, mørk, dæmpet) ved at spille på lysstyrke eller HSL-mætning.
• Illustration og grafik: Transponer en skærmfarve (RGB) til en hexadecimal kode for at overføre til software eller en klient.
• Tilgængelighed: Konverter til RGB-format for derefter at beregne et kontrastforhold (WCAG AA kræver 4,5:1 for normal tekst) med baggrundsfarven.
• CSS-variabler og præprocessorer: Før designtokens ind i en SASS-fil eller et Tailwind-tema fra en enkelt referencefarve.

Nogle komplette konverteringer for at illustrere overensstemmelsen mellem de tre formater:

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

Med alfakanal:

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

Hvad er forskellen mellem HEX og HEX8?

Classic HEX koder tre RGB-kanaler over seks tegn (#RRGGBB). HEX8 tilføjer to tegn til alfakanalen (#RRGGBBAA), som hjælper med at administrere gennemsigtighed i en enkelt streng. #1400B6FF og #1400B6 giver visuelt den samme farve, uigennemsigtig.

Skal vi foretrække HSL eller RGB i CSS?

De to er ækvivalente i gengivelsen. HSL er mere udtryksfuldt til at generere en sammenhængende palette eller tilstandsvarianter (hover, fokus), fordi vi ændrer en enkelt perceptuel parameter. RGB forbliver praktisk, når du arbejder med data fra et lærred eller en sensor.

Hvorfor giver min HEX en anden nuance end forventet?

Tre almindelige årsager: forvirring mellem kort #RGB og lang #RRGGBB (tegnene er duplikeret, ikke sammenkædet), kopifejl på et tegn eller visning på en ukalibreret skærm. Tjek også, at din CSS ikke overlejrer en overordnet opacitet, som ændrer den endelige gengivelse.

Hvad bruges alfakanalen for RGBA og HSLA til?

Alfakanalen styrer farvens opacitet, fra 0 (fuldt gennemsigtig) til 1 (fuldstændig uigennemsigtig). Det er nyttigt til overlejringer, skygger, deaktiverede tilstande eller billedoverlejringer. I modsætning til CSS-egenskaben opacity påvirker RGBA og HSLA kun den målrettede farve og ikke dens børn.

Kan vi konvertere en farve uden tab af præcision?

Mellem RGB og HEX er konverteringen nøjagtig, begge formater koder den samme information på 24 bit. Konvertering til HSL involverer afrunding på nuance, mætning og lysstyrke; en rundrejse RGB > HSL > RGB kan derfor returnere en værdi forskudt med én enhed på visse kanaler.

Hvorfor bruge en onlinekonverter i stedet for en intern funktion?

For en engangstest, prototype en palette eller hurtigt tjekke HEX-ækvivalenten til en HSL-farve udtrukket fra en model, en online-konverter er øjeblikkelig. Til et tilbagevendende programmatisk behov forbliver et bibliotek som color, chroma-js eller tinycolor2 mere passende.