A Színformátum-konvertáló bármely színt átalakít HEX, RGB, HSL, HSV és OKLCH formátumok között. Válasszon színt a natív színválasztóval, írjon be hex értéket, illesszen be bármilyen CSS színkifejezést, vagy állítsa az RGB csúszkákat — minden formátum élőben frissül, és mindegyikhez saját Másolás gomb tartozik.
A modern CSS tucatnyi módot kínál ugyanazon szín leírására: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), plusz mindegyik alfa-variánsa. Gyakran szükség van közöttük konvertálásra — a Figma-terv OKLCH-t ad, a kódbázisa HEX-et használ, a témaváltozói pedig HSL-t preferálnak a hover-módosításokhoz. A Színformátum-konvertáló egy panelben végzi el az összes konverziót. Válasszon színt a natív színválasztóból, illesszen be egy meglévő színt bármilyen szintaxisban, vagy húzza az RGB csúszkákat a beállításhoz. Minden gyakori formátum egyszerre jelenik meg: HEX (alfával), rgb()/rgba(), hsl()/hsla(), hsv() és oklch() — plusz egy CSS változó-részlet és a számított luminanciaérték a gyors kontraszt-matekhoz. Az alfacsatorna végig támogatott. Minden formátumhoz saját Másolás gomb tartozik az egykattintásos használathoz, és a feldolgozó elfogadja a natív színneveket és mindent, amit a CSS támogat.
Egyszerre jeleníti meg a HEX, RGB/RGBA, HSL/HSLA, HSV és OKLCH értékeket — válassza ki azt, amelyikre a célkódjának szüksége van, újra-konvertálás nélkül.
Elfogad HEX (#abc vagy #aabbcc vagy #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() formátumokat és natív színneveket. Illesszen be bármit, amit a CSS támogat.
Kezeli a modern CSS-ben használt új OKLCH formátumot — egy perceptuálisan egyenletes színteret, amely egyre inkább a tervrendszerek alapértelmezettje lesz.
Minden kimenetnek saját Másolás gombja van. Kattintson, és pontosan azt a formátumot kapja meg, amire a kódjában szüksége van, kézi kijelölés nélkül.
Állítsa a Vörös/Zöld/Kék/Alfa csúszkákat a finomhangoláshoz. Minden formátum valós időben frissül húzás közben.
Az átlátszóság minden formátumban kezelve van: #RRGGBBAA, rgba(...), hsla(...). Egyszer állítja be, mindenhol átkonvertálódik.
A Figma ad egy OKLCH vagy HSL értéket — illessze be, majd másolja ki a HEX megfelelőjét a Tailwind konfigjához vagy CSS változóihoz, anélkül hogy elhagyná a böngészőt.
Húzza a csúszkákat árnyalatok felfedezéséhez, jegyezze fel az OKLCH értékeket egy szisztematikus tervrendszer-palettához.
Konvertáljon egy márkaszínt HSL formára, hogy használhassa a hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) kifejezést hover állapotokhoz.
A luminancia mező megadja a WCAG kontrasztszámításokban használt nyers értéket — hasznos az akadálymentességi matekhoz.
Illesszen be egy oklch(...) értéket egy olvasott CSS fájlból, és azonnal lássa, milyen színt is állít elő valójában.
Kattintson a Színformátumok ikonra a DevSuite Pro dokkban. Megnyílik egy panel színválasztóval, hex mezővel és RGB csúszkákkal.
Használja a színválasztót, írjon be hex értéket, vagy illesszen be bármilyen CSS színkifejezést (rgb(...), oklch(...) stb.). A szín azonnal megjelenik előnézetben.
Minden formátum alul jelenik meg: HEX, RGB, HSL, HSV, OKLCH, CSS változó és luminancia. Mind szinkronban maradnak, ahogy módosít.
Húzza az R/G/B/A csúszkákat a finom beállításokhoz. Kiváló olyankor, amikor egy tervspecifikációnak megfelelő pontos árnyalatot keres.
Kattintson a Másolás gombra a kívánt formátum sorában — az érték a helyes szintaxisban kerül a vágólapra.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 64+ fejlesztői eszközt böngészőjéhez.
