Konvertera en färg mellan HEX, RGB och HSL
Publicerad · Uppdaterad 2 min läsning
HEX, RGB och HSL beskriver samma färg på tre sätt. Verktyget visar alla tre på en gång och accepterar de vanliga skrivsätten; HSL avrundat till heltal förklarar skillnaderna på en nivå som man ser när man går tillbaka till HEX.
Tre skrivsätt för samma färg
Utforska och konvertera färger visar som standard de tre formerna, med en förhandsvisning av färgen. För den gröna #2F4A3F:
| Form | Resultat |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
De tre knapparna HEX, RGB och HSL i panelen reducerar resultatet till en enda form, praktiskt att kopiera som den är.
De skrivsätt som accepteras
| Skrivsätt | Exempel | Resultat i HEX |
|---|---|---|
| Kort HEX | #fff | #ffffff |
| HEX med transparens | #2F4A3F80 | #2f4a3f80 |
| RGB med kommatecken | rgb(47, 74, 63) | #2f4a3f |
| RGB med mellanslag | rgb(47 74 63) | #2f4a3f |
| RGB i procent | rgb(100%, 0%, 0%) | #ff0000 |
| HSL med mellanslag | hsl(156 22% 24%) | #304b40 |
Färgnamn som ”rouge” och kanaler utanför 0 till 255, som rgb(300, 0, 0), nekas med ett meddelande som listar de skrivsätt som accepteras.
Transparensen
En transparens skrivs i HEX med åtta siffror, eller efter ett snedstreck med mellanslag. Färgen rgb(47 74 63 / 50%) ger #2f4a3f80 i HEX och rgba(47, 74, 63, 0.5) i RGB. Omvänt ger #2F4A3F80 en opacitet på 0,502, eftersom 80 i hexadecimalt är 128 av 255.
Varför en tur och retur ändras med en nivå
HSL visas som heltal: nyans i grader, mättnad och ljushet i procent. Att gå tillbaka från HSL till HEX landar därför på en närliggande färg, inte på utgångsfärgen.
| Utgångsfärg | HSL som visas | Tillbaka till HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
Skillnaden är en nivå på varje kanal, osynlig för ögat. För en designtoken eller ett varumärke, behåll det ursprungliga HEX-värdet som referens och gå inte via HSL igen.
Gråfärgerna
En grå har noll mättnad och en nyans utan effekt: #808080 ger rgb(128, 128, 128) och hsl(0, 0%, 50%).
Vad verktyget inte mäter
En formatkonvertering säger ingenting om läsbarheten. Verktyget beräknar inte kontrasten mellan en text och dess bakgrund: kontrollera den separat före publicering. Fallet med en QR-kod, där kontrasten avgör läsningen, behandlas i Skapa en QR-kod som går att skanna på första försöket.
Kontrollera en konvertering
- Klistra in färgen i fältet: förhandsvisningen ska motsvara det du väntar dig.
- Kopiera den form som ditt system kräver.
- För att behålla den exakta färgen, behåll HEX eller RGB i stället för HSL.