Värin muuntaminen HEX-, RGB- ja HSL-muotojen välillä
Julkaistu · Päivitetty 1 min lukuaika
HEX, RGB ja HSL kuvaavat samaa väriä kolmella tavalla. Työkalu näyttää kaikki kolme kerralla ja hyväksyy tavalliset kirjoitustavat; kokonaisluvuksi pyöristetty HSL selittää yhden tason erot, jotka näkee palattaessa HEX:iin.
Kolme kirjoitustapaa samalle värille
Tutki värejä näyttää oletuksena kolme muotoa värin esikatselulla. Vihreälle #2F4A3F:
| Muoto | Tulos |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
Paneelin kolme painiketta HEX, RGB ja HSL supistavat tuloksen yhteen muotoon, kätevään kopioitavaksi sellaisenaan.
Hyväksytyt kirjoitustavat
| Kirjoitustapa | Esimerkki | Tulos HEX:nä |
|---|---|---|
| Lyhyt HEX | #fff | #ffffff |
| HEX läpinäkyvyydellä | #2F4A3F80 | #2f4a3f80 |
| RGB pilkuilla | rgb(47, 74, 63) | #2f4a3f |
| RGB välilyönneillä | rgb(47 74 63) | #2f4a3f |
| RGB prosentteina | rgb(100%, 0%, 0%) | #ff0000 |
| HSL välilyönneillä | hsl(156 22% 24%) | #304b40 |
Värien nimet, kuten ”rouge”, ja kanavat alueen 0-255 ulkopuolelta, kuten rgb(300, 0, 0), hylätään ilmoituksella, joka luettelee hyväksytyt kirjoitustavat.
Läpinäkyvyys
Läpinäkyvyys kirjoitetaan HEX:nä kahdeksalla numerolla tai vinoviivan jälkeen välilyönneillä. Väri rgb(47 74 63 / 50%) antaa #2f4a3f80 HEX:nä ja rgba(47, 74, 63, 0.5) RGB:nä. Päinvastoin #2F4A3F80 antaa läpinäkymättömyyden 0,502, koska 80 heksadesimaalina on 128/255.
Miksi edestakainen muunnos muuttuu yhdellä tasolla
HSL näytetään kokonaislukuina: sävy asteina, kylläisyys ja kirkkaus prosentteina. Paluu HSL:stä HEX:iin päätyy siksi lähelle olevaan väriin, ei lähtöväriin.
| Lähtö | Näytetty HSL | Paluu HEX:iin |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
Ero on yksi taso jokaisella kanavalla, silmälle näkymätön. Suunnittelutunnisteelle tai tuotemerkille säilytä alkuperäinen HEX viitteenä äläkä kierrätä sitä uudelleen HSL:n kautta.
Harmaat
Harmaan kylläisyys on nolla ja sävyllä ei ole vaikutusta: #808080 antaa rgb(128, 128, 128) ja hsl(0, 0%, 50%).
Mitä työkalu ei mittaa
Muotomuunnos ei kerro mitään luettavuudesta. Työkalu ei laske tekstin ja sen taustan välistä kontrastia: tarkista se erikseen ennen julkaisua. QR-koodin tapaus, jossa kontrasti ratkaisee lukemisen, käsitellään oppaassa QR-koodi, joka skannautuu ensimmäisellä kerralla.
Muunnoksen tarkistus
- Liitä väri kenttään: esikatselun pitäisi vastata odotustasi.
- Kopioi muoto, jota järjestelmäsi pyytää.
- Jos haluat säilyttää tarkan värin, säilytä HEX tai RGB HSL:n sijasta.