Mitä nämä värimuodot tarkoittavat?

Näytöllä näkyvä väri on punaisen, vihreän ja sinisen valon yhdistelmä, ja kukin muoto esittää tämän yhdistelmän omalla tavallaan. CSS- ja suunnittelutyökaluissa käytetään HEX-koodeja ja RGB-arvoja. HSL, HSV ja HWB kuvaavat väriä sen sävyn eli väripyörän kulman sekä värikylläisyyden ja vaaleuden perusteella, joten niitä on helpompi säätää käsin. CMYK ilmaisee syaanin, magentan, keltaisen ja mustan painomusteen määrät. LAB, LCH, OKLab ja OKLCH on suunniteltu niin, että niiden arvojen yhtä suuret muutokset näyttävät silmään suunnilleen yhtä suurilta. Tämä helpottaa väripalettien ja liukuvärien luomista, ja nykyaikainen CSS tukee kaikkia neljää. Päätteissä käytetään ANSI-värikoodeja, ja CSS:ssä on myös nimettyjä värejä, kuten tomato.

Tässä sama oranssi väri eri muodoissa:

Muoto Esimerkki Mitä arvot tarkoittavat
HEX #ff6600 Punainen, vihreä ja sininen, kukin kahtena heksadesimaalinumerona
RGB rgb(255, 102, 0) Punainen, vihreä ja sininen välillä 0–255
HSL hsl(24, 100%, 50%) Sävy, kylläisyys ja vaaleus
HSV hsv(24, 100%, 100%) Sävy, kylläisyys ja arvo; tunnetaan myös nimellä HSB
HWB hwb(24 0% 0%) Sävy, valkoisuuden määrä ja mustuuden määrä
CMYK cmyk(0%, 60%, 100%, 0%) Syaanin, magentan, keltaisen ja mustan painomusteen määrä
LAB lab(62.31, 55, 71.33) CIE-vaaleus, vihreästä punaiseen ja sinisestä keltaiseen
LCH lch(62.31, 90.07, 52.36) CIE-vaaleus, värikylläisyys ja sävy
OKLab oklab(69.58% 0.1482 0.1406) Vaaleus ja kaksi väriakselia, kuten LAB-muodossa
OKLCH oklch(69.58% 0.2043 43.49) Vaaleus, värikylläisyys ja sävy OKLab-muodossa
XYZ xyz(46, 30.77, 3.52) CIE:n XYZ-väriavaruus, johon LAB perustuu
HCG hcg(24, 100%, 0%) Sävy, värikylläisyys ja harmaus
Värin nimi orangered Lähin CSS:ssä nimetty väri
ANSI 16 91 Päätteen koodi yhdelle 16 perusväristä
ANSI 256 208 Päätteen koodi yhdelle 256 väristä
AppleScript RGB {65535, 26214, 0} Punainen, vihreä ja sininen välillä 0–65535 AppleScriptin esitystavan mukaisesti
Harmaasävy gray(46.7%) Kirkkaus välillä 0–100 %

Työkalun kuvaus

Tämä työkalu muuntaa värejä näiden 17 muodon välillä ja näyttää tuloksen värinäytteenä. Kaikki tämän sivun värimuuntimet toimivat samalla tavalla: yleisestä värimuuntimesta yksittäisten muotoparien muuntimiin, kuten HEX–RGB, RGB–CMYK tai HEX–värin nimi. Muunnin avautuu nimessään mainituilla muodoilla, ja Lähde- ja Kohde-valikoista voit valita niiden tilalle mitkä tahansa muut muodot. Liitä väri, niin tulos tulee näkyviin kirjoittaessasi ja on heti kopioitavissa. Kun lähteeksi valitaan Automaattinen tunnistus, joka on värimuuntimen oletusvalinta, työkalu päättelee muodon värin kirjoitusasusta. Vaihtopainike kääntää muunnoksen suunnan.

Esimerkkejä

Syöte Kohde Tulos
#ff6600 RGB rgb(255, 102, 0)
rgb(37, 99, 235) HEX #2563eb
#2563eb HSL hsl(221.2, 83.2%, 53.3%)
rgb(37, 99, 235) CMYK cmyk(84.3%, 57.9%, 0%, 7.8%)
#2563eb HSV hsv(221.2, 84.3%, 92.2%)
#2563eb OKLCH oklch(54.61% 0.2152 262.88)
rgb(37, 99, 235) LAB lab(46.06, 30.96, -73.83)
#ff6347 Värin nimi tomato
rebeccapurple HEX #663399
rgba(37, 99, 235, 0.5) HEX #2563eb80

Mitä voit liittää

  • HEX-koodit, joissa on 3, 4, 6 tai 8 numeroa, joko #-merkin kanssa tai ilman sitä. Neljäs numero tai viimeinen numeropari määrittää peittävyyden.
  • Funktiot, kuten rgb(), hsl() tai oklch(), joiden arvot erotetaan pilkuilla tai välilyönneillä. Mukana voi olla myös valinnainen peittävyys neljäntenä arvona tai kauttaviivan jälkeen: rgba(37, 99, 235, 0.5) tai rgb(37 99 235 / 50%).
  • Punaisen, vihreän ja sinisen prosenttiarvot, kuten rgb(100%, 40%, 0%), sekä sävyt yksiköissä deg, rad, grad tai turn, kuten hsl(0.5turn, 100%, 50%).
  • Pelkät numerot ilman funktion nimeä, kuten 255, 102, 0. Automaattinen tunnistus tulkitsee kolme numeroa RGB-arvoiksi tai HSL-arvoiksi, jos kaksi viimeistä ovat prosentteja, ja neljä numeroa CMYK-arvoiksi, elleivät ne vaikuta RGB-arvoilta, joihin sisältyy peittävyys.
  • Värien nimet missä tahansa kirjainkoossa, välilyönneillä tai ilman niitä: myös Rebecca Purple toimii.
  • hsb()-muodossa kirjoitetut HSB-arvot sekä aaltosulkeisiin kirjoitetut AppleScript-värit, kuten {65535, 26214, 0}.

Miten se toimii

Laskenta tehdään color-convert-kirjastolla, joka on JavaScript-kirjasto värien muuntamiseen.

  • Peittävyys säilyy HEX-, RGB-, HSL-, HWB-, OKLab- ja OKLCH-muodoissa, joissa sen voi esittää. Muissa muodoissa se jätetään pois.
  • LAB, LCH ja XYZ ovat CIE-arvoja, joissa käytetään D65-valkopistettä. CSS:n lab()- ja lch()-funktiot käyttävät D50-valkopistettä, joten niiden arvot poikkeavat hieman.
  • LAB, LCH, OKLab ja OKLCH voivat kuvata värejä, joita näytöt eivät pysty esittämään. Kun tällainen väri muunnetaan HEX-, RGB- tai muuhun näyttömuotoon, sen kanavien arvot rajataan välille 0–255, joten oklch(70% 0.3 145) muuttuu muotoon #00c800.
  • Värituloksena annetaan lähin CSS:ssä nimetty väri, joten tulos on täsmällinen vain sellaisten värien kohdalla, joilla on nimi: #ff6600 antaa tulokseksi orangered, joka vastaa väriä #ff4500.
  • ANSI 16- ja ANSI 256 -tulokset ovat likimääräisiä, sillä näissä paleteissa on vain 16 tai 256 väriä. ANSI 16 -tulokset ovat etualan värikoodeja, 30–37 ja 90–97. Taustan värikoodit 40–47 ja 100–107 tulkitaan samoiksi väreiksi.
  • CMYK-arvo lasketaan peruskaavalla ilman tulostimen väriprofiilia, joten painotalon saman värin CMYK-arvot voivat poiketa tästä.
  • Harmaasävy lasketaan punaisen, vihreän ja sinisen arvojen keskiarvona.

Vinkkejä

  • HEX-, RGB-, HSL-, HWB-, OKLab-, OKLCH- ja värin nimitulokset ovat kelvollista CSS:ää, joten voit liittää ne sellaisenaan tyylitiedostoon.
  • Automaattinen tunnistus tulkitsee esimerkiksi luvun 208 lyhyeksi HEX-koodiksi, joten valitse päätteen koodeille lähteeksi ANSI 256 tai ANSI 16.
  • HSV ja HSB ovat saman mallin kaksi nimeä.