Värien muuntaminen HEX-, RGB-, HSL- ja muiden formaattien välillä
Muunna väri HEX-, RGB-, HSL-, CMYK- ja muihin formaatteihin, katso mitkä muunnokset ovat tarkkoja ja opi, missä formaattia kannattaa käyttää.
2 min lukuaika

Muunna väri liittämällä se värimuuntimeen. Valitse haluamasi muoto kohdasta Kohde ja kopioi tulos. Työkalu tunnistaa syötemuodon automaattisesti, joten #ff6600, rgb(255, 102, 0), orangered ja jopa 255, 102, 0 toimivat. Tulos näkyy kirjoittaessasi. Tuloksen alla oleva värinäyte näyttää, tunnistiko työkalu oikean värin.
Sama väri neljässä muodossa
HEX, RGB, HSL ja CMYK ovat eri tapoja esittää sama väri. Tässä yksi oranssi kaikissa neljässä muodossa:
| Muoto | Arvo | Mitä luvut tarkoittavat |
|---|---|---|
| HEX | #ff6600 |
Punainen, vihreä ja sininen kukin kahtena heksanumeroina |
| RGB | rgb(255, 102, 0) |
Punaisen, vihreän ja sinisen arvot välillä 0–255 |
| HSL | hsl(24, 100%, 50%) |
Sävy väriympyrässä, kylläisyys ja valoisuus |
| CMYK | cmyk(0%, 60%, 100%, 0%) |
Syaani, magenta, keltainen ja musta painoväri |
HEX ja RGB käyttävät samoja kolmea lukua, mutta ne kirjoitetaan eri tavalla. Muunnos niiden välillä on tarkka. HSL-arvoja on helpompi säätää käsin: kun nostat valoisuusarvoa, väri vaalenee.
Miksi CMYK on erilainen
CMYK on tarkoitettu painamiseen, ja tarkat arvot riippuvat tulostimesta, paperista ja painoväristä. Muunnin käyttää vakiokaavaa ilman tulostinprofiilia, joten painotalo voi antaa samalle värille hieman eri arvot. Käytä CMYK-tulosta mallikuvissa ja pyydä painotalolta vedos ennen varsinaista painatusta.
Minkä muodon valitsisin?
- CSS ja HTML: käytä HEX-muotoa. Se on lyhyt, ja kaikki selaimet tunnistavat sen.
- Väriteema: käytä HSL-muotoa. Saat vaaleampia ja tummempia sävyjä muuttamalla yhtä lukua.
- Läpinäkyvyys koodissa: käytä RGB-muotoa alfaarvon kanssa tai kahdeksannumeroista HEX-muotoa.
rgba(37, 99, 235, 0.5)muuttuu muotoon#2563eb80, jossa kaksi viimeistä numeroa ilmaisevat peittävyyden. - Painatuksen mallikuvat: käytä CMYK-muotoa ja pidä yllä oleva huomio mielessä.
Värien nimet eivät ole tarkkoja
Muunnin tukee 17 muotoa, kuten OKLCH:ta, LABia, HSV:tä, CSS-värinimiä ja päätteen ANSI-koodeja. Tuloksena oleva värinimi on lähin CSS-värinimi, ei tarkka vastine. #ff6600 antaa tulokseksi orangered, mutta orangered on oikeasti #ff4500. Käytä nimiä nopeina tunnisteina ja tarkkoja arvoja brändiväreissä.
Liitä väri, tarkista värinäyte ja kopioi tulos. Siinä koko prosessi.
Haluatko kokeilla itse?
Värimuunnin
Muunna värejä HEX-, RGB-, HSL-, HSV-, HWB-, CMYK-, LAB-, LCH-, OKLab-, OKLCH- ja XYZ-muotojen, CSS-värinimien, ANSI-päätekoodien ja muiden välillä automaattisella muodon tunnistuksella ja reaaliaikaisella esikatselulla.