Spalvų Formatų Konverteris verčia bet kurią spalvą tarp HEX, RGB, HSL, HSV ir OKLCH. Pasirinkite spalvą gimtuoju parinkikliu, įveskite hex reikšmę, įklijuokite bet kokią CSS spalvos eilutę arba koreguokite RGB šliaužiklius — kiekvienas formatas atsinaujina realiu laiku, o kiekvienas turi savo Copy mygtuką.
Šiuolaikinis CSS suteikia dešimtis būdų tai pačiai spalvai užrašyti: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), plius kiekvieno alfa variantus. Dažnai reikia konvertuoti tarp jų — Figma dizainas jums pateikia OKLCH, jūsų kodo bazė naudoja HEX, o jūsų temos kintamieji hover koregavimams renkasi HSL. Spalvų Formatų Konverteris atlieka visas konversijas viename skydelyje. Pasirinkite spalvą gimtuoju spalvų parinkikliu, įklijuokite esamą spalvą bet kokia sintaksė arba tempkite RGB šliaužiklius, kad nusistatytumėte tikslią reikšmę. Kiekvienas įprastas formatas atvaizduojamas vienu metu: HEX (su alfa), rgb()/rgba(), hsl()/hsla(), hsv() ir oklch() — plius CSS kintamojo fragmentas ir apskaičiuota šviesumo (luminance) reikšmė greitiems kontrasto skaičiavimams. Alfa kanalas palaikomas visur. Kiekvienas formatas turi savo Copy mygtuką naudojimui vienu paspaudimu, o analizatorius priima gimtuosius spalvų pavadinimus ir viską, ką palaiko CSS.
Rodo HEX, RGB/RGBA, HSL/HSLA, HSV ir OKLCH vienu metu — pasirinkite formatą, kurio laukia jūsų kodas, be pakartotinio konvertavimo kiekvieną kartą.
Priima HEX (#abc arba #aabbcc arba #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() ir gimtuosius spalvų pavadinimus. Įklijuokite bet ką, ką palaiko CSS.
Apdoroja naują OKLCH formatą, naudojamą šiuolaikiniame CSS — suvokimo požiūriu tolygią spalvų erdvę, tampančią nauju dizaino sistemų standartu.
Kiekviena išvestis turi savo Copy mygtuką. Spustelėkite ir gaukite tiksliai tą formatą, kurio reikia jūsų kodui — rankinio žymėjimo nereikia.
Koreguokite Red/Green/Blue/Alpha šliaužiklius smulkiam derinimui. Kiekvienas formatas atsinaujina realiu laiku tempiant.
Skaidrumas apdorojamas visuose formatuose: #RRGGBBAA, rgba(...), hsla(...). Nustatykite kartą, konvertuota bus visur.
Figma pateikia OKLCH arba HSL — įklijuokite jį, nukopijuokite HEX atitikmenį savo Tailwind konfigūracijai ar CSS kintamiesiems neišeidami iš naršyklės.
Tempkite šliaužiklius, kad ištirtumėte atspalvius, užsirašydami OKLCH reikšmes sistemingai dizaino sistemos paletei.
Konvertuokite prekės ženklo spalvą į HSL formą, kad galėtumėte naudoti hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) hover būsenoms.
Šviesumo laukas pateikia žalią reikšmę, naudojamą WCAG kontrasto skaičiavimuose — naudinga a11y matematikai.
Įklijuokite oklch(...) iš CSS failo, kurį skaitote, ir akimirksniu pamatykite, kokią spalvą jis iš tikrųjų sukuria.
Spustelėkite Color Formats piktogramą DevSuite Pro doke. Atsiveria skydelis su spalvų parinkikliu, hex įvestimi ir RGB šliaužikliais.
Naudokite spalvų parinkiklį, įveskite hex arba įklijuokite bet kokią CSS spalvos eilutę (rgb(...), oklch(...) ir t. t.). Spalva peržiūrima akimirksniu.
Kiekvienas formatas atvaizduojamas žemiau: HEX, RGB, HSL, HSV, OKLCH, CSS kintamasis ir šviesumas. Visi lieka sinchronizuoti jums koreguojant.
Tempkite R/G/B/A šliaužiklius smulkiam derinimui. Puikiai tinka nusistatyti konkretų atspalvį, atitinkantį dizaino specifikaciją.
Spustelėkite Copy prie norimos formato eilutės — reikšmė atsiduria jūsų mainų srityje teisinga sintakse.
Įdiekite „DevSuite Pro“ nemokamai ir atrakinkite 64+ kūrėjų įrankius savo naršyklei.
