Ang Color Format Converter ay nagta-translate ng anumang kulay sa pagitan ng HEX, RGB, HSL, HSV, at OKLCH. Pumili ng kulay gamit ang native picker, mag-type ng hex value, i-paste ang anumang CSS color string, o ayusin ang mga RGB slider — bawat format ay nag-a-update nang live at bawat isa ay may sariling Copy button.
Ang modernong CSS ay nagbibigay sa iyo ng maraming paraan para isulat ang parehong kulay: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), kasama ang mga alpha variant ng bawat isa. Madalas mong kailangang mag-convert sa pagitan nila — ang isang disenyo sa Figma ay nagbibigay sa iyo ng OKLCH, ang iyong codebase ay gumagamit ng HEX, at ang iyong mga theme variable ay mas gusto ang HSL para sa mga hover tweak. Ang Color Format Converter ay ginagawa ang lahat ng conversion sa isang panel. Pumili ng kulay mula sa native color picker, i-paste ang isang umiiral na kulay sa anumang syntax, o i-drag ang mga RGB slider para makuha ang gusto mo. Lahat ng karaniwang format ay ini-render nang sabay-sabay: HEX (may alpha), rgb()/rgba(), hsl()/hsla(), hsv(), at oklch() — pati na rin ang isang CSS variable snippet at ang computed luminance value para sa mabilis na contrast math. Ang alpha channel ay suportado mula simula hanggang dulo. Ang bawat format ay may sariling Copy button para sa one-click na paggamit, at ang parser ay tumatanggap ng mga native color name at lahat ng suportado ng CSS.
Ipinapakita ang HEX, RGB/RGBA, HSL/HSLA, HSV, at OKLCH nang sabay-sabay — piliin kung aling format ang inaasahan ng iyong target code nang hindi na kailangang mag-convert uli bawat pagkakataon.
Tinatanggap ang HEX (#abc o #aabbcc o #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch(), at mga native color name. I-paste ang anumang suportado ng CSS.
Humahawak sa bagong OKLCH format na ginagamit sa modernong CSS — isang perceptually uniform color space na nagiging bagong standard default sa mga design system.
Ang bawat output ay may sariling Copy button. I-click para makuha ang eksaktong format na kailangan mo para sa iyong code, hindi na kailangan ng manu-manong pagpili.
Ayusin ang mga Red/Green/Blue/Alpha slider para sa fine tuning. Bawat format ay nag-a-update sa real time habang nag-re-re-drag ka.
Ang transparency ay pinangangasiwaan sa bawat format: #RRGGBBAA, rgba(...), hsla(...). Itakda nang isang beses, converted sa lahat ng dako.
Binigyan ka ng Figma ng OKLCH o HSL — i-paste ito, i-copy ang katumbas na HEX para sa iyong Tailwind config o CSS variables nang hindi umaalis sa browser.
I-drag ang mga slider para mag-explore ng mga shade, at itala ang mga OKLCH value para sa isang sistematikong design system palette.
I-convert ang isang brand color sa HSL form nito para magamit mo ang hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) para sa mga hover state.
Ang luminance field ay nagbibigay sa iyo ng raw value na ginagamit sa mga WCAG contrast calculation — kapaki-pakinabang para sa a11y math.
I-paste ang isang oklch(...) mula sa isang CSS file na iyong binabasa at makita agad kung anong kulay talaga ang ginagawa nito.
I-click ang icon ng Color Formats sa DevSuite Pro dock. Magbubukas ang isang panel na may color picker, hex input, at mga RGB slider.
Gamitin ang color picker, i-type ang hex, o i-paste ang anumang CSS color string (rgb(...), oklch(...), atbp.). Ang kulay ay makikita agad sa preview.
Ang bawat format ay ini-render sa ibaba: HEX, RGB, HSL, HSV, OKLCH, CSS variable, at luminance. Lahat ay mananatiling naka-sync habang nag-a-adjust ka.
I-drag ang mga R/G/B/A slider para sa mga fine adjustment. Mahusay para sa pagkuha ng isang partikular na shade na tumutugma sa isang design spec.
I-click ang Copy sa row ng format na gusto mo — ang value ay mapupunta sa iyong clipboard sa tamang syntax.
I-install ang DevSuite Pro nang libre at i-unlock ang 64+ developer tools para sa iyong browser.
