Coltai Muunnin

Liitä mikä tahansa HEX-, RGB- tai HSL-arvo ja saat välittömästi muunnokset kaikissa kolmessa formaatissa sekä reaaliaikaisen värinäytteen, jotta näet tarkalleen, minkä kanssa työskentelet ennen kuin se päätyy koodiisi.

Auttoiko tämä laskuri sinua?

Mikä on Coltai Muunnin?

Värimuunnin muuntaa värit HEX-, RGB- ja HSL-värimallien välillä. Välttämätön työkalu verkkokehittäjille ja suunnittelijoille, jotka työskentelevät CSS:n, suunnittelutyökalujen ja väriteorian parissa. Sisältää reaaliaikaisen värinäytteen.

Milloin käyttää tätä laskuria

  • Kun muunnat suunnittelijan Figma- tai Sketch-värimääritykset CSS-yhteensopiviksi arvoiksi
  • Kun rakennat designijärjestelmää ja tarvitset yhtenäisiä väriarvoja HEX-, RGB- ja HSL-muodoissa
  • Kun luot väripaletteja tai -yhdistelmiä HSL:n avulla säilyttääksesi yhtenäisen kylläisyyden ja vaaleuden
  • Kun tarkistat värikontrastin saavutettavuusvaatimusten (WCAG AA/AAA-standardit) mukaisuutta
  • Kun muunnat vanhoja väriarvoja olemassaa olevassa koodissa toiseen formaattiin yhdenmukaisuuden vuoksi
  • Kun etsit vikoja CSS-väriongelmissa tarkistamalla, miltä väri todella näyttää eri formaateissa

Vaiheet:

  1. Syötä väriarvo HEX-, RGB- tai HSL-muodossa.
  2. Valitse syöttöformaatti välilehtien avulla.
  3. Katso muunnetut arvot kaikissa kolmessa formaatissa.
  4. Katso reaaliaikainen värinäyte.
  5. Tarkista WCAG-kontrastimerkit varmistaaksesi saavutettavuuden, jos yhdistät tämän värin tekstiin

Kaava

HEX → RGB: jaa #RRGGBB desimaaliarvoiksi RGB → HSL: normalisoi RGB → etsi sävy/kylläisyys/vaaleus HSL → RGB: muunna kromakaavojen avulla HEX: #RRGGBB (0-255 kutakin) RGB: rgb(R, G, B) (0-255) HSL: hsl(H°, S%, L%) (H: 0-360, S/L: 0-100)

Käyttötapaukset

  • CSS-väriarvojen muuntaminen
  • Väripalettien luominen perusväreistä
  • Designijärjestelmän värien yhteensovittaminen
  • Värien välisten suhteiden ymmärtäminen HSL:n avulla

Keskeiset hyödyt

  • Muunna värit 3 formaatin välillä välittömästi
  • Näe reaaliaikainen värien esikatselu
  • Kopioi mikä tahansa formaatti yhdellä napsautuksella
  • Ilmainen – ei rekisteröitymistä
  • Kopioi jokin muoto yhdellä napsautuksella ja käytä silmälasityökalua valitaksesi värit suoraan näytöltäsi hetkelliseksi muunnokseksi
  • Toimii kokonaan selaimesi ilman tietoja palvelimelle, pitäen suunnittelutyösi täysin yksityisenä ja offline-saatavilla

Ammattilaisen vinkit

  • Käytä HSL:ää intuitiivisiin värinsäätöihin
  • Käytä HEX:ää CSS-yhteensopivuuden takaamiseksi
  • Tarkista väri esikatselusta ennen sen käyttöä
  • Pidä tallessa viitelista yleisistä värimuunnoksista
  • Muista, että HEX-arvot ovat kirjainriippumattomia (#ff5733 ja #FF5733 tuottavat saman värin), mutta suuraakkosten käyttö on yleinen tapa, joka parantaa luettavuutta tyylimalleissa

Yleisiä vältettäviä virheitä

  • HEX-värien #-etuliitteen unohtaminen
  • RGB-arvojen käyttäminen yli 255 tai alle 0
  • HSL-sävyalueen (0-360) sekoittaminen RGB:hen (0-255)
  • Olettaminen, että HSL-valoisuus ja RGB-kirkkaus ovat samat — HSL-valoisuus on aistittava mittari, jossa 50 % on kirkkain versio kustakin sävystä, kun RGB-kirkkaus on raaka kaikkien kolmen kanavan intensiteetti

Keskeiset käsitteet selitettynä

HEX: Heksadesimaalinen RGB-esitys
RGB: Punainen Vihreä Sininen värimalli
HSL: Sävy-, kylläisyys- ja vaaleusmalli
Väriavaruus: Matemaattinen malli väreille
WCAG-kontrastisuhde: Numerollinen mittari etutekstin ja taustavärin välisen kirkkauseron erotuksesta, jossa vähintään 4,5:1 normaalitekstille ja 3:1 suurille teksteille vaaditaan saavutettavuusnormien täyttämiseen

Liittyvät käsitteet

  • CSS-yksikkömuunnin: Muunna px-, rem-, em-, vw- ja muiden CSS-yksiköiden välillä
  • Base64-koodain/dekoodain: Koodaa ja pura Base64-merkkijonoja
  • JSON-muotoilija: Muotoile ja validoi JSON-tietoja
  • Regex-testaaja: Testaa säännöllisiä lausekkeita esimerkkitekstiä vasten
  • URL-koodari/purkaja: Koodaa ja purkaa URL-turvalliset merkkijonot

Esimerkki

Syöte: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). Syöte: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.

Tulosten tulkinta

Muunnin tukee kolmea värimuotoa ja näyttää vastaavan arvon kaikissa kolmessa samanaikaisesti. HEX (#RRGGBB) on yleisin muoto verkkokehityksessä. RGB (rgb(R, G, B)) antaa suoran hallinnan yksittäisiin värikanaviin. HSL (hsl(H, S%, L%)) on ihmiselle intuitiivisin – sävy määrittää väriperheen, kylläisyys säätelee voimakkuutta ja vaaleus kirkkautta. Kontrastisuhdeilmaisin näyttää, täyttääkö etualan/taustan väriyhdistelmäsi WCAG-saavutettavuusstandardit. AA-vaatimusten täyttämiseen tarvitaan vähintään 4.5:1 normaalille tekstille ja 3:1 suurelle tekstille. AAA-vaatimukset edellyttävät vähintään 7:1 normaalille tekstille ja 4.5:1 suurelle tekstille. Tarkista värit visuaalisesti värinäytteestä ennen niiden käyttöä.

Usein kysytyt kysymykset

Mitä eroa on HEX-, RGB- ja HSL-muodoilla?
HEX on 6-numeroinen heksadesimaalinen esitys (#FF0000). RGB määrittää värit punaisen/vihreän/sinisen arvoina (rgb(255, 0, 0)). HSL käyttää sävyä, kylläisyyttä ja vaaleutta (hsl(0, 100%, 50%)).
Mitä värimuotoa minun pitäisi käyttää?
HEX on yleisin verkkokehityksessä yksinkertaisille väreille. RGB antaa tarkan hallinnan värikanaviin. HSL on ihmiselle intuitiivisin – säädä sävyä eri väreille, kylläisyyttä voimakkuudelle ja vaaleutta kirkkaudelle.
Mitä hyötyä HSL:stä on?
HSL on helpommin luettava. Voit luoda värimaailmoja pitämällä S:n ja L:n vakiona ja muuntelemalla H:ta. Esimerkiksi hsl(0, 50%, 50%) = punainen, hsl(120, 50%, 50%) = vihreä, hsl(240, 50%, 50%) = sininen.
Mitä on värikontrasti ja miksi sillä on merkitystä?
Värikontrasti on luminanssin ero etualan tekstin ja sen taustan välillä. Suurempi kontrasti helpottaa tekstin lukemista, erityisesti näkövammaisille. WCAG-saavutettavuusohjeet edellyttävät vähimmäiskontrastisuhteita: 4.5:1 normaalille tekstille (AA) ja 7:1 parannetulle luettavuudelle (AAA). Työkalumme laskee kontrastisuhteet automaattisesti.
Voinko muuntaa CMYK:n HEX- tai RGB-muotoon?
CMYK (käytetään painotuotteissa) ei muunnu suoraan RGB/HEX-muotoon (käytetään näytöillä), koska ne käyttävät eri väriavaruuksia. Muunnos riippuu väriprofiilistasi (sRGB, Adobe RGB jne.). Työkalumme keskittyy näyttöpohjaisiin formaatteihin (HEX, RGB, HSL), koska ne jakavat saman väriavaruuden. Painotyötä varten käytä erillistä CMYK-muunninta ja tavoiteväriprofiiliasi.
Mitä alpha-kanava tekee RGBA:ssa?
Alpha-kanava ohjaa läpinäkyvyyttä 0:sta (täysin läpinäkyvä) arvoon 1 (täysin peittävä). RGBA laajentaa RGB:tä tällä neljännellä arvolla. Työkalumme tukee tällä hetkellä peittäviä värejä HEX-, RGB- ja HSL-muodoissa. Läpinäkyville väreille lisää alpha-arvo manuaalisesti CSS:ään (esim. rgba(59, 130, 246, 0.5)).
Miksi HEX ja RGB näyttävät joskus hieman erilaisia värejä?
Niiden ei pitäisi – HEX ja RGB edustavat täsmälleen samoja väriarvoja, vain eri merkintänä. #FF0000 vastaa rgb(255, 0, 0):a. Jos huomaat eron, se johtuu todennäköisesti näytön kalibroinnista, selaimen renderöinnistä tai eri lähteistä peräisin olevien värien vertailusta. Käytä aina tämän työkalun muunnettuja arvoja yhdenmukaisuuden takaamiseksi.
Miten luon harmonisen väripaletin?
Käytä HSL:ää palettien luomiseen: pidä kylläisyys (S) ja vaaleus (L) vakiona ja muuntele sävyä (H) täydentävien värien saamiseksi. Samankaltaisille väreille muuntele H:ta 30–60 astetta. Kolmivärisille yhdistelmille käytä H-arvoja 120 asteen välein. Tämä työkalu antaa sinun tutkia värien välisiä suhteita interaktiivisesti säätämällä HSL-arvoja ja näkemällä tulokset välittömästi.
Mitä eroa on sRGB:llä ja Display P3:lla?
sRGB on verkkosisällön standardi väriavaruus, joka tukee rajoitettua värialuetta. Display P3 (Applen laitteiden ja nykyaikaisten näyttöjen käyttämä) tukee laajempaa värialuetta ja näyttää elävämpiä punaisia ja vihreitä. Verkkosuunnittelussa käytä aina sRGB-arvoja yhteensopivuuden vuoksi. Display P3 -värit näyttävät elävämmiltä tuetuilla näytöillä, mutta voivat näyttää haaleilta vanhemmilla näytöillä.
Miten testaan värejä värisokeille käyttäjille?
Käytä kontrastisuhdetta varmistaaksesi luettavuuden riippumatta värien havaitsemisesta. Suuren kontrastin yhdistelmät (tumma teksti vaalealla taustalla tai päinvastoin) ovat yleisesti luettavia. Vältä luottamasta pelkkään väriin tiedon välittämisessä – käytä kuvioita, tunnisteita tai kuvakkeita värin rinnalla. Kontrastin tarkistimemme auttaa varmistamaan, että värisi täyttävät saavutettavuusstandardit.
Miksi RGB-arvoni näyttävät erilaisilta näytöllä?
Eri näytöissä on erilaiset väriprofiilit, kirkkaus- ja kontrastiasetukset. Lisäksi selaimet saattavat renderöidä värit hieman eri tavalla. Kriittistä värien yhteensovittamista varten kalibroi näyttösi ja käytä värinhallintaprofiileja.

Löydä lisää työkaluja

Tuoreita poimintoja koko työkalukirjastostamme.

Nopanheittäjä

SaaS Hinnoittelu Lkysyin

Voit→ Lkysyin

Velka Snowball Lkysyin

Ktaiko Lkysyin

BRRRR Lkysyin