Mitä kaikki 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ärin voimakkuuden ja vaaleuden perusteella, joten niitä on helpompi säätää käsin. CMYK ilmoittaa painatuksessa käytettävän syaanin, magentan, keltaisen ja mustan musteen määrät. LAB, LCH, OKLab ja OKLCH on suunniteltu niin, että niiden arvojen yhtä suuret muutokset näyttävät silmään yhtä suurilta. Tämä helpottaa väripalettien ja liukuvärien luomista, ja moderni CSS tukee kaikkia neljää. Päätteissä käytetään ANSI-värikoodeja, ja CSS sisältää myös nimettyjä värejä, kuten tomato.

Tässä sama oranssi kussakin muodossa:

Muoto Esimerkki Mitä arvot tarkoittavat
HEX #ff6600 Punainen, vihreä ja sininen, kukin kahtena heksadesimaalinumerona
RGB rgb(255, 102, 0) Punainen, vihreä ja sininen asteikolla 0–255
HSL hsl(24, 100%, 50%) Sävy, kylläisyys ja valoisuus
HSV hsv(24, 100%, 100%) Sävy, kylläisyys ja arvo; käytetään myös nimeä HSB
HWB hwb(24 0% 0%) Sävy, valkoisuus ja mustuus
CMYK cmyk(0%, 60%, 100%, 0%) Syaani, magenta, keltainen ja musta muste
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, kroma ja sävy
OKLab oklab(69.58% 0.1482 0.1406) Vaaleus ja kaksi väriakselia uudemmassa mallissa kuin LAB
OKLCH oklch(69.58% 0.2043 43.49) Vaaleus, kroma ja sävy OKLab-mallissa
XYZ xyz(46, 30.77, 3.52) CIE 1931 -väriavaruus, johon LAB perustuu
HCG hcg(24, 100%, 0%) Sävy, kroma ja harmaus
Värin nimi orangered Lähin nimetty CSS-väri
ANSI 16 91 Yhden 16 perusväristä päätekoodi
ANSI 256 208 Yhden 256 väristä päätekoodi
AppleScript RGB {65535, 26214, 0} Punainen, vihreä ja sininen asteikolla 0–65535 AppleScriptin esitystavan mukaan
Harmaasävy gray(46.7%) Kirkkaus asteikolla 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ä sen alla. Kaikki tämän sivuston värimuuntimet toimivat samalla tavalla: yleisestä värimuuntimesta yksittäisen muunnosparin työkaluihin, kuten HEX-muunnos RGB-muotoon, RGB-muunnos CMYK-muotoon tai HEX-muunnos värin nimeksi. Työkalu avautuu nimessään mainituilla muodoilla, ja Lähde- ja Kohde-valikoista voit valita mitkä tahansa muut muodot. Liitä väri, niin tulos näkyy kirjoittaessasi ja on heti kopioitavissa. Kun lähteeksi on valittu Automaattinen tunnistus, kuten värimuuntimessa oletuksena, työkalu päättelee muodon värin esitystavasta. 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 arvojen välissä on pilkut tai välilyönnit. Peittävyys voidaan ilmoittaa valinnaisena 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 luvut ilman funktion nimeä, kuten 255, 102, 0. Automaattinen tunnistus tulkitsee kolme lukua RGB-arvoiksi tai HSL-arvoiksi, jos kaksi viimeistä ovat prosentteja, ja neljä lukua CMYK-arvoiksi, elleivät ne vaikuta RGB-arvoilta, joihin sisältyy peittävyys.
  • Värien nimet kirjainkoosta riippumatta, välilyönneillä tai ilman: Rebecca Purple toimii.
  • hsb()-muodossa kirjoitetut HSB-arvot sekä aaltosulkeisiin kirjoitetut AppleScript-värit, kuten {65535, 26214, 0}.

Näin 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 ilmoittaa. Muista muodoista se jätetään pois.
  • LAB, LCH ja XYZ ovat CIE-arvoja, joiden valkopiste on D65. CSS:n lab()- ja lch()-funktioissa käytetään 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 kanavat rajataan välille 0–255, joten oklch(70% 0.3 145) muuttuu muotoon #00c800.
  • Värin nimeksi annetaan lähin nimetty CSS-väri, joten tulos on täsmällinen vain silloin, kun värillä on nimi: #ff6600 antaa tulokseksi orangered, joka vastaa väriä #ff4500.
  • ANSI 16- ja ANSI 256 -tulokset ovat likimääräisiä, koska näissä paleteissa on vain 16 tai 256 väriä. ANSI 16 -tulokset ovat tekstin värikoodeja 30–37 ja 90–97, ja taustavärikoodit 40–47 ja 100–107 tulkitaan samoiksi väreiksi.
  • CMYK lasketaan peruskaavalla ilman tulostimen väriprofiilia, joten painotalon samalle värille ilmoittamat CMYK-arvot voivat poiketa näistä.
  • Harmaasävy on punaisen, vihreän ja sinisen arvojen keskiarvo.

Vinkkejä

  • HEX-, RGB-, HSL-, HWB-, OKLab-, OKLCH- ja värinimen tulokset ovat kelvollista CSS:ää, joten voit liittää ne sellaisinaan tyylitiedostoon.
  • Automaattinen tunnistus tulkitsee kolminumeroisen luvun, kuten 208, lyhyeksi HEX-koodiksi. Valitse siis päätekoodeille lähteeksi ANSI 256 tai ANSI 16.
  • HSV ja HSB ovat saman mallin kaksi nimeä.