Miten muunnan RGB-arvon HEX-muotoon?

Kirjoita RGB-arvo kuten rgb(46, 139, 87) RGB-kenttään, niin HEX-kenttä näyttää heti vastaavan koodin #2E8B57. Muunnos tapahtuu automaattisesti molempiin suuntiin, joten voit yhtä lailla syöttää HEX-koodin ja lukea RGB-arvon.

Miten muunnan HEX-värikoodin takaisin RGB:ksi?

Liitä HEX-koodi kuten #2E8B57 HEX-kenttään, ja RGB-kenttä päivittyy välittömästi arvoon rgb(46, 139, 87). Samalla myös HSL-, HSV- ja CMYK-arvot lasketaan, joten näet värin kaikissa muodoissa kerralla.

Sopiiko CMYK-muunnos painotuotteisiin?

CMYK- ja CMYKA-kentät päivittyvät aina, kun muutat jotakin muuta muotoa, joten saat painokelpoiset syaanin, magentan, keltaisen ja mustan arvot. Huomaa, että CMYK on laitteistosta riippuvainen, joten näytön ja painojäljen värit voivat erota hieman.

Värityökalut

Verkkopohjainen värimuunnin | RGB-, HEX-, HSL-, HSV- ja CMYK-synkronointi

Muunna värit eri muotojen välillä: RGB, HEX, HSL, HSV ja CMYK. Tällä värimuuntimella muokkaat yhtä arvoa ja muut päivittyvät heti.

Live-synkronointiEi latausta

Visuaalinen esikatselu

Käytä värinäytettä, selaimen värinvalitsinta ja alpha-liukusäädintä säätääksesi saman värin tarkasti kaikissa muodoissa.

Esikatseluväri

#3B82F6

rgba(59, 130, 246, 0.84)

Värinvalitsin

#3B82F6

Alpha

0.84

Live-kanavat

HEX

R: 59
G: 130
B: 246
A: 0.84

Muokkausvinkki

Jos kenttä muuttuu kirjoittaessa tilapäisesti virheelliseksi, viimeisin kelvollinen väri pysyy aktiivisena. Kun viimeistelet arvon, muut muodot synkronoituvat automaattisesti uudelleen.

Live-synkronointiEi latausta

Kaksisuuntainen värimuotoeditori

Kaikkia alla olevia muotoja voi muokata suoraan. Kun muutat HEX-, RGB-, RGBA-, HSL-, HSLA-, HSV-, HSVA-, CMYK- tai CMYKA-arvoa, muut värimallit pysyvät heti synkronissa.

HEX

lähde

RGB

RGBA

HSL

HSLA

HSV

HSVA

CMYK

CMYKA

Selitys

RGB

RGB on standardi värimalli, joka koostuu punaisesta (R), vihreästä (G) ja sinisestä (B) kanavasta. Säätämällä näiden kolmen kanavan voimakkuutta RGB voi esittää suurimman osan näytöillä näkyvistä väreistä. Se on yksi käytetyimmistä digitaalisista värijärjestelmistä.

RGBA

RGBA on RGB, johon on lisätty alpha-kanava läpinäkyvyyttä varten. R, G ja B käyttävät yleensä arvoja 0–255, kun taas A on tavallisesti välillä 0–1 tai 0–100 %. Sitä käytetään usein CSS:ssä, kun sama väri tarvitsee eri peittävyyksiä.

HEX

HEX on heksadesimaalinen tapa esittää värejä. Sitä käytetään laajasti web-suunnittelussa ja CSS:ssä, koska se on tiivis ja helppo kopioida. Arvo kuten #2E8B57 tallentaa punaisen, vihreän ja sinisen heksaparien muodossa, ja laajennetut muodot voivat sisältää myös läpinäkyvyyden.

HSL

HSL (Hue, Saturation, Lightness) esittää RGB-värit sylinterimäisessä koordinaatistossa. H kertoo värisävyn, S värin puhtauden ja L kirkkauden. 0 % on tummin, 50 % tasapainoinen ja 100 % kirkkain.

HSLA

HSLA on HSL:n versio, jossa on alpha-kanava. Se säilyttää sävyn, kylläisyyden ja vaaleuden ja lisää läpinäkyvyyden, joten se sopii varjoihin, peittoihin, puoliläpinäkyviin täyttöihin ja käyttöliittymän tiloihin.

HSV

HSV (Hue, Saturation, Value) on A. R. Smithin vuonna 1978 kehittämä väriavaruus, joka tunnetaan myös nimellä Hexcone Model. Koska Value kuvaa suoraan koettua kirkkautta, HSV on usein intuitiivinen värin valinnassa.

HSVA

HSVA laajentaa HSV:tä alpha-kanavalla. Se on hyödyllinen, kun haluat käyttää sävy-, kylläisyys- ja arvoajattelua ja samalla kuvata läpinäkyvyyttä käyttöliittymäväreille ja kerrokselliselle grafiikalle.

CMYK

CMYK on painotuotteissa käytettävä värimalli. Painettu materiaali näkyy heijastuneen valon avulla, joten se sopii sanomalehtiin, pakkauksiin ja esitteisiin. Toisin kuin näyttöjen RGB, CMYK on suunniteltu musteelle paperilla.

CMYKA

CMYKA laajentaa CMYK:ta alpha-kanavalla. Se on hyödyllinen, kun haluat kuvata syaanin, magentan, keltaisen ja mustan arvot yhdessä läpinäkyvyyden kanssa suunnittelun luovutuksessa tai kerroksellisissa aineistoissa.

Näin käytät verkkopohjaista värimuunninta

Liitä tai kirjoita arvo mihin tahansa muotokenttään, esimerkiksi HEX-, RGB-, RGBA-, HSL-, HSV- tai CMYK-kenttään.

Heti kun arvo on kelvollinen, työkalu muuntaa sen automaattisesti kaikkiin muihin tuettuihin värimuotoihin.

Käytä esikatselupaneelia, värinvalitsinta, alpha-liukusäädintä ja kopiointitoimintoja viimeistelläksesi ja viedäksesi tarvitsemasi tarkan värin.

Keskeiset ominaisuudet

Kaksisuuntainen muotosynkronointi

Muuta mitä tahansa tuettua muotoa ja pidä RGB, RGBA, HEX, HSL, HSLA, HSV, HSVA, CMYK ja CMYKA synkronoituna reaaliajassa.

Visuaaliset väriohjaimet

Näe nykyinen väri heti live-värinäytteen, selaimen värinvalitsimen, alpha-liukusäätimen ja kanava-arvojen avulla.

Selainpohjainen muunnos

Jokainen kenttä hyväksyy tutun funktion syntaksin, ja kaikki muunnokset tehdään selaimessa nopeasti ja yksityisesti.

Värimuuntimen UKK

Voinko muokata mitä tahansa värimuotoa ja päivittää kaikki muut?

Kyllä. Muunnin synkronoi kumpaankin suuntaan. Jos muokkaat RGB-, RGBA-, HEX-, HSL-, HSLA-, HSV-, HSVA-, CMYK- tai CMYKA-arvoa, muut muodot päivittyvät heti kun arvo on kelvollinen.

Miten läpinäkyvyyttä käsitellään muunnoksen aikana?

HEX näytetään ilman alpha-arvoa, koska sivu keskittyy pyytämiisi muotoihin. Läpinäkyvyys säilyy RGBA-, HSLA-, HSVA- ja CMYKA-muodoissa, ja esikatselu heijastaa aina nykyistä peittävyyttä.

Onko tämä värimuunnin yksityinen?

Ei. Kaikki muunnoslogiikka suoritetaan paikallisesti selaimessasi, joten väriarvoja ei lähetetä palvelimelle.

Värimuuntimella muunnat värikoodin nopeasti muodosta toiseen: HEX, RGB, RGBA, HSL, HSLA, HSV, HSVA, CMYK ja CMYKA. Kirjoita arvo yhteen kenttään – esimerkiksi RGB HEX-muotoon tai HEX takaisin RGB:ksi – ja kaikki muut muodot päivittyvät heti kaksisuuntaisella synkronoinnilla. Live-esikatselu, selaimen värinvalitsin ja alpha-liukusäädin auttavat säätämään sävyä ja läpinäkyvyyttä tarkasti. Kaikki muunnokset tehdään selaimessasi, joten väriarvojasi ei lähetetä palvelimelle.

Näin käytät värimuunninta

1
Syötä väriarvo
Liitä tai kirjoita arvo mihin tahansa yhteen kenttään, esimerkiksi #2E8B57 HEX-kenttään, rgb(46, 139, 87) RGB-kenttään tai hsl(146, 50%, 36%) HSL-kenttään.
2
Katso kaikkien muotojen synkronoituvan
Heti kun arvo on kelvollinen, työkalu muuntaa sen samalla kaikkiin muihin tuettuihin muotoihin: RGB, RGBA, HEX, HSL, HSLA, HSV, HSVA, CMYK ja CMYKA.
3
Hienosäädä väri
Säädä sävyä ja peittävyyttä värinäytteellä, selaimen värinvalitsimella ja alpha-liukusäätimellä, tai paina Satunnainen löytääksesi uusia sävyjä.
4
Kopioi tai vie värit
Napsauta kenttää kopioidaksesi sen arvon tai paina Kopioi kaikki saadaksesi kaikki muodot kerralla CSS-koodiin, suunnittelutiedostoihin tai koodieditoriin.

Lähteet

W3C – CSS Color Module Level 4
W3C:n virallinen määritys CSS:n värimuodoista, kuten HEX, rgb(), hsl(), hwb() ja moderni värisyntaksi.
MDN – CSS-värit (<color>)
MDN:n hakuteos kaikista CSS:n värimerkinnöistä – HEX, RGB/RGBA, HSL/HSLA – ja siitä, miten alpha-läpinäkyvyys toimii.

Aiheeseen liittyvät työkalut

CSS-minifiointi

Pienennä CSS-koodia, jossa käytetään muuntamiasi HEX-, RGB- ja HSL-väriarvoja.

SVG-katselin

Esikatsele ja tarkastele SVG-grafiikkaa, joka käyttää täyttö- ja viivavärejä.

Kuva Base64-muotoon

Koodaa kuvat Base64-merkkijonoiksi upotettavaksi suoraan värimäärittelyjesi rinnalle.

JSON-muotoilija

Siisti ja tarkista JSON, johon on tallennettu väripaletteja ja suunnittelutokeneita.

Usein kysytyt kysymykset

Miten muunnan RGB-arvon HEX-muotoon?: Kirjoita RGB-arvo kuten rgb(46, 139, 87) RGB-kenttään, niin HEX-kenttä näyttää heti vastaavan koodin #2E8B57. Muunnos tapahtuu automaattisesti molempiin suuntiin, joten voit yhtä lailla syöttää HEX-koodin ja lukea RGB-arvon.
Miten muunnan HEX-värikoodin takaisin RGB:ksi?: Liitä HEX-koodi kuten #2E8B57 HEX-kenttään, ja RGB-kenttä päivittyy välittömästi arvoon rgb(46, 139, 87). Samalla myös HSL-, HSV- ja CMYK-arvot lasketaan, joten näet värin kaikissa muodoissa kerralla.
Voinko muokata mitä tahansa muotoa ja päivittää kaikki muut?: Kyllä. Muunnin synkronoi kumpaankin suuntaan. Kun muokkaat RGB-, RGBA-, HEX-, HSL-, HSLA-, HSV-, HSVA-, CMYK- tai CMYKA-arvoa, muut muodot päivittyvät heti, kun arvo on kelvollinen.
Sopiiko CMYK-muunnos painotuotteisiin?: CMYK- ja CMYKA-kentät päivittyvät aina, kun muutat jotakin muuta muotoa, joten saat painokelpoiset syaanin, magentan, keltaisen ja mustan arvot. Huomaa, että CMYK on laitteistosta riippuvainen, joten näytön ja painojäljen värit voivat erota hieman.
Miten läpinäkyvyys käsitellään muunnoksessa?: HEX näytetään ilman alpha-arvoa, koska sivu keskittyy pyytämiisi muotoihin. Läpinäkyvyys säilyy RGBA-, HSLA-, HSVA- ja CMYKA-muodoissa, ja esikatselu heijastaa aina nykyistä peittävyyttä.
Onko värimuunnin yksityinen ja ilmainen?: On. Kaikki muunnoslogiikka suoritetaan paikallisesti selaimessasi, joten väriarvojasi ei lähetetä palvelimelle. Työkalu on täysin ilmainen eikä vaadi rekisteröitymistä.