Värimuunnin

Mika on varimuunnin?

Varimuunnin kaantaa variarvot eri varimallien — HEX, RGB, HSL, HSV ja CMYK — valilla. Suunnittelijat ja kehittajat tarvitsevat usein formaattien vaihtamista: CSS kayttaa HEX:ia ja RGB:ta, suunnittelutyokalut kayttavat usein HSL:aa intuitiiviseen varien valintaan, ja painotyonkulut vaativat CMYK:ta. Tama tyokalu kasittelee kaikki muunnokset valittomasti.

Jokainen varimalli esittaa varit eri tavalla. RGB (punainen, vihrea, sininen) sekoittaa valoa — sita kaytetaan naytoissa. CMYK (syaani, magenta, keltainen, avain/musta) sekoittaa mustetta — sita kaytetaan painamisessa. HSL (savy, kyllaistys, valoisuus) kuvaa vareja tavalla, jolla ihmiset ajattelevat niita — puhdas vari, elavyys ja kirkkaus. HEX on vain RGB kirjoitettuna heksadesimaalina.

Varimallit selitettyna

• HEX — kuusinumeroinen heksadesimaalikoodi (#FF5733). Tiivis ja laajasti kaytetty web-kehityksessa.
• RGB — kolme arvoa (0-255) punaiselle, vihrealle ja siniselle. Nayttojen natiivi varimalli.
• HSL — savy (0-360 astetta), kyllaistys (0-100 %) ja valoisuus (0-100 %). Intuitiivinen varipalettien luomiseen.
• HSV/HSB — samanlainen kuin HSL mutta kayttaa arvoa/kirkkautta valoisuuden sijaan. Yleinen graafisen suunnittelun tyokaluissa.
• CMYK — nelja arvoa (0-100 %) syaanille, magentalle, keltaiselle ja mustalle. Kaytetaan painotuotannossa.

Tyokalun kayttohje

Syota variarvo missa tahansa tuetussa muodossa ja kaikki muut esitykset lasketaan valittomasti. Kayta varivalitsinta visuaaliseen valintaan. Tyokalu nayttaa esikatselunayteen ja muunnetut arvot HEX-, RGB-, HSL-, HSV- ja CMYK-muodoissa, valmiina kopioitaviksi ja liitettaviksi koodiisi tai suunnittelutyokaluusi.

Varit web-kehityksessa

CSS tukee useita varimuotoja: hex (#ff5733), rgb(255, 87, 51), hsl(11, 100%, 60%) ja nimettya vareja (tomato). Moderni CSS tukee myos oklch()- ja oklab()-funktioita havainnollisesti yhtenaisille variavaruuksille. Muotojen valinnassa HEX on tiivein, HSL on helpoin saeaetae ohjelmallisesti (vaalenna lisaamalla L:aa, sammuta vahentamalla S:aa) ja RGB on laajimmin tuettu.

Laskuesimerkki

Heksaväri #2563EB jakautuu punaiseksi = 0x25 = 37, vihreäksi = 0x63 = 99, siniseksi = 0xEB = 235, eli rgb(37, 99, 235). HSL:ksi muunnettuna tulos on noin hsl(217, 83%, 53%) — kylläinen sininen. Vaalenna nostamalla L-arvoa; rakenna paletti kääntämällä H-arvoa 30°:n askelin pitäen S ja L vakiona.

Yleisiä virheitä

Yleinen virhe on olettaa, että heksa ja RGB kuvaavat eri värejä — ne ovat samat arvot eri merkinnällä. Usein unohdetaan myös kontrasti: vaaleanharmaa teksti valkoisella voi näyttää tyylikkäältä mutta ei täytä WCAG-suhteita. Lisäksi RGB ja CMYK eivät vastaa toisiaan yksi yhteen, joten kirkas näyttöväri voi tulostua tummemmaksi; tee vedostus tulostusta varten äläkä luota näyttöön.

Usein kysytyt kysymykset

Miksi varit nayttavat erilaisilta naytolla ja painettaessa?

Naytot lahettavat valoa (RGB, additiivinen varien sekoitus), kun taas tulostimet kayttavat mustetta, joka imee valoa (CMYK, subtraktiivinen sekoitus). RGB-variavaruus on laajempi kuin CMYK, joten joitakin eloisia naytonvareja ei voida toistaa painettaessa. Taman vuoksi suunnittelijoiden tulisi tyoskennella CMYK:ssa painotuotteita luodessaan ja kayttaa Pantone-vareja kriittisessa varien tasmayksessa.

Mika on HSL:n ja HSV:n ero?

Molemmat kayttavat savya ja kyllaistyytta, mutta eroavat kolmannessa komponentissa. HSL:n valoisuus vaihtelee 0:sta (musta) 0,5:n (puhdas vari) kautta 1:een (valkoinen). HSV:n arvo vaihtelee 0:sta (musta) 1:een (taysi kirkkaus). HSL:ssa 100 % kyllaistys 50 % valoisuudella antaa puhtaimman varin. HSV:ssa 100 % kyllaistys ja 100 % arvo antaa puhtaimman varin. HSL on yleensa intuitiivisempi web-suunnitteluun.

Mikä ero on HEX:n, RGB:n ja HSL:n välillä?

Kaikki kolme kuvaavat samoja näytön värejä. HEX ja RGB ilmoittavat punaisen, vihreän ja sinisen määrät (16- tai 10-kantaisina), kun taas HSL käyttää sävyä, kylläisyyttä ja vaaleutta, mikä on intuitiivisempaa palettien säätöön tai luontiin.