HSL-justering
HSL-justering för att ändra nyans, mättnad och ljushet direkt, jämföra originalfärgen och kopiera HSL, HEX, RGB och CSS.
HSL-justering
Vad är HSL-justering?
HSL-justering är ett onlineverktyg för att ändra nyans, mättnad och ljushet i realtid. Du kan börja med en HEX-kod eller en färg som valts visuellt och sedan finjustera varje parameter separat för att skapa ljusare, mjukare, starkare eller mer kontrasterande varianter utan att lämna samma färgfamilj.
Det här är användbart i webbdesign, designsystem, branding, produktgränssnitt och överlämning till frontend. Originalfärgen och resultatet visas sida vid sida, medan HSL, HEX, RGB och CSS är redo att kopieras till stylesheets, tokens, dokumentation eller visuell QA.
När verktyget gör mest nytta
- Skapa varianter av en varumärkesfärg – Bygg toner för knappar, mjuka bakgrunder, etiketter och accenter från en gemensam bas
- Ta fram hover- och aktiva lägen – Justera främst ljusheten för att hålla samman det normala och det interaktiva läget
- Städa upp en UI-palett – Rätta små skillnader mellan kort, grafer, badges och sekundära ytor
- Förbereda tillgänglighetskontroll – Testa ljusare eller mörkare versioner innan den slutliga kontrastgranskningen
- Utforska visuella riktningar – Jämför alternativ för en huvudsektion, en viktig knapp, illustrationer eller mörkt läge
- Leverera färgvärden till frontend – Ge HSL, HEX, RGB och CSS färdiga för implementation och visuell kontroll
Viktiga funktioner
- Tydliga HSL-reglage – Nyans, mättnad och ljushet är separerade så att varje ändring blir lättare att förstå.
- Flexibel startpunkt – Börja med en HEX-kod, den inbyggda färgväljaren eller en färg som redan finns sparad i webbläsaren.
- Omedelbar jämförelse – De två färgpanelerna gör det snabbt att se om den nya varianten fortfarande passar varumärke och gränssnitt.
- Flera format samtidigt – HSL, HEX, RGB och CSS finns samlade på ett ställe så att du slipper extra verktyg.
- Automatisk lokal historik – De senaste testen finns kvar i webbläsaren för jämförelse och justeringar.
- Favoriter för viktiga referenser – Spara centrala färger för att återanvända dem i fler sidor, komponenter och leveranser.
Så använder du HSL-justering
- Välj basfärg – Använd färgväljaren eller klistra in en HEX-kod från din mockup, styleguide eller komponentbibliotek.
- Justera reglagen – Ändra nyans, mättnad och ljushet tills du hittar den variant som passar ditt riktiga användningsfall.
- Jämför före och efter – Kontrollera att den nya färgen fortfarande fungerar i gränssnitt, branding och läsbarhet.
- Kopiera eller spara – Kopiera formatet du behöver eller lägg färgen i favoriter om den ska användas igen.
Hur nyans, mättnad och ljushet fungerar
HSL-modellen gör färgarbete mer begripligt än att bara justera RGB-kanaler:
- Nyans (0-360°) – Positionen på färghjulet, till exempel rött vid 0°, grönt vid 120° och blått vid 240°.
- Mättnad (0-100 %) – Visar hur intensiv eller neutral färgen upplevs.
- Ljushet (0-100 %) – Placerar färgen mellan svart, en ren färgton och vitt.
Därför blir det enklare att bygga hover states, mjuka bakgrunder, kanter, accenter och temavarianter på ett kontrollerat sätt samtidigt som den ursprungliga färgbasen bevaras.
Vanliga frågor
Vad är skillnaden mellan HSL och RGB?
RGB beskriver färg genom rött, grönt och blått. HSL organiserar samma färg genom nyans, mättnad och ljushet. När du vill skapa visuella varianter är HSL ofta mer intuitivt, eftersom du kan avgöra om en färg ska bli ljusare, mjukare eller starkare.
Hur hittar jag en harmonisk nyans?
Om du vill ligga nära basfärgen räcker det ofta att flytta nyansen några grader. För mer kontrast kan du testa längre bort på färghjulet och sedan balansera mättnad och ljushet så att helheten fortfarande känns genomtänkt.
Vad betyder 0 % eller 100 % mättnad?
Vid 0 % drar färgen mot grått beroende på ljusheten. Vid 100 % får den maximal intensitet för den aktuella nyansen. I digitala produkter fungerar mellanvärden ofta bäst eftersom de balanserar uttryck och läsbarhet.
Hur tar jag fram en hoverfärg från en basfärg?
Oftast räcker det att behålla samma nyans och sänka ljusheten med ungefär 8-15 %. Om du behöver mer tydlighet kan du höja mättnaden lite. Då känns hoverfärgen fortfarande tydligt kopplad till grundfärgen.
Var sparas historik och favoriter?
De sparas i webbläsarens local storage. Det betyder att de finns kvar på samma enhet och i samma webbläsare tills du själv rensar dem eller tar bort webbplatsdata.
Varför är HSL praktiskt för CSS och design tokens?
Eftersom du kan bygga konsekventa varianter från en gemensam färgbas. Det gör det lättare att underhålla CSS-variabler, tokens och teman med tydliga relationer mellan huvudfärg, hoverläge, ytor och accenter.
Det finns inga kommentarer ännu. Lämna den första åsikten.