tigtools

Värimuunnin

Kirjoita tai liitä väri missä tahansa tuetussa muodossa tai valitse väri, niin kaikki muut muodot päivittyvät heti.

Toimii selaimessasi Ei rekisteröitymistä

Luettu muodossa HEX.

HEX
#336699
RGB
rgb(51, 102, 153)
HSL
hsl(210, 50%, 40%)
HWB
hwb(210 20% 40%)
OKLCH
oklch(49.93% 0.0987 250.43)
CMYK
cmyk(66.7%, 33.3%, 0%, 40%)

CMYK on tässä yksinkertainen kaava, ei värinhallittu. Tulostusta varten muunna käyttämällä tulostimesi antamaa ICC-profiilia.

Käyttöohje

  1. Kirjoita tai liitä väri, esimerkiksi #1e90ff, rgb(30 144 255) tai oklch(65% 0.18 250). Voit myös napsauttaa värivalitsinta.
  2. Tarkista värimalli, että se on odottamasi väri.
  3. Kopioi tarvitsemasi muoto luettelosta. Läpinäkyvyyttä sisältävät arvot säilyttävät alfakanavansa.

Näin se toimii

Hyväksytyt syötteet: HEX, jossa on 3, 4, 6 tai 8 numeroa (4. ja 8. numero ovat alfakanavaa), rgb() ja rgba() numeroilla tai prosentteina, hsl() ja hsla(), hwb(), oklch() ja cmyk() prosentteina tai numeroina 0–100. Sekä perinteinen pilkkusyntaksi että moderni välilyöntisyntaksi muodossa “/ alpha” toimivat. Sävy hyväksyy deg, turn, rad ja grad. Nimettyjä värejä, kuten “tomato”, ei lueta; käytä värinvalitsinta tai koodia.

Kaikki muunnokset tapahtuvat sRGB:n kautta. HSL ja HWB ovat yksinkertaisia RGB-arvojen uudelleenmuotoiluja, joten ne muuntuvat tarkasti. OKLCH on havainnollinen väriavaruus: yhtä suuret askeleet sen vaaleudessa näyttävät suunnilleen yhtä erilaisilta, mikä tekee siitä hyödyllisen väripalettien rakentamiseen. Se lasketaan julkaistuilla OKLab-matriiseilla. Jotkin OKLCH-värit ovat sRGB:n näyttökyvyn ulkopuolella; työkalu ilmoittaa siitä ja näyttää lähimmän näytettävän värin.

CMYK lasketaan yleisellä yksinkertaisella kaavalla (K = 1 − suurin RGB-kanava). Todellinen tulostusjälki riippuu paperista, musteesta ja ICC-profiilista, joten käsittele näitä lukuja lähtökohtana, älä tulostusmäärittelynä.

Esimerkit

Brändin HEX-koodista CSS:ään

Tyylioppaassa annetaan #0b5d1e. Liitä se saadaksesi rgb(11, 93, 30) vanhempaa CSS:ää varten, hsl(133.9, 78.8%, 20.4%) vaaleuden säätämiseen käsin ja oklch()-arvon moderneja CSS-väritoimintoja varten.

Läpinäkyvän värin lukeminen

rgba(0, 0, 0, 0.5) muuntuu muotoon #00000080. Kaksi viimeistä HEX-merkkiä (80) ovat alfakanava: 128/255 eli noin 50 %.

OKLCH-arvon tarkistaminen suunnittelutiedostosta

oklch(70% 0.4 150) on erittäin kylläinen vihreä, jota sRGB-näytöt eivät pysty näyttämään. Työkalu merkitsee sen ja antaa lähimmän sRGB-värin, joten tiedät, että suunnitelma näyttää erilaiselta useimmilla näytöillä.

Usein kysytyt kysymykset

Miksi HEX-arvo joskus muuttuu yhdellä, kun värin muuntaa HSL:ään ja takaisin?

HEX tallentaa kokonaisluvut 0–255 jokaista kanavaa kohden. Muissa muodoissa arvot pyöristetään näyttöä varten (HSL yhden desimaalin tarkkuudella), ja pyöristetyn arvon muuntaminen takaisin voi heittää yhden pykälän verran. Kopioi HEX-arvo, jos tarvitset tarkan alkuperäisen.

Onko CMYK-arvo oikea painatukseen?

Ei sellaisenaan. Se käyttää yksinkertaista kaavaa ilman väriprofiilia. Painotalot käyttävät profiileja, kuten FOGRA tai GRACoL, jotka antavat eri lukemat, joten kysy painotaloltasi tai tee muunnos värinhallintaa tukevassa sovelluksessa.

Mikä OKLCH on ja voinko käyttää sitä CSS:ssä?

OKLCH kuvaa värin havaitun vaaleuden, kylläisyyden (värikkyyden) ja sävyn avulla. Suurimpien selainten nykyiset versiot tukevat oklch()-merkintää CSS:ssä. Pidä HEX- tai rgb()-varavaihtoehto, jos tuet vanhempia selaimia.

Mitä 8-merkkinen HEX-koodi tarkoittaa?

#RRGGBBAA: kaksi viimeistä merkkiä ovat peittävyys, 00 (täysin läpinäkyvä) – ff (täysin peittävä). Nelimerkkinen muoto #RGBA toimii samalla tavalla yhdellä merkillä kanavaa kohden.

Tietosuoja

Värit muunnetaan selaimessasi. Mitään syöttämääsi ei lähetetä minnekään eikä tallenneta.