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


Värimuunnin, jossa lähdevärinä on #ff6600, RGB-tuloksena näkyy rgb(255, 102, 0) ja sen alla oranssi värinäyte
Värimuunnin, jossa lähdevärinä on #ff6600, RGB-tuloksena näkyy rgb(255, 102, 0) ja sen alla oranssi värinäyte

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.

Avaa työkalu

Jaa