HEX till RGB-färgomvandlare

HEX och RGB: två sätt att skriva samma färg

Varje färg du ser på en skärm blandas från tre ljus: rött, grönt och blått. Vrid upp alla tre och du får vitt; stäng av alla tre och du får svart. HEX och RGB är helt enkelt två notationer för att beskriva hur ljust var och en av dessa tre kanaler ska vara. De pekar på exakt samma färg, så en bra konverterare översätter bara mellan de två skrivsätten utan att någonsin ändra den faktiska nyansen. Det är vad det här verktyget gör, helt i din webbläsare, samtidigt som det visar dig ett live-färgprov så att du kan bekräfta resultatet med egna ögon.

Hur man läser en hexkod

En hexfärg ser ut som #1E90FF. Fyrkanten markerar bara starten; de sex tecknen efter den är tre par, skrivna enligt mönstret #RRGGBB. Första paret är rött, andra är grönt, tredje är blått. Varje par är ett tal skrivet i hexadecimalt, det vill säga bas 16, där siffrorna löper 0-9 och sedan står A, B, C, D, E, F för 10 till 15. Ett par kan hålla värden från 00 (kanalen helt avstängd) upp till FF (helt på). I vanligt decimalt system är det spannet exakt 0 till 255, samma skala som RGB använder. Med 256 möjliga nivåer per kanal kan sexsiffersformen beskriva 16 777 216 olika färger.

Konvertering i båda riktningarna, med ett genomräknat exempel

För att gå från HEX till RGB delar du upp koden i dess tre par och konverterar var och en från bas 16 till vanligt decimalt. Ta #1E90FF. Det röda paret är 1E: det är 1 multiplicerat med 16, plus 14 (E), vilket blir 30. Det gröna paret 90 är 9 multiplicerat med 16, plus 0, vilket blir 144. Det blå paret FF är 15 multiplicerat med 16, plus 15, vilket blir 255. Så #1E90FF blir rgb(30, 144, 255) — det välkända dodger blue.

Att gå åt andra hållet är samma process baklänges. Ta varje RGB-tal och skriv det som två hexsiffror. Rent rött, rgb(255, 0, 0), ger FF, 00 och 00, som slås ihop till #FF0000. En sak värd att komma ihåg: om ett värde är under 16 behöver du ändå båda siffrorna, så 5 skrivs 05 och inte bara 5. Konverteraren hanterar den utfyllnaden åt dig, men det snubblar folk när de gör det för hand.

Var varje format används

HEX är webbens vardagsspråk. CSS, HTML och det mesta av koden du skriver använder hexkoder eftersom de är kompakta och lätta att kopiera. RGB tenderar att dyka upp inne i design- och bildverktyg — Figma, Photoshop, Sketch och Illustrator visar oftast reglage eller fält i 0-255-spannet, och skärminspelnings- eller videoappar förväntar sig också ofta RGB. Så du behöver regelbundet hämta en hexkod från ett stilmallsdokument och behöver dess RGB-form för att skriva in i en designpanel, eller tvärtom. Den tur-och-retur-resan är hela anledningen till att en konverterare är praktisk. Om du behöver bygga en hel uppsättning matchande nyanser istället för att översätta en enda är vår färgpalettgenerator en bättre utgångspunkt, och du hittar fler verktyg som detta under utvecklarverktyg.

Alfa, opacitet och HSL

Båda notationerna har en utökad form som lägger till transparens. RGB blir rgba(30, 144, 255, 0.5), där det fjärde värdet är alfa — 0 är helt genomskinligt och 1 är helt solitt. HEX lägger till ett fjärde par i samma syfte, vilket ger en åttasiffrig #RRGGBBAA-kod; 80, till exempel, är ungefär 50 procent opacitet. Vissa konverterare erbjuder även HSL (nyans, mättnad, ljushet), som beskriver färg på det sätt en människa kanske tänker — välj en nyans på hjulet, ställ sedan in dess livfullhet och ljushet. HSL är en annan mental modell snarare än en annan palett, så den kan vara mer intuitiv när du vill nyansera en färg ljusare eller mer dämpad utan att jonglera tre separata tal.

Vanliga frågor