Verkkosivujen suunnittelu ja CSS
Muunna kuvatiedostosta tai kuvakaappausvalitsimesta valittu väri tyylitiedostosi tarvitsemaksi heksakoodiksi.
RGB–HEX-muunnin — Muunna RGB-arvot heksadesimaalikoodeiksi ja heksadesimaalikoodit RGB-arvoiksi reaaliaikaisen esikatselun avulla.
Syötä punaisen, vihreän ja sinisen värit, valitse väri tai liitä heksakoodi ja katso kaikki muodot kerralla: HEX, RGB ja HSL. Reaaliaikainen esikatselu ja kontrastitarkistus osoittavat, mikä tekstiväri sopii parhaiten. Kaikki toimii selaimessasi.
Muunna väri
Värisi tallentuvat selaimeesi
Valitse tai kirjoita väri
Aa
Värikoodit
HEX
–RGB (CSS)
–HSL (CSS)
––Best text color on it
–Contrast ratio
Opas
RGB–HEX-opas: värikoodit, HSL ja kontrasti
Tutustu värikoodien toimintaan ja opi valitsemaan selkeitä väriyhdistelmiä.
Mitä RGB-HEX-muunnin tekee?
Näytöt tuottavat kaikki värit sekoittamalla punaista, vihreää ja sinistä valoa. RGB-värimallissa sekoitus ilmaistaan kolmella luvulla välillä 0–255. HEX-värimallissa samat kolme lukua esitetään 16-järjestelmässä lyhyenä koodina, kuten #1F3A5F, jota CSS, suunnittelutyökalut ja brändiohjeet yleensä käyttävät.
Syötä kolme numeroa, valitse väri värivalitsimella tai liitä heksakoodi. Kaikki muodot päivittyvät samanaikaisesti, ja saat lisäksi HSL-version sekä suosituksen siitä, mikä tekstiväri näkyy parhaiten kyseisellä taustalla.
Miksi ihmiset muuntavat RGB-arvot HEX-arvoiksi
Tuotemerkki ja asiakirjat
Varmista, että brändin värit ovat yhdenmukaiset logotiedostossa, diaesityksessä ja verkkosivustolla.
Esteettömyys
Tarkista, mikä tekstin väri sopii taustalle, ja tarkista kontrastisuhde ennen julkaisua.
Miten RGB muuttuu HEX-muotoon
Kukin kolmesta luvusta muunnetaan kaksimerkkiseksi 16-järjestelmän luvuksi, minkä jälkeen nämä kolme paria yhdistetään.
RGB: 31, 58, 95
31 = 1F (1 × 16 + 15)
58 = 3A (3 × 16 + 10)
95 = 5F (5 × 16 + 15)
HEX: #1F3A5F
16-järjestelmässä käytetään numeroita 0–9 ja kirjaimia A–F, joista A vastaa lukua 10 ja F lukua 15. Lyhytkoodi, kuten #FA0, on lyhennelmä: jokainen numero kaksinkertaistetaan, joten se tarkoittaa #FFAA00.
Yleiset värit RGB- ja HEX-muodossa
| Väri | RGB | HEX |
|---|---|---|
| Musta | 0, 0, 0 | #000000 |
| Valkoinen | 255, 255, 255 | #FFFFFF |
| Punainen | 255, 0, 0 | #FF0000 |
| Vihreä | 0, 255, 0 | #00FF00 |
| Sininen | 0, 0, 255 | #0000FF |
| Keltainen | 255, 255, 0 | #FFFF00 |
| Oranssi | 255, 165, 0 | #FFA500 |
| Harmaa | 128, 128, 128 | #808080 |
RGB-HEX-muuntimen käyttöohjeet
- Kirjoita punaisen, vihreän ja sinisen väriarvot tai napsauta värinäytettä käyttääksesi värivalitsinta.
- Tai liitä heksadesimaalikoodi Hex-kenttään, jos haluat toimia toisinpäin.
- Lue HEX-, RGB- ja HSL-koodit ja tarkista kontrastisuhde sekä paras tekstin väri.
- Napsauta ”Kopioi” -painiketta haluamasi muodon vieressä.
Yksinkertaisia vinkkejä värien käyttöön
- Jotta teksti olisi helposti luettavissa, pyri saavuttamaan kontrastisuhde, joka on vähintään 4,5 : 1 normaalikokoisen tekstin ja 3 : 1 suurikokoisen tekstin osalta.
- Heksakoodeissa ei erotella isoja ja pieniä kirjaimia, joten #1f3a5f ja #1F3A5F ovat sama väri.
- CSS:ssä tarvitaan etumerkkiä #, mutta tässä se on valinnainen. Voit liittää koodit joko sen kanssa tai ilman.
- Näytöt ja tulostimet toistavat värit eri tavalla, joten tulostettu väri ei välttämättä vastaa sitä, mitä näet näytöllä.
Rajoitukset ja tietosuoja
Tietosuoja
Värit muunnetaan selaimessasi. Mitään tietoja ei lähetetä palvelimellemme eikä tallenneta. Laitteellesi tallennetaan vain pienillä kirjaimilla tehty valinta.
Rajoitukset
Työkalu käyttää tavallisia 8-bittisiä sRGB-värejä, joiden arvot ovat 0–255 kanavaa kohti. Se ei tue läpinäkyvyyttä (RGBA tai 8-merkkinen heksadesimaali), painatukseen tarkoitettua CMYK-väriavaruutta eikä laajaväriskaalaa.
Usein kysyttyjä kysymyksiä
RGB–HEX-muuntimen usein kysytyt kysymykset
Miten muunnat RGB-arvon HEX-muotoon?
Syötä punaisen, vihreän ja sinisen värit, kukin arvoltaan 0–255. Työkalu muuntaa jokaisen luvun kahdeksi 16-järjestelmän numeroksi ja yhdistää ne, joten luvuista 31, 58 ja 95 tulee #1F3A5F.
Miten muunnat HEX-arvon RGB-arvoksi?
Liitä heksakoodi Hex-kenttään. Kolme RGB-lukua täyttyvät kerralla. Esimerkiksi #FF8800 on 255, 136, 0.
Tarvitseeko heksakoodi #-merkin?
Ei. Voit kirjoittaa sen joko #-merkin kanssa tai ilman, ja myös lyhenteet, kuten #FA0, toimivat. Tuloksessa on aina #-merkki mukana, joten se on valmis käytettäväksi CSS:ssä.
Mitä nämä kolme RGB-lukua tarkoittavat?
Ne kuvaavat punaisen, vihreän ja sinisen valon määrää asteikolla 0 (ei lainkaan) – 255 (täysi). 0, 0, 0 on musta ja 255, 255, 255 on valkoinen.
Mihin HSL-arvoa käytetään?
HSL-mallissa väri määritellään sävyn, kylläisyyden ja vaaleuden avulla. Sitä on usein helpompi säätää manuaalisesti, esimerkiksi vaalentamalla väriä hieman, ja se toimii suoraan CSS:ssä.
Mitä kontrastisuhde kertoo minulle?
Se osoittaa, kuinka hyvin musta tai valkoinen teksti erottuu taustaväristäsi. WCAG-saavutettavuusohjeiden mukaan suhdeluvun 4,5 : 1 tai suurempi on tavallisesti vähimmäisvaatimus tavalliselle tekstille.
Voinko käyttää läpinäkyvyyttä?
Ei tässä. Tämä työkalu käsittelee vain peittäviä värejä ilman alfakanavaa. Jos haluat läpinäkyvyyttä, lisää alfa-arvo itse CSS-koodisi rgba()-funktioon.
Tallennetaanko tai lähetetäänkö tietojani jonnekin?
Ei. Muunnos tapahtuu selaimessasi, eikä mitään tietoja siirretä laitteeltasi. Ainoastaan valitsemasi pienet kirjaimet tallennetaan seuraavaa kertaa varten.
Tätä työkalua käyttäviltä ihmisiltä
Arvostelut
Arvosteluja ladataan…
Jatka eteenpäin
Lisää työkaluja työkalupakissa
Etusivulla on kymmeniä muita ilmaisia työkaluja, joiden käyttö ei vaadi API-avainta.
UUID-generaattori
Luo satunnaisia v4-, v7- ja v5-UUID-tunnisteita kerralla.
Avaa työkaluVälilyöntien poistaja
Poista ylimääräiset välilyönnit, sarkainmerkit ja tyhjät rivit.
Avaa työkaluYksikkömuunnin
Muunna pituus, paino, nopeus ja paljon muuta.
Avaa työkaluRoomalaisnumeroiden muunnin
Muunna numerot roomalaisiksi numeroiksi ja päinvastoin.
Avaa työkalu