Color Converter — Online HEX, RGB, HSL Converter _

Ano ang color conversion?

Ang bawat kulay na rini-render ng iyong browser ay sa huli ay isang sRGB triple — tatlong numero sa pagitan ng 0 at 255 para sa red, green, at blue channel, kasama ang isang opsyonal na alpha. Tinutukoy ng CSS Color Level 4 specification ang ilang text format na round-trip sa parehong triple, kasama ang perceptually-uniform na OKLCH space. Binabasa ng tool na ito ang alinman sa mga ito, kino-convert sa lahat ng mga ito, at iniuulat ang WCAG 2.1 contrast ratio laban sa isang pangalawang kulay para makapag-ship ka ng accessible na interface nang may kumpiyansa.

Paano gumagana ang color conversion?

Ang conversion ay isang serye ng malinaw na tinukoy na linear at non-linear na transform. Ang bawat hakbang ay tumatakbo sa iyong browser — walang input na umabot sa aming mga server:

1. Pina-parse ang iyong input. Awtomatikong nadi-detect ng tool ang 3, 4, 6, o 8-digit na HEX, ang mga functional form na rgb()/rgba()/hsl()/hsla()/hsv()/hwb() sa alinman sa legacy comma syntax o modernong slash-alpha syntax, o alinman sa 150 named na CSS color (rebeccapurple kasama na).
2. Ang na-parse na kulay ay na-normalize sa canonical sRGB — apat na float {r, g, b, a} na bawat isa ay nasa saklaw na 0–1. Ito ang nag-iisang source of truth na mula rito ang bawat output format ay nagmumula.
3. Ang HEX ay nagmumula sa pag-round ng bawat channel sa 0–255 byte value at pagsasama ng hex digit. Inilalabas ng RGB / RGBA ang parehong bytes. Ang HSL at HSV ay nag-a-apply ng standard na W3C cylindrical-coordinate algorithm; ang HWB ay nagmumula ng hue mula sa HSV, whiteness mula sa min(r, g, b), at blackness mula sa 1 - max(r, g, b).
4. Ang CMYK ay isang naive na approximation — k = 1 - max(r, g, b), pagkatapos ay c, m, y mula sa mga natitirang channel. Angkop ito para sa screen preview ngunit hindi para sa pag-print: ang tunay na CMYK output ay nangangailangan ng ICC profile na sadyang hindi isinasama ng tool na ito.
5. Ang OKLCH ay sumusunod sa css-color-4 forward path: ang sRGB ay nali-linearize, pina-multiply sa LMS matrix, niku-cube-root, pina-multiply sa LMS-to-OKLab matrix, at sa wakas ay kino-convert mula sa rectangular OKLab patungong polar OKLCH. Ang OKLCH ay perceptually uniform, na ginagawa itong tamang space para sa pagdidisenyo ng mga palette na mukhang balanse sa mata ng tao.

Bakit gamitin ang color converter na ito?

• Privacy: ang bawat conversion ay tumatakbo sa iyong browser gamit ang plain JavaScript. Ang kulay na iyong ini-paste ay hindi kailanman lumalabas sa iyong device, na mahalaga para sa hindi pa nire-release na brand work, internal na design system, at mga client mock sa ilalim ng NDA.
• Designer-to-developer handoff: i-paste ang HEX mula sa Figma at basahin ang rgb() string para sa Tailwind config, ang hsl() string para sa CSS custom property, o ang oklch() string para sa modernong palette — bawat format sa isang lugar, walang copy-paste sa pagitan ng mga tab.
• WCAG accuracy: ginagamit ng contrast checker ang eksaktong WCAG 2.1 relative-luminance formula at ang published na AA (4.5 / 3.0) at AAA (7.0 / 4.5) threshold para sa normal at malaking teksto. Ang iniuulat na ratio ay tumutugma sa mga manual na calculator sa loob ng 0.01.
• Dark-mode at palette derivation: inilalantad ng HSL at OKLCH ang lightness bilang isang channel, kaya madaling ilipat ang isang brand color pataas o pababa sa lightness axis para makakuha ng matched na dark-mode token o para makabuo ng 10-step na palette ramp mula sa isang seed.

Ano ang mga karaniwang paggamit ng color conversion?

Ang color conversion ay lumalabas sa buong web development, disenyo, at accessibility work:

• Mga design system: pag-convert ng brand HEX sa matched na HSL at OKLCH token para sa CSS custom-property scale, pagkatapos ay pag-verify na ang bawat kombinasyon ng token ay pumapasa ng WCAG AA laban sa background ng page.
• Mga accessibility audit: pag-paste ng foreground at background pair mula sa isang tunay na product screen at pagbabasa ng contrast ratio kasama ang mga AA/AAA verdict para sa parehong normal-weight at large-weight na teksto sa isang tingin.
• Cross-tool na round-trip: pagkuha ng kulay mula sa isang screenshot picker (HEX), pag-paste dito, at pagkopya ng hsl() o oklch() string direkta sa Tailwind, Figma token, o CSS-in-JS na tema.

Ano ang hitsura ng isang halimbawa ng color conversion?

Kunin ang sikat na rebeccapurple. Nire-resolve ng named-colour lookup ito sa #663399. Ang RGB conversion ay nagbibigay ng rgb(102, 51, 153). Ang HSL conversion ay nagbibigay ng hsl(270, 50%, 40%) — isang violet na hue, half-saturated, apat na tenth ang liwanag. Ang pagsuri ng kulay na iyon laban sa puting kulay gamit ang contrast tool ay nagbabalik ng ratio na malapit sa 7.39, na pumapasa ng AAA (7.0) para sa normal na teksto at AAA (4.5) para sa malaking teksto — isang matibay at accessible na foreground na pagpipilian. Ang pag-round-trip ng #663399 sa RGB → HSL → RGB → HEX ay nagbabalik ng orihinal na string nang eksakto, byte para sa byte.

Gamitin ang converter na ito bilang mabilis na sanggunian para sa anumang kulay na nakatagpo mo — sa code, sa mga design file, o sa isang screenshot — at ang contrast checker bilang sanity check bago mag-ship. Lahat ay tumatakbo nang lokal, walang nila-log, at ang conversion math ay sumusunod sa published na W3C at WCAG na detalye para ang mga numero ay tumutugma sa iniuulat ng iyong audit tool o browser devtools.