Vad är Färgomvandlare?
En färgomvandlare omvandlar färger mellan färgmodellerna HEX, RGB och HSL. Viktig för webbutvecklare och designers som arbetar med CSS, designverktyg och färgteori. Inkluderar en live färgprovruta.
När du ska använda denna kalkylator
- Du behöver konvertera mellan färgformat
- Du designar och behöver snabb konvertering
- Du bygger UI och behöver färgkodning
- När du delar resultat med teamet eller kunder
- När du verifierar verktygets beräkningsnoggrannhet
- När du söker ett snabbt och enkelt sätt att lösa ett specifikt problem
Steg:
- Ange ett färgvärde i HEX-, RGB- eller HSL-format.
- Välj inmatningsformat med hjälp av flikarna.
- Se omvandlade värden i alla tre formaten.
- Se den live färgprovrutan.
- Kontrollera WCAG-kontrastmärkena för att verifiera tillgänglighetsöverensstämmelse om du sparar denna färg med text
Formel
RGB = (R, G, B) 0–255
HSL = (Hue 0–360, Saturation 0–100%, Lightness 0–100%)
HEX = #RRGGBB
Användningsområden
- Omvandla CSS-färgvärden
- Skapa färgscheman från grundfärger
- Matcha designsystems färger
- Förstå färgrelationer genom HSL
Viktiga fördelar
- Omvandla färger mellan 3 format direkt
- Se live färgförhandsvisning
- Kopiera vilket format som helst med ett klick
- Gratis, ingen registrering krävs
- Kopiera valformat med ett enda klick, och använd pipettverktyget för att välja färger direkt från din skärm för omedelbar konvertering
- Fungerar helt i din webbläsare utan data som skickas till någon server, vilket håller ditt designarbete helt privat och tillgängligt offline
Proffstips
- Använd HSL för intuitiva färgjusteringar
- Använd HEX för CSS-kompatibilitet
- Använd förhandsvisningen för att verifiera din färg innan du använder den
- Ha en referens till hands över vanliga färgomvandlingar
- Kom ihåg att HEX-värden är skiftlägesokänsliga (#ff5733 och #FF5733 ger samma färg), men att använda gemener är en vanlig konvention som förbättrar läsbarheten i stilarcket
Vanliga misstag att undvika
- Att glömma #-prefixet för HEX-färger
- Att använda RGB-värden över 255 eller under 0
- Att blanda ihop HSL:s kulörområde (0–360) med RGB:s (0–255)
- Anta att HSL-ljushet och RGB-ljusstyrka är ekvivalenta — HSL-ljushet är en perceptuell mätning där 50 % är den ljusaste versionen av vilken färg som helst, medan RGB-ljusstyrkan är den rå styrkan för alla tre kanalerna kombinerade
Viktiga begrepp förklarade
- HEX: Hexadecimal RGB-representation
- RGB: Röds-grön-blå färgmodell
- HSL: Kulör-mättnad-ljushet-modell
- Färgrymd: Matematisk modell för färger
- WCAG-kontrast: En numerisk mätning av skillnaden i luminans mellan förgrundstext och bakgrundsfärger, med minimiförhållanden på 4,5:1 för normal text och 3:1 för stor text som krävs för att uppfylla tillgänglighetsstandarder
Relaterade begrepp
- CSS-flexbox: Använd konverterade färger.
- Base64 Encoder Decoder: Encode and decode Base64 strings
- Json Formatter: Formatera och validera JSON-data
- Regex-testare: Testa reguljära uttryck mot exempeltext
- Url Encoder Decoder: Koda och avkoda URL-säkra strängar
Exempel
Inmatning: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). Inmatning: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.
Tolka dina resultat
HEX används i webb. RGB för programmatisk manipulation. HSL mer intuitivt.