Löysit täydellisen värin HEX-muodossa, mutta käyttämäsi suunnittelutyökalu vaatii RGB:tä. Tai asiakas lähetti värin RGB:nä ja tarvitset HSL-arvon CSS:ään. Värimuodon muuntaminen on päivittäinen tehtävä suunnittelijoille ja kehittäjille. Värimuunnin-työkalumme tekee siitä välitöntä.
Mitä tarvitset
- Värin arvo missä tahansa muodossa (HEX, RGB, HSL tai muut)
- Verkkoselain (Chrome, Firefox, Safari tai Edge)
- Ei tiliä tai asennusta tarvita
Vaiheittainen opas
Syötä väriarvosi
Avaa värimuunnin-työkalu. Kirjoita tai liitä väriarvosi missä tahansa tuetussa muodossa. Esimerkiksi syötä #3B82F6 HEX-arvona, rgb(59, 130, 246) RGB:nä tai hsl(217, 91%, 60%) HSL:nä. Työkalu tunnistaa muodon automaattisesti.
Katso kaikki muodon muunnokset
Työkalu näyttää välittömästi värisi kaikissa tuetuissa muodoissa: HEX, RGB, HSL ja muut. Näet reaaliaikaisen esikatselun väristä kaikkine vastaavine arvoineen rinnakkain. Jos sinun täytyy säätää väriä, käytä värinvalitsin hienosäätääksesi sitä visuaalisesti.
Kopioi tarvitsemasi muoto
Napsauta minkä tahansa muodon vieressä olevaa kopiointipainiketta kopioidaksesi arvon leikepöydälle. Liitä se suoraan CSS-tiedostoon, suunnittelutyökaluun tai minne tarvitset sen. Ei manuaalista uudelleenkirjoittamista tarvita.
Hyvä tietää Värimuunnin toimii kokonaan selaimessasi. Se toimii offline-tilassa kerran ladattuna eikä vaadi tiliä tai asennusta.
Värimuotojen ymmärtäminen
Eri työkalut ja kontekstit käyttävät eri värimuotoja. Tässä milloin käyttää mitäkin:
HEX
Yleisin muoto verkossa. HEX-väri alkaa #-merkillä jota seuraa kuusi merkkiä (kirjaimia ja numeroita), kuten #FF5733.
- Käytetään: CSS:ssä, HTML:ssä, suunnittelutyökaluissa (Figma, Sketch, Photoshop)
- Muoto:
#RRGGBBjossa kukin pari on heksadesimaaliarvo väliltä 00–FF - Esimerkki:
#3B82F6(keskinsininen)
RGB
Kuvaa värin punaisen, vihreän ja sinisen komponenttien avulla, jotka vaihtelevat väliltä 0–255.
- Käytetään: CSS:ssä (
rgb()-funktio), ohjelmointikielissä, LED-valaistuksessa - Muoto:
rgb(punainen, vihreä, sininen) - Esimerkki:
rgb(59, 130, 246)
HSL
Kuvaa värin käyttäen Hue (sävy, 0–360 astetta väriympyrällä), Saturation (kylläisyys, 0–100 %) ja Lightness (kirkkaus, 0–100 %).
- Käytetään: CSS:ssä (
hsl()-funktio), väriteorian, suunnittelujärjestelmissä - Muoto:
hsl(sävy, kylläisyys%, kirkkaus%) - Esimerkki:
hsl(217, 91%, 60%)
Vinkki HSL on intuitiivisin muoto värien säätämiseen. Haluatko vaaleamman sävyn? Lisää kirkkauden arvoa. Haluatko mykistetyn sävyn? Pienennä kylläisyyttä. Tämä tekee HSL:stä ihanteellisen värijärjestelmien rakentamiseen ja perusvärin variaatioiden luomiseen.
Milloin käyttää mitäkin muotoa
| Tilanne | Suositeltu muoto |
|---|---|
| CSS:n kirjoittaminen käsin | HEX (lyhyt ja tuttu) tai HSL (helppo säätää) |
| Suunnittelutyökalun spesifikaatiot | HEX (alan standardi) |
| Dynaaminen värimanipulaatio koodissa | HSL (helpoin säätää ohjelmallisesti) |
| Värien kommunikointi asiakkaille | HEX (yleisimmin tunnistettu) |
| Painosuunnittelu | CMYK (erillinen näyttömuodoista) |
Yksittäisten värien yli meneminen
Kun värisi on muunnettu, saatat haluta tutkia liittyviä työkaluja:
- Liukuvärigeneraattori: Luo tasaiset CSS-liukuvärit väreistäsi. Syötä kaksi tai useampi väri ja saat liukuvän koodin valmiiksi liitettäväksi tyylitiedostoon.
- Väripalettegeneraattori: Luo harmonisia väripaletteja lähtövärisi perusteella. Saat täydentävät, analogiset, triadiset ja muut värikaavat automaattisesti.
Nämä työkalut toimivat käsi kädessä värimuuntimen kanssa auttaen sinua rakentamaan täydellisen värijärjestelmän projektiisi.
Tärkeää Värit voivat näyttää erilaisilta eri näytöillä näytön kalibroinnin, väriprofiilien ja kirkkauden asetusten vuoksi. Kun värien tarkkuus on kriittinen (brändäys, painosuunnittelu), tarkista aina värit kohdealustalla, ei vain näytölläsi.
Usein kysytyt kysymykset
Mikä on ero HEX:n ja RGB:n välillä?
Ne esittävät saman tiedon eri notaatioilla. HEX käyttää heksadesimaalista (kanta-16) ja RGB käyttää desimaalista (kanta-10). #FF0000 ja rgb(255, 0, 0) ovat molemmat puhdasta punaista.
Voinko muuntaa CMYK:ksi painoa varten? Näyttövärimuodot (HEX, RGB, HSL) ja painomuodot (CMYK) ovat perustavanlaatuisesti eri värimalleja. Matemaattinen muunnos on olemassa, mutta tarkkoja painovärejä varten sinun pitäisi käyttää ammattimaista värihallintatyökalua.
Entä läpinäkyvyys (alfa)?
HEX tukee alfaa kahdella lisämerkillä (#3B82F680). RGB ja HSL tukevat sitä rgba()- ja hsla()-funktioina. Värimuunnin käsittelee myös nämä muodot.
Seuraavat vaiheet
Värisi muunnettua, kokeile liukuvärigeneraattoria kaunisten CSS-liukuvärien luomiseen tai käytä väripalettegeneraattoria täydellisen värijärjestelmän rakentamiseen valitsemasi värin ympärille.