Mikä on heksavärikoodi?

Heksavärikoodissa väri esitetään heksadesimaalinumeroina, kuten CSS:ssä ja useimmissa suunnittelutyökaluissa. Koodissa #3b82f6 jokainen numeropari on yksi kanava: 3b on punainen, 82 vihreä ja f6 sininen, arvoalueella 00 (pois käytöstä) – ff (täysi arvo). Valinnainen neljäs pari määrittää alfakanavan eli peittävyyden, joten #3b82f6cc on sama sininen 80 %:n peittävyydellä. Koodit, joissa jokaisen parin molemmat numerot ovat samat, voidaan lyhentää kolmeen tai neljään numeroon, joten #ff8800 on myös #f80.

Työkalun kuvaus

Tällä työkalulla voit muokata heksavärikoodia numeropari kerrallaan. Kirjoita tai liitä koodi, valitse väri tai liitä väri RGB-, HSL- tai muussa muodossa, muuta sitten punaisen, vihreän, sinisen ja alfakanavan pareja tai peittävyyttä ja näe tulos läpinäkyvyysruudukossa. Muokattu väri näytetään CSS:n, Androidin ja koodin käyttämissä heksamuodoissa, ja jokainen niistä on valmis kopioitavaksi.

Ominaisuudet

  • Muokkaa 3-, 4-, 6- ja 8-numeroisia heksakoodeja #-merkin kanssa tai ilman sitä
  • Muuta kukin kanava kaksinumeroiseksi heksapariksi ja alfakanava heksapariksi tai prosenttiarvoksi
  • Valitse väri tai liitä väri RGB-, HSL- tai muussa muodossa alfakanava säilyttäen
  • Esikatsele läpinäkyviä värejä ruutukuvioisella taustalla
  • Hanki väri 6-numeroisena HEX-arvona, 8-numeroisena HEX-arvona, lyhyenä HEX-arvona, rgb()- tai rgba()-muodossa, muodossa #AARRGGBB ja muodossa 0xAARRGGBB
  • Vaihda heksanumeroiden kirjainkokoa pienten ja suurten kirjainten välillä
  • Toimii selaimessa

Näin se toimii

3- tai 4-numeroinen koodi laajennetaan kaksinkertaistamalla jokainen numero, ja koodi, jossa ei ole alfakanavaparia, on täysin läpinäkymätön (ff). Kanavakenttään kirjoitettu yksittäinen numero tulkitaan muodossa 0 ja kyseinen numero, joten f on 0f. Peittävyysprosentit pyöristetään lähimpään alfakanavan arvoon välillä 0–255, joten 80 %:sta tulee cc (204). Lyhyt muoto on mahdollinen vain, kun parin molemmat numerot täsmäävät; muussa tapauksessa kyseinen kenttä jää tyhjäksi.

Vinkkejä

  • CSS lukee alfakanavaparin viimeisenä (#RRGGBBAA), mutta Androidin väriresurssit ja .NET sijoittavat sen ensimmäiseksi (#AARRGGBB), joten valitse niille ARGB-kentät.
  • Jätä alfakanavan arvoksi ff, jos haluat tavallisen 6-numeroisen koodin; 8-numeroinen ja ARGB-kentät näyttävät sen silti kokonaisuudessaan.