1. Syötä arvo
Kirjoita luku syöttökenttään. Voit käyttää pistettä tai pilkkua.
RGB HSL:ksi
Tämä muunnin laskee välittömästi. Syötä arvo ja tulos näkyy heti.
Loading tool editor...
Milloin tarvitset: RGB HSL:ksi?
HSL (sävy, kylläisyys, kirkkaus) on vaihtoehtoinen tapa määritellä värejä, joka on intuitiivisempi ihmisille. Sävy on värin kulma (0–360°), kylläisyys on värin intensiteetti (0–100%) ja kirkkaus on valoisuus/tummuus (0–100%).
HSL helpottaa värivariaatioiden luomista: säädä kirkkautta sävyille, kylläisyyttä vaimennetuille/eläville versioille tai siirrä sävyä komplementtiväreille.
CSS tukee hsl():ä natiivisti: hsl(14, 100%, 60%) vastaa rgb(255, 87, 51) ja #FF5733.
Kaikki laskelmat suoritetaan paikallisesti selaimessasi.
Näin käytät muunninta
2. Lue tulos
Muunnoksen tulos näkyy välittömästi viereisessä kentässä – ilman napsautusta.3. Kopioi tai käännä
Napsauta Kopioi tulos tai käytä Käännä-painiketta.
Milloin tämä muunnin on hyödyllinen?
Värienhallinta
Varianttien luominen: muuta L (valoisuus) pitäen H ja S vakiona.Web-kehitys
hsl(217, 91%, 60%)— intuitiivinen värimerkintä.Tumma tila
L:n muuttaminen 95 %:sta 10 %:iin luo tumman teeman variantin.Suunnittelu
HSL helpottaa yhtenäisten palettien luomista: käännä H 120° = komplementtiväri.
Mikä tekee tästä muuntimesta erityisen?
Täysi tietosuoja
Kaikki laskelmat tehdään paikallisesti selaimessasi. Mitään tietoja ei lähetetä palvelimelle.Reaaliaikaiset tulokset
Tulos päivittyy välittömästi kirjoittaessasi – ei tarvitse napsauttaa mitään.Kaksisuuntainen muunnos
Käännä-painikkeella voit muuntaa kumpaankin suuntaan yhdellä napsautuksella.Viitetaulukko
Valmis taulukko usein muunnetuilla arvoilla ja kontekstuaalisilla kuvauksilla.
Miten muunnos toimii?
Normalisoi RGB arvoon 0–1. Etsi Max ja Min. L = (max + min) / 2.
HSL on täysin palautettavissa — takaisin RGB:ksi muuntaminen tuottaa täsmälleen saman värin.
Käytännön vinkkejä
- Punainen: hsl(0, 100%, 50%). Vihreä: hsl(120, 100%, 50%). Sininen: hsl(240, 100%, 50%).
- Vastaväri: lisää 180° sävyyn. Punainen (0°) → Syaani (180°).
- Vaalenna: lisää L%. Tummenna: vähennä L%. L=0% = musta, L=100% = valkoinen.
- Poista kylläisyys: vähennä S%. S=0% = harmaasävy. S=100% = puhdas väri.
RGB vs HSL – vertailu
| Ominaisuus | RGB | HSL |
|---|---|---|
| Malli | Additiiviset kanavat | Sävy/Kylläisyys/Kirkkaus |
| Arvot | 0–255 per channel | H: 0–360°, S/L: 0–100% |
| Intuitiivinen | Vaikea ennustaa värejä | Helppo säätää värejä |
| Väriteoria | Ei perustu väriympyrään | Vastaa väriympyrää |
| CSS-tuki | rgb(R, G, B) | hsl(H, S%, L%) |
RGB
- Malli
Additiiviset kanavat - Arvot
0–255 per channel - Intuitiivinen
Vaikea ennustaa värejä - Väriteoria
Ei perustu väriympyrään - CSS-tuki
rgb(R, G, B)
HSL
- Malli
Sävy/Kylläisyys/Kirkkaus - Arvot
H: 0–360°, S/L: 0–100% - Intuitiivinen
Helppo säätää värejä - Väriteoria
Vastaa väriympyrää - CSS-tuki
hsl(H, S%, L%)
Muunna RGB muiksi yksiköiksi
Tutustu muihin yksikkömuuntimeen
Usein kysytyt kysymykset
Auta meitä parantamaan työkalujamme
Onko sinulla idea, löysitkö virheen tai haluatko ehdottaa ominaisuutta? Kirjoita meille – vastaamme 24 tunnin kuluessa.