Värimuodon muunnin (Color Format Converter) kääntää minkä tahansa värin HEX-, RGB-, HSL-, HSV- ja OKLCH-muotojen välillä. Valitse väri natiivilla valitsimella, kirjoita heksadesimaaliarvo, liitä mikä tahansa CSS-värimerkkijono tai säädä RGB-liukusäätimiä — jokainen muoto päivittyy reaaliajassa ja jokaisella on oma Kopioi-painikkeensa.
Nykyaikainen CSS antaa sinulle kymmenkunta tapaa kirjoittaa sama väri: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), sekä jokaisen alfa-variantit. Sinun täytyy usein muuntaa niiden välillä — Figma-suunnitelma antaa sinulle OKLCH:n, koodipohjasi käyttää HEX:iä ja teemamuuttujasi suosivat HSL:ää leijumistilojen hienosäätöihin. Värimuodon muunnin tekee kaikki muunnokset yhdessä paneelissa. Poimi väri natiivista värivalitsimesta, liitä olemassa oleva väri missä tahansa syntaksissa tai vedä RGB-liukusäätimiä valitaksesi haluamasi. Jokainen yleinen muoto renderöidään samanaikaisesti: HEX (alfan kanssa), rgb()/rgba(), hsl()/hsla(), hsv() ja oklch() — plus CSS-muuttujakatkelma ja laskettu luminanssiarvo nopeaa kontrastimatematiikkaa varten. Alfakanavaa tuetaan päästä päähän. Jokaisella muodolla on oma Kopioi-painikkeensa yhden napsautuksen käyttöä varten, ja jäsennin hyväksyy natiivit värinimet ja kaiken mitä CSS tukee.
Näyttää HEX, RGB/RGBA, HSL/HSLA, HSV ja OKLCH samanaikaisesti — valitse muoto, jota kohdekoodisi odottaa, ilman että sinun tarvitsee muuntaa joka kerta uudelleen.
Hyväksyy HEX (#abc tai #aabbcc tai #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() ja natiivit värinimet. Liitä mitä tahansa, mitä CSS tukee.
Käsittelee nykyaikaisessa CSS:ssä käytettyä uutta OKLCH-muotoa — havainnollisesti yhdenmukainen väriavaruus, josta on tulossa uusien suunnittelujärjestelmien oletus.
Jokaisella tulosteella on oma Kopioi-painike. Napsauta napataksesi täsmälleen koodissasi tarvitsemasi muodon, manuaalista valintaa ei tarvita.
Säädä punaisen, vihreän, sinisen ja alfan liukusäätimiä hienosäätöä varten. Jokainen muoto päivittyy reaaliajassa vetäessäsi.
Läpinäkyvyyttä käsitellään kaikissa muodoissa: #RRGGBBAA, rgba(...), hsla(...). Aseta kerran, muunnetaan kaikkialle.
Figma antaa sinulle OKLCH:n tai HSL:n — liitä se, kopioi HEX-vastine Tailwind-asetuksiasi tai CSS-muuttujiasi varten selainta poistumatta.
Vedä liukusäätimiä tutkiaksesi sävyjä ja pane muistiin OKLCH-arvot järjestelmällistä suunnittelujärjestelmän palettia varten.
Muunna brändiväri sen HSL-muotoon, jotta voit käyttää hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) leijumistiloille.
Luminanssikenttä antaa sinulle raaka-arvon, jota käytetään WCAG-kontrastilaskelmissa — hyödyllinen saavutettavuusmatematiikassa.
Liitä oklch(...) lukemastasi CSS-tiedostosta ja näe välittömästi, minkä värin se todella tuottaa.
Napsauta Värimuodot-kuvaketta DevSuite Pro -telakassa. Paneeli avautuu, jossa on värivalitsin, heksadesimaalisyöte ja RGB-liukusäätimet.
Käytä värivalitsinta, kirjoita heksa tai liitä mikä tahansa CSS-värimerkkijono (rgb(...), oklch(...) jne.). Väri esikatsellaan välittömästi.
Jokainen muoto renderöidään alla: HEX, RGB, HSL, HSV, OKLCH, CSS-muuttuja ja luminanssi. Kaikki pysyvät synkronoituna säätäessäsi.
Vedä R/G/B/A-liukusäätimiä hienosäätöjä varten. Erinomainen suunnitteluvaatimuksia vastaavan tietyn sävyn asettamiseen.
Napsauta Kopioi haluamasi muodon riviltä — arvo päätyy leikepöydällesi oikeassa syntaksissa.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 64 kehittäjätyökalua selaimellesi.
