CodeKitHubMikä tämä työkalu on?
Verkossa värit kirjoitetaan useassa toisiaan vastaavassa muodossa, jotka kaikki on määritelty MDN:n CSS Color -spesifikaatiossa. HEX (#4f46e5) on tiivis muoto, jota käytetään kaikkialla CSS:ssä ja suunnittelun luovutuksissa. RGB (rgb(79, 70, 229)) ilmaisee suoraan punaisen, vihreän ja sinisen komponentit, joita koodi usein tarvitsee. HSL (hsl(243, 75%, 59%)) kuvaa sävyn, kylläisyyden ja vaaleuden — intuitiivisin muoto värin säätämiseen, esimerkiksi sen tummentamiseen tai kylläisyyden vähentämiseen.
Ne kaikki kuvaavat samaa väriä; tämä työkalu muuntaa niiden välillä täsmällisesti ja näyttää esikatselun, jotta voit varmistaa sen olevan tarkoittamasi väri.
Miksi käyttää sitä?
- Hyväksyy minkä tahansa muodon sisään — HEX (3 tai 6 numeroa), RGB tai HSL — ja antaa kaikki muodot ulos.
- Reaaliaikainen esikatselunäyte, jolloin näet värin, et vain numeroita.
- Visuaalinen värivalitsin, jos haluat valita silmämääräisesti.
- Yhden klikkauksen kopiointi kutakin muotoa kohti, valmiina CSS:ään tai koodiin.
- Ilmainen, välitön, ei latauksia.
Käyttöohje
- Kirjoita tai liitä väri: #4f46e5, rgb(79, 70, 229) tai hsl(243, 75%, 59%) toimivat kaikki.
- Tai klikkaa värivalitsinta ja valitse visuaalisesti.
- Lue kaikki kolme muotoa tuloksista ja tarkista esikatselunäyte.
- Klikkaa "Kopioi" tarvitsemasi muodon vierestä.
Esimerkki
Syöte
#4f46e5Tuloste
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Kolme merkintätapaa, yksi sama väri.
Mitä muotoa kannattaa käyttää?
Kaikki kolme kuvaavat täsmälleen samaa väriä — valinta koskee sitä, mikä on käsillä olevalle tehtävälle helpoin käyttää, ei tarkkuutta.
| Muoto | Sopii parhaiten | Miksi |
|---|---|---|
| HEX (#4f46e5) | CSS, suunnittelun luovutukset, nopea kopiointi ja liittäminen | Lyhin kirjoittaa ja liittää; yleisin muoto suunnittelutyökaluissa kuten Figma. |
| RGB (rgb(79,70,229)) | Koodi, joka käsittelee kanavia suoraan, canvas- ja kuvatyö | Vastaa sitä, miten grafiikkarajapinnat ja kuvien pikselidata todella tallentavat värin. |
| HSL (hsl(243,75%,59%)) | Värin säätäminen — vaaleampi, tummempi, kylläisempi/vähemmän kylläinen | Vaaleus ja kylläisyys ovat erillisiä lukuja, joita voit säätää suoraan, toisin kuin HEX/RGB:ssä, jossa jokainen kanava muuttuu. |
Yleisiä käyttötapauksia
- Värin valitseminen visuaalisesti suunnittelutyökalussa ja sen muuntaminen tarkaksi HEX- tai RGB-arvoksi, jota CSS:ssä tai koodissa tarvitaan.
- Sarjan toisiinsa liittyviä sävyjä (vaaleampia/tummempia variaatioita) luominen muuntamalla HSL-muotoon, säätämällä vaaleutta ja muuntamalla takaisin.
- Brändivärin sovittaminen eri työkalujen välillä, jotka kukin odottavat eri muotoa — logotiedosto RGB:ssä, tyylioppaassa HEX ja CSS-muuttuja, joka tarvitsee HSL:ää teemoitusta varten.
- Sen tarkistaminen, että kuvakaappauksesta tai suunnittelutiedostosta poimittu väri (usein annettu RGB-muodossa) vastaa tyylitiedoston HEX-arvoa.
Usein kysytyt kysymykset
Milloin kannattaa käyttää HSL:ää HEX:in tai RGB:n sijaan?
Kun haluat päätellä väristä loogisesti. Värin tummentaminen 10 % HSL:ssä tarkoittaa vaaleuden alentamista 10 pisteellä; HEX:ssä tai RGB:ssä joutuisit laskemaan kaikki kanavat uudelleen. Suunnittelujärjestelmät määrittelevät väripaletit usein HSL:ssä juuri tästä syystä.
Tukeeko työkalu 3-numeroista HEX-muotoa kuten #fff?
Kyllä. #fff on lyhenne muodolle #ffffff — jokainen numero kahdennetaan. Molemmat muodot hyväksytään, ja tulos näytetään täydessä 6-numeroisessa muodossa.
Entä läpinäkyvyys (alfa)?
Tämä työkalu muuntaa läpinäkymättömiä värejä (RGB/HSL-arvot). Jos tarvitset läpinäkyvyyttä, lisää alfa itse: rgba(79, 70, 229, 0.5) tai #4f46e580 — väriosa pysyy samana.
Miksi HSL-arvoni eroavat yhdellä toisesta työkalusta?
Pyöristys. HSL↔RGB-muunnos tuottaa desimaaliarvoja, ja työkalut pyöristävät eri tavoin. ±1 ero sävyssä tai prosentissa on näkymätön ja normaali.
Tuetaanko värinimiä kuten 'red'?
Ei vielä ensimmäisessä vaiheessa — työkalu keskittyy kolmeen numeeriseen muotoon, joita kehittäjät muuntavat eniten. Syötä värin HEX-, RGB- tai HSL-arvo, tai valitse se visuaalisesti valitsimella.
Milloin kannattaa käyttää HEX-, RGB- vai HSL-muotoa?
Jos tarvitset läpinäkyvyyttä, käytä 8-numeroista HEX-muotoa (#RRGGBBAA) tai rgba()-muotoa — 6-numeroisessa HEX-muodossa ei ole alfakanavaa. Jos haluat värisi vaaleampia tai tummempia variaatioita, HSL on helpoin: pidä sävy ja kylläisyys kiinteinä ja muuta vain vaaleuslukua. Pelkkään kopioimiseen ja liittämiseen CSS:ään tai suunnittelutyökaluihin 6-numeroinen HEX on edelleen laajimmin hyväksytty muoto.