Hur det fungerar
Spänn fast varje kanal till 0-255, runda den och skriv sedan två hexadecimala siffror per kanal bakom #. HSL härleds från RGB-förhållandena: nyans från den dominerande kanalen, mättnad från avståndet mellan max och min, ljushet från deras genomsnitt.
- HEX accepterar 3 eller 6 siffror; värden är klämda till 0–255.
Varför det spelar roll
Designverktyg exporterar olika format och CSS förväntar sig specifika. Att konvertera för hand skapar avrundningsmisstag, och samma färg skriven på tre sätt är lätt att verifiera när du ser alla representationer sida vid sida.
Ett fungerande exempel
rgb(99, 91, 255) är #635BFF och hsl(244, 100%, 68%). HEX-formuläret är det som CSS-författare klistrar in oftast; HSL är enklare att mörka eller desaturate utan att gissa nya kanaler.
Vanliga misstag
- Förutsatt att samma HEX ser identisk ut överallt utan färghantering.
- Att glömma att tresiffrig HEX expanderar varje napp två gånger.
- Redigera RGB-kanaler när du tänkte justera ljusstyrkan.
Praktiska tips
Designa i HSL när du behöver systematiska nyanser och nyanser: behåll nyans och mättnad, variera ljusheten i steg. Lagra HEX för utdata, men spara HSL-anteckningar i designfilen för framtida justeringar.
Hur man använder det
- Öppna verktyget. Allt körs på din webbläsarflik.
- Klistra in eller skriv in din inmatning och välj sedan den åtgärd du behöver.
- Kontrollera resultatet och kopiera det med ett klick.
Vanliga frågor
Varför är mitt HEX-värde annorlunda i ett annat verktyg?
Värden kläms fast till 0-255 och avrundas och skrivs sedan som versaler HEX. Vissa verktyg har gemener eller ogiltig inmatning.
Vad är HSL?
En alternativ representation: nyans i grader, mättnad och ljushet i procent. Det är användbart för att justera färger.
Kontrollerar den kontrasten?
Nej. Detta konverterar färgformat; kontrastkontroll är ett annat verktyg.
Är detta verktyg verkligen gratis?
Ja. Det finns inget konto, ingen betalvägg och ingen användningsgräns. Tools App finansieras av aumenso, studion bakom.
Är något jag anger uppladdat?
Nej. Verktyget körs på din webbläsarflik; det du anger skickas aldrig till oss och lagras aldrig.