RGB til HEX

Hvad RGB til HEX gør

RGB til HEX konverterer røde, grønne og blå kanalværdier til en hexadecimal farvekode. Den samme opgave kaldes ofte rgb to hex, men resultatet er det samme: tre decimale kanalværdier fra 0 til 255 samles til en kompakt HEX værdi, som kan bruges i CSS, design tokens, dokumentation og farvereferencer.

RGB beskriver en farve gennem tre lyskanaler. Når rød, grøn og blå kombineres, opstår den synlige farve på skærmen. HEX beskriver de samme tre kanaler med to hexadecimale tegn pr. kanal. For eksempel bliver RGB værdierne 99, 102, 241 til #6366F1. Farven ændrer sig ikke, men notationen bliver mere kompakt.

RGB til HEX viser resultatet med live farvevisning, rå HEX uden nummertegn, CSS HEX med nummertegn og en HSL version af samme farve. Det gør det lettere at kontrollere både den visuelle farve og den tekniske værdi, før den kopieres. Knapperne ved resultaterne reducerer risikoen for tastefejl, manglende tegn eller forkert format.

Sådan bruger du RGB til HEX

1. Indstil den røde kanal med skyderen, eller skriv et tal fra 0 til 255 i feltet for rød.
2. Indstil den grønne kanal med skyderen, eller skriv et tal fra 0 til 255 i feltet for grøn.
3. Indstil den blå kanal med skyderen, eller skriv et tal fra 0 til 255 i feltet for blå.
4. Kontroller farvevisningen for at sikre, at kanalværdierne giver den forventede farve.
5. Kopiér den rå HEX værdi, hvis næste felt kun skal have de seks hexadecimale tegn.
6. Kopiér CSS HEX værdien, hvis farven skal indsættes som en fuld CSS farvekode med #.
7. Kopiér HSL værdien, hvis næste opgave handler om farvetone, mætning eller lyshed.
8. Brug Tilfældig farve til test, eller brug Nulstil for at vende tilbage til standardeksemplet.

Hvordan kanalværdier bliver til HEX

Hver RGB kanal har 256 mulige niveauer, fra 0 til 255. HEX bruger base 16, så hver kanal skrives som to tegn. Den røde kanal skrives først, derefter grøn og til sidst blå. Hvis en kanal er lav, bruges et foranstillet nul, så alle tre kanaler altid fylder to tegn hver. Det er derfor en fuld HEX farve har seks tegn efter nummertegnet.

Konverteringen er mekanisk, men kontrollen er stadig vigtig. Hvis én kanal er tastet forkert, kan HEX værdien se gyldig ud og samtidig repræsentere den forkerte farve. Farvevisningen er derfor ikke kun dekorativ; den er en hurtig måde at fange fejl, før værdien bliver kopieret til et projekt.

Vælg det rigtige output

RGB til HEX viser flere output, fordi forskellige arbejdssituationer kræver forskellige former. Den rå HEX værdi er nyttig, når et system kun forventer de seks tegn. CSS HEX er bedre, når farven skal ind i en stylesheet, en CSS variabel eller en design token. HSL er relevant, når du vil forstå eller justere farven ud fra farvetone, mætning og lyshed.

Hvornår RGB til HEX er nyttig

• Design tokens: konvertér kanalværdier fra et værktøj eller en guide til en kompakt CSS værdi.
• Frontend arbejde: brug CSS HEX, når en komponent, variabel eller stylesheet allerede bruger HEX notation.
• Dokumentation: angiv både RGB og HEX, så designere og udviklere kan genkende samme farve.
• Farvesammenligning: justér kanalværdier og se, hvordan små ændringer påvirker den samlede kode.
• Testdata: brug tilfældige farver til hurtigt at kontrollere, hvordan UI elementer reagerer på forskellige værdier.

Hvis du starter med en eksisterende HEX værdi og skal finde kanalværdierne, er HEX til RGB den modsatte konvertering. Hvis farven først skal vælges visuelt, kan Farvevælger bruges til at vælge farven og kopiere det ønskede format.

Praktiske regler for kanalværdier

RGB kanalværdier skal holdes inden for 0 til 255. Værdien 0 betyder ingen intensitet i den kanal, mens 255 betyder fuld intensitet. En neutral grå har normalt ens eller næsten ens værdier i alle tre kanaler. En varm farve har ofte mere rød end blå, mens en kølig farve ofte har stærkere blå eller grønne bidrag.

RGB til HEX afrunder og begrænser kanalværdierne til gyldige niveauer, men det er stadig bedst at starte med præcise tal. Hvis værdierne kommer fra en brandguide, en eksport eller et kodeudsnit, bør de indtastes uden at ændre dem. Hvis værdierne er kreative forslag, kan skyderne bruges til at undersøge små forskelle og derefter kopiere den kode, der passer bedst.

Brug RGB til HEX i design tokens

Når en farve er konverteret, bør den placeres i den struktur, som projektet allerede bruger. Hvis projektet arbejder med CSS variabler, kan CSS HEX resultatet indsættes i en token som --color-primary, --color-accent eller --color-border. Hvis projektet arbejder med rå værdier i en konfigurationsfil, kan den rå HEX værdi uden nummertegn være mere passende. Det rigtige output afhænger derfor ikke kun af farven, men også af destinationen.

RGB til HEX er især nyttig, når design eller dokumentation leverer kanalværdier, men kodebasen bruger HEX. I stedet for at omskrive manuelt kan du indtaste de tre kanaler, kontrollere farvevisningen og kopiere CSS HEX. Det giver en sporbar konvertering, hvor kilden stadig kan sammenlignes med outputtet. Hvis nogen senere spørger, hvordan værdien blev dannet, er sammenhængen mellem kanalværdier og HEX tydelig.

Ved tokens bør du undgå at navngive farver efter deres visuelle nuance alene, hvis de har en funktionel rolle. Et navn som --color-button-primary kan være mere nyttigt end --color-blue-500, når farven er knyttet til en bestemt komponent. Konverteringen giver værdien, men navngivningen bestemmer, hvor sikkert værdien kan vedligeholdes.

Kontrol før værdien afleveres

Før en konverteret HEX kode afleveres, bør du kontrollere tre ting: kanalværdierne, farvevisningen og formatet. Kanalværdierne sikrer, at kilden blev indtastet korrekt. Farvevisningen sikrer, at resultatet ligner den forventede farve. Formatet sikrer, at modtageren får enten rå HEX, CSS HEX eller HSL efter behov.

Dette er særligt vigtigt, når værdien kommer fra en ekstern kilde. En brandguide kan skrive kanaler med mellemrum, kommaer eller anden typografi. Et designværktøj kan eksportere værdier i en rækkefølge, der skal læses omhyggeligt. En kommentar i et issue kan mangle kontekst. RGB til HEX gør selve konverteringen enkel, men det er stadig brugerens ansvar at sikre, at de tre tal kom fra den rigtige kilde.

Hvis værdien skal ind i produktion, bør du også sammenligne den med eksisterende tokens. Måske findes farven allerede under et andet navn, eller måske ligger den så tæt på en eksisterende farve, at en ny token ikke er nødvendig. Konvertering bør derfor indgå i oprydning og beslutning, ikke kun i kopiering.

Når værdierne skal dokumenteres, er det nyttigt at gemme både kilden og outputtet. Skriv for eksempel RGB kanalværdierne sammen med den konverterede HEX værdi i en note eller tokenbeskrivelse. Det gør review lettere, fordi en anden person kan se, at konverteringen er tilsigtet. Det er også nyttigt, hvis projektet senere skifter notation, eller hvis samme farve skal bruges i et designværktøj, der foretrækker en anden form.

Hvis du bruger Tilfældig farve til test, bør resultatet ikke automatisk blive en produktionsfarve. Tilfældige værdier er gode til at teste layout, kontrastområder og komponentrespons, men godkendte farver bør stadig vælges ud fra visuel rolle, tilgængelighed og sammenhæng med resten af paletten. Konverteringen kan bekræfte formatet, men den kan ikke alene afgøre, om farven hører hjemme i designet.

Ved større designsystemer kan samme kontrol gentages for flere farver, så alle nye HEX værdier har en tydelig kilde, en visuel bekræftelse og en begrundet rolle. Det skaber et mere konsekvent farvebibliotek og gør fremtidige ændringer mindre risikable.

Hvis den samme værdi også skal deles uden for kodebasen, kan både RGB kilden og HEX resultatet skrives i en kort beslutningsnote.

Det gør review sporbar.

Fejl der ofte sker ved RGB konvertering

• Værdier uden for intervallet: kanalværdier bør være mellem 0 og 255.
• Ombyttede kanaler: rækkefølgen er altid rød, grøn og blå.
• Manglende nummertegn: brug CSS HEX output, når destinationen kræver #.
• Forkert retning: RGB til HEX starter med kanalværdier, mens HEX til RGB starter med en HEX kode.
• Ingen visuel kontrol: kopier først efter at farvevisningen stemmer med formålet.

RGB til HEX er mest pålidelig, når konvertering og designbeslutning holdes adskilt. Først indtastes eller justeres kanalværdierne. Derefter kontrolleres farven visuelt. Til sidst kopieres det output, der passer til det konkrete system, så den rigtige farve ikke går tabt i et forkert format.