Siirry sisältöön
helpyself

Värimuunnin

Local only — nothing is uploaded unless you save or share it.

Värimuunnin: HEX RGB:ksi, RGB HEXiksi ja kumpi tahansa HSL:ksi.

  1. Kirjoita tai liitä väri missä tahansa muodossa
  2. Näe se heti muunnettuna kaikkiin muihin muotoihin
  3. Kopioi tarvitsemasi merkintätapa
Musta tekstiValkoinen teksti
HEX
HEX ja alfa
RGB
HSL
Tallenna tämä työkalu

Pidä Värimuunnin käden ulottuvilla

Lisää kirjanmerkkeihin

Tietoa työkalusta

Hexin muuntaminen RGB:ksi, RGB:n hexiksi tai kumman tahansa HSL:ksi on jatkuva pieni vero, koska suunnitteluohjelmat, CSS ja kuvankäsittelyohjelmat suosivat kukin eri värimerkintää. HEX on tiivis ja hallitsee CSS:ää ja suunnittelun luovutusta. RGB vastaa suoraan sitä, miten näyttö oikeasti säteilee valoa. HSL kuvaa värin niin kuin ihmiset sitä ajattelevat: sävynä, jolla on tietty värikkyys ja vaaleus, mikä tekee paletin rakentamisesta käsin paljon helpompaa — pidä sävy, muuta vaaleutta, ja sinulla on yhtenäinen sarja sävyjä. Tämä muunnin ottaa vastaan minkä tahansa noista muodoista sekä tavalliset värien nimet, ja se on tarkoituksella suopea syntaksin suhteen. Voit liittää paljaan hexin ristikkomerkin kanssa tai ilman, käyttää kolmea tai kuutta numeroa, sisällyttää alfakanavan ja kirjoittaa joko pilkkutyylin tai uudemman välilyönnein erotetun CSS-syntaksin. Kaikki muuntuu kirjoittaessasi, ja elävä värilaatta näyttää tuloksen sen sijaan että kuvittelisit sen.

Usein kysyttyä

Mitä muotoa minun kannattaa käyttää CSS:ssä?

Mikä tahansa niistä käy. HEX on yleisin ja tiivein. HSL kannattaa silloin kun rakennat värin muunnelmia käsin, koska vaaleuden säätäminen sävyn ja kylläisyyden pysyessä antaa yhtenäisen sarjan sävyjä paljon helpommin kuin hex-numeroiden muokkaaminen.

Onko muunnoksen lisäksi myös värivalitsin?

On — värilaatta avaa järjestelmäsi värivalitsimen, joten arvon voi valita silmällä kirjoittamisen sijaan, ja HEX-, RGB- ja HSL-muodot päivittyvät yhdessä. Se on käytännössä HTML-värivalitsimen tehtävä: valitse jotain joka näyttää oikealta ja ota mukaan koodi, jonka tyylitiedosto hyväksyy.

Mitä ylimääräiset numerot kahdeksanmerkkisessä hexissä tarkoittavat?

Kaksi viimeistä ovat alfakanava, 00:sta täysin läpinäkyvälle ff:ään täysin peittävälle. Sitä tuetaan jokaisessa nykyisessä selaimessa, ja se on usein yksinkertaisempaa kuin vaihtaa rgba:han pelkän läpinäkyvyyden vuoksi.

Miksi HSL:ksi ja takaisin muuntaminen joskus muuttaa arvoa hieman?

Koska HSL:n osat pyöristetään kokonaisluvuiksi luettavuuden vuoksi, eikä tuo pyöristys ole täydellisesti käännettävissä. Ero on enintään askel tai kaksi kanavaa kohti eikä näy, mutta se tarkoittaa ettei edestakainen matka ole aina tavulleen sama.

Voinko liittää värin ilman ristikkomerkkiä?

Voit. Paljaat hex-arvot hyväksytään, samoin kolminumeroinen lyhennemuoto, välilyönnein erotettu CSS-syntaksi kuten rgb(59 130 246) ja tavalliset värien nimet kuten teal tai crimson.

Mistä tiedän, onko teksti luettavaa värin päällä?

Esikatselu näyttää sekä mustan että valkoisen tekstin värisi päällä, joten voit arvioida sen heti. Todellista hyväksyttyä tai hylättyä varten saavutettavuusohjeita vasten käytä kontrastintarkistinta, joka laskee WCAG-suhteen kunnolla.

Auta parantamaan tätä työkalua

Löysitkö virheen, kaipaatko muutosta vai puuttuuko jokin työkalu?

/color-converter

↑↓ liikkuminen · Enter avaa · Esc sulkee