Hur man konverterar färger mellan HEX, RGB och HSL
Webbdesigners och utvecklare arbetar ofta med färger i olika format över projekt, designsystem och verktyg. Oavsett om du växlar mellan en designmockup i HSL, en CSS-fil som använder RGB eller en varumärkesriktlinje i HEX, sparar du snabbt tid och förhindrar misstag att veta hur man konverterar mellan dessa format.
Förstå de tre huvudsakliga färgformaten
HEX (hexadecimal) notation representerar färger som sexteckenkoder som #FF5733, där teckenpar definierar röd, grön och blå intensitet. RGB (röd, grön, blå) använder decimalvärden från 0-255 för varje färgkanal – till exempel rgb(255, 87, 51). HSL (nyans, mättnad, ljushet) beskriver färg med en vinkel för nyans (0-360°), en procentandel för mättnad (0-100%) och en procentandel för ljushet (0-100%), skrivna som hsl(9, 100%, 60%).
Varför konvertera mellan format
Olika verktyg och sammanhang gynnar olika format. Designers arbetar ofta i HSL eftersom det är intuitivt för att justera ljusstyrka och mättnad. Webbutvecklare använder RGB eller HEX i CSS-formatmallar. Tryckproduktion kan behöva en annan färgrymd. Konvertering låter dig flytta arbete mellan verktyg utan att manuellt specificera färger.
Hur konverteringen fungerar
Konvertering mellan format innebär matematiska samband. HEX-till-RGB är okomplicerat: dela upp de sex tecknen i tre par och konvertera var och en från hexadecimal (bas 16) till decimal (bas 10). RGB-till-HSL är mer komplext, att hitta de maximala och lägsta kanalvärdena och sedan härleda nyans, mättnad och ljushet. De omvända processerna tillämpar omvänd matematik för att gå tillbaka.
Konvertera färger online
Manuell beräkning är felbenägen för upprepade konverteringar. Använda Färgomvandlare att transformera mellan HEX, RGB och HSL direkt. Klistra in en färg i valfritt format och se motsvarigheterna i alla andra, vilket eliminerar behovet av att förstå matematiken själv.
Säkerställ tillgängliga färgval
När du har konverterat en färg kontrollerar du att den uppfyller tillgänglighetsstandarderna med hjälp av Kontrastkontroll för att bekräfta tillräcklig kontrast med din text. Om du behöver designinspiration, Slumpmässig färggenerator producerar färska paletter som du sedan kan konvertera till ditt föredragna format.
Sekretess: färgerna finns kvar på din enhet
Färgkonverteraren bearbetar varje konvertering i din webbläsare – ingen data skickas till en server. Dina färgpaletter, pågående design och varumärkesspecifikationer förblir privata på din enhet. Verktyget fungerar offline efter att sidan har laddats, så du kan fortsätta konvertera färger utan internetåtkomst.