Siirry sisältöön

Värimuunnin

Verkko ja kehittäjät

Miten väri kirjoitetaan HEX-, RGB- tai HSL-muodossa?

Valitse tai kirjoita mikä tahansa väri ja kopioi se HEX-, RGB-, HSL-, HWB- tai OKLCH-muodossa lähimmän CSS-nimen kera.

Nimi, hex, rgb(), hsl(), hwb() tai oklch() kuten CSS:ssä.

HEX

#2563eb

Lähin CSS-värin nimi: royalblue (#4169e1).

Sama väri muissa muodoissa

RGB
rgb(37 99 235)
HSL
hsl(221.2 83.2% 53.3%)
HWB
hwb(221.2 14.5% 7.8%)
OKLCH
oklch(54.61% 0.2152 262.88)

Sävyt ja varjostukset

Vaaleus 95 %
#e6efff
Vaaleus 85 %
#b4ceff
Vaaleus 75 %
#82adff
Vaaleus 65 %
#4f89ff
Vaaleus 55 %
#2664ec
Vaaleus 45 %
#0543ca
Vaaleus 35 %
#002b93
Vaaleus 25 %
#00185c
Vaaleus 15 %
#00062a

Sponsoroidut linkit

Valitse tai kirjoita mikä tahansa väri ja kopioi se HEX-, RGB-, HSL-, HWB- tai OKLCH-muodossa lähimmän CSS-nimen kera.

Käyttöohje

  1. Kirjoita väri missä tahansa CSS-muodossa, kuten tomato, #1a73e8, rgb(26 115 232) tai oklch(60% 0.2 260), tai valitse se napauttamalla värilaattaa.
  2. Kopioi tarvitsemasi muoto. HEX näkyy ensin ja sen alla RGB, HSL, HWB ja OKLCH.
  3. Etsi saman värin vaaleampia ja tummempia versioita sävyriviltä.

Tavallisia CSS-värejä HEX- ja RGB-muodossa

CSS-nimiHEXRGB
black#000000rgb(0 0 0)
white#ffffffrgb(255 255 255)
red#ff0000rgb(255 0 0)
lime#00ff00rgb(0 255 0)
blue#0000ffrgb(0 0 255)
yellow#ffff00rgb(255 255 0)

Näin se toimii

Näyttö muodostaa värin sekoittamalla punaista, vihreää ja sinistä valoa. RGB ja HEX kertovat tämän sekoituksen suoraan: HEX on samat kolme määrää 16-kantaisina, joten #1a73e8 tarkoittaa punaista 26, vihreää 115 ja sinistä 232. HSL ja HWB kuvaavat saman värin ihmisen tavalla: värisävynä värympyrällä sekä sen vaaleutena, tummuutena tai harmaan määränä.

OKLCH on uudempi kuvaus, jossa vaaleus vastaa melko hyvin silmän näkemää: kaksi samanvaaleaa väriä näyttävät yhtä vaaleilta, mitä sRGB-pohjainen HSL ei takaa (CSS Color Module Level 4; Ottosson, 2020). Sävyt ja varjostukset säilyttävät värisävyn ja värikylläisyyden ja muuttavat vain OKLCH-vaaleutta, joten rivi näyttää tasaisesti porrastetulta. Jos väriä ei voi näyttää kyseisellä vaaleudella, kylläisyyttä lasketaan, kunnes se mahtuu.

Lähin CSS-nimi on se 148 nimetystä väristä, jonka ero OKLab-avaruudessa on pienin; avaruus on tehty niin, että yhtä suuret etäisyydet näyttävät yhtä erilaisilta. Tavallisen näytön (sRGB) ulkopuolinen väri näytetään lähimpänä sopivana värinä.

Sponsoroidut linkit

Usein kysyttyä

Mitä 8-numeroinen hex-koodi tarkoittaa?

Kaksi viimeistä numeroa ovat peittävyys, 00:sta (näkymätön) ff:ään (umpinainen). Väri, joka ei ole täysin peittävä, kirjoitetaan niiden kanssa, ja sen värilaatta on ruudukon päällä.

Miksi samanvaaleat HSL-värit voivat näyttää erilaisilta?

HSL-vaaleus lasketaan näytön punaisen, vihreän ja sinisen arvoista, ei siitä, miltä väri näyttää. Keltainen näyttää paljon vaaleammalta kuin sininen samalla HSL-vaaleudella, ja siksi sävyissä käytetään OKLCH:ta.

Mitä muotoa käytän CSS:ssä?

Kaikki toimivat nykyisissä selaimissa. HEX on yleisin ja lyhin, HSL on helppo säätää käsin ja OKLCH sopii parhaiten tasaisesti porrastettuihin paletteihin ja voi näyttää sRGB:tä laajempia värejä laajan värialueen näytöillä.

Vastaako lähin CSS-nimi väriäni täsmälleen?

Ei aina. Työkalu erottaa tarkan vastineen lähimmästä nimetystä väristä.

Voiko sillä muuntaa maalivärejä tai ICC-profiileja?

Ei. Se käsittelee CSS-värejä, ei fyysisten maalien värijärjestelmiä tai ICC-väriprofiileja.

Seuraavaksi saatat tarvita

Lisää kategoriasta Verkko ja kehittäjät

Kaikki 18 työkalua kategoriassa Verkko ja kehittäjät

Suosittua nyt

Sponsoroidut linkit

Sponsoroidut linkit