Farvekonvertering

Farvekonvertering er et gratis værktøj, der konverterer en farve angivet som HEX, HEX alpha, RGB, RGBA, HSV, HSL eller HSLA til flere tilsvarende farveformater.

Hvilke farveformater kan jeg konvertere?

Du kan indtaste HEX, HEX alpha, RGB, RGBA, HSV, HSL eller HSLA og se de tilsvarende værdier i alle understøttede formater. Det er nyttigt, når en designspecifikation, et stylesheet eller en ekstern API bruger en anden notation for den samme farve.

• HEX angiver de røde, grønne og blå kanaler med hexadecimale par, normalt i formen #RRGGBB.
• HEX Alpha tilføjer en kanal for opacitet. I moderne CSS-notation skrives det ofte som #RRGGBBAA.
• RGB bruger kanalværdier for rød, grøn og blå, som typisk går fra 0 til 255.
• RGBA føjer alfagennemsigtighed til RGB.
• HSV beskriver farvetone, mætning og værdi. Formatet bruges ofte i farvevælgere, men er ikke en standardiseret CSS-farvefunktion.
• HSL beskriver farvetone, mætning og lyshed. CSS understøtter HSL direkte.
• HSLA er HSL med en alfaværdi.

RGB og HSL er forskellige matematiske beskrivelser af en farve, ikke forskellige farver. Ved at konvertere kan du ændre notationen og samtidig bevare den tilsigtede farve så præcist, som destinationsformatet tillader.

Hvordan bruger jeg farvekonverteringen?

Indtast én komplet farveværdi i feltet Color i et af de accepterede formater. Derefter kan du aflæse eller kopiere de genererede værdier fra resultatfelterne.

1. Kopiér kildeværdien nøjagtigt, inklusive et indledende nummertegn samt eventuelle kommaer, parenteser, procenttegn og alfakomponenter.
2. Indsæt den i feltet Color.
3. Aflæs de tilsvarende værdier under HEX, HEX Alpha, RGB, RGBA, HSV, HSL og HSLA.
4. Vælg et af de understøttede farveformater, som destinationssystemet accepterer. Til en CSS-regel er HEX, RGB, RGBA, HSL og HSLA almindelige valg. HSV bruges oftere i redigeringsværktøjer og farveberegninger.

Konverteringen udføres på serveren. Dit input sendes til serveren via HTTPS og gemmes ikke. En enkelt farve er sjældent følsom, men overvej, om en endnu ikke offentliggjort farvepalet eller en samling designtokens er fortrolig, før du sender den til en onlinetjeneste.

Mellemrum og tegnsætning er en del af syntaksen i RGB, HSL og beslægtede formater, mens procenttegn markerer procentværdier. Et tal alene, en tom værdi eller vilkårlig tekst angiver ikke en farve. Tekst med accenttegn eller ikke-latinske tegn har heller ingen defineret betydning i disse numeriske formater.

Hvordan læser jeg de konverterede værdier?

Hvert resultat er en anden notation for den samme farve. Vær især opmærksom på kanalintervaller, procentværdier og alfagennemsigtighed. Hvilket felt du skal kopiere, afhænger af den farvenotation, som modtagersystemet understøtter.

I sekscifret HEX angiver det første par rød, det andet grøn og det tredje blå. Eksempelvis indeholder #336699 de hexadecimale kanalværdier 33, 66 og 99, som svarer til decimalværdierne 51, 102 og 153 i RGB.

Farvetone angives normalt som en vinkel på et farvehjul. Mætning samt lyshed eller værdi angives typisk i procent. Lyshed i HSL og værdi i HSV beregnes forskelligt, så procentværdierne må ikke sammenlignes, som om de målte den samme egenskab.

Alfa beskriver opacitet. En helt uigennemsigtig farve behøver ikke et format med alfakanal, men det gør en delvist gennemsigtig farve. Hvis du kopierer en RGBA- eller HSLA-farve til almindelig RGB, HSL eller sekscifret HEX, kan destinationsformatet ikke gemme alfakanalen.

Denne konverter er ikke dokumenteret som en syntaksvalidator med detaljerede fejlmeddelelser. Du bør derfor ikke bruge den til at finde det præcise tegn i et ugyldigt input. Almindelige syntaksfejl omfatter et manglende nummertegn i HEX, uafsluttede parenteser, manglende procenttegn, en alfaværdi uden for det forventede interval eller en sammenblanding af kanalkonventionerne for HSL og RGB.

Eksempler på farvekonvertering

Et enkelt eksempel viser sammenhængen mellem HEX, RGB, HSL og HSV. Ren rød kan skrives i følgende tilsvarende former.

• HEX-input #ff0000
• Tilsvarende RGB-værdi rgb(255, 0, 0)
• Tilsvarende HSL-værdi hsl(0, 100%, 50%)
• Tilsvarende HSV-værdi hsv(0, 100%, 100%)

For en mindre mættet farve svarer #336699 til rgb(51, 102, 153). HSL-repræsentationen er hsl(210, 50%, 40%), mens HSV-repræsentationen har en farvetone på 210 grader, en mætning på cirka 66.7% og en værdi på 60%. En brugerflade kan afrunde decimaltal eller bruge andre mellemrum, uden at det ændrer den praktiske betydning.

Gennemsigtighed giver et andet enkelt eksempel. rgba(255, 0, 0, 0.5) og hsla(0, 100%, 50%, 0.5) beskriver begge rød med halv opacitet. Med den almindelige ottecifrede CSS-konvention for HEX er den tilsvarende værdi #ff000080, hvor 80 er den kvantiserede alfabyte.

Hvornår giver det mening at konvertere en farve?

Farvekonvertering giver mening, når modtagerprogrammet kræver en anden notation, eller når en anden repræsentation gør fejlfinding lettere. Det kan for eksempel være, når du omsætter en Figma-værdi til en brugerdefineret CSS-egenskab, kontrollerer en RGBA-værdi fra Chrome DevTools, klargør farvefelter til en API-nyttelast eller gennemgår temadata fra en tredjepart før udrulning.

Konvertering er normalt unødvendig, hvis destinationen allerede understøtter den eksisterende farvenotation. Der er ikke meget at vinde ved at ændre sekscifret HEX til RGB udelukkende til maskinlæsbar CSS, og gentagne konverteringer frem og tilbage kan medføre afrunding af HSL- eller HSV-værdier. Du bør heller ikke tilføje en alfakanal, hvis alle farver med sikkerhed er helt uigennemsigtige.

Hvis du vil vælge en farve visuelt frem for at konvertere en kendt værdi, er Farvevælger det mest direkte værktøj. Konvertering erstatter heller ikke kontrasttest, simulering af farveblindhed eller styring af farveprofiler. Tilsvarende numeriske værdier dokumenterer ikke, at tekst i forgrunden overholder WCAG's kontrastkrav.

Ofte stillede spørgsmål

Kan konverteren bruge navngivne CSS-farver?

Nej. De dokumenterede inputformater er HEX, HEX alpha, RGB, RGBA, HSV, HSL og HSLA. Navne som red, rebeccapurple og transparent er derfor ikke angivet som understøttet input. Omsæt først den navngivne farve til en numerisk CSS-værdi, og indtast derefter værdien.

Kan jeg indtaste en trecifret HEX-værdi?

HEX accepteres som input, men de understøttede HEX-længder er ikke dokumenteret. For at få et forudsigeligt resultat bør du udvide en kortform som #369 til #336699. Det samme princip gælder for firecifrede kortformer med alfa.

Kan jeg indsætte en hel CSS-deklaration?

Indtast selve farveværdien i stedet for hele deklarationen. Brug eksempelvis #336699 i stedet for color: #336699;, da egenskabsnavnet og semikolonet ikke er en del af selve farven. Fjern omgivende anførselstegn, når du kopierer en værdi fra JSON eller en konfigurationsfil.

Bevarer resultatet oplysninger om stort farverum eller farveprofiler?

Ingen formater med stort farverum eller indlejrede farveprofiler er angivet som understøttet. Display P3, Lab, LCH og ICC-profildata indeholder oplysninger, som de tilgængelige felter til HEX, RGB, HSL og HSV ikke kan udtrykke. Brug et program med farvestyring, når konverteringen skal tage højde for farveprofiler.

Hvorfor indeholder konverterede værdier nogle gange decimaler?

Beregninger i HSL og HSV kan give procentværdier med decimaler, selv når RGB-kanalerne i kilden er heltal. Afrunding af disse værdier kan ændre en senere konvertering tilbage til RGB en smule. Bevar den tilgængelige præcision, når du gemmer designtokens, og afrund kun, hvis destinationsformatet eller kodestandarden kræver det.