Color Converter — HEX, RGB, HSL ഓൺലൈൻ Converter _

Color conversion എന്താണ്?

ബ്രൗസർ render ചെയ്യുന്ന ഓരോ നിറവും ആദ്യം ഒരു sRGB triple ആണ് — red, green, blue channels-നായി 0 മുതൽ 255 വരെ മൂന്ന് സംഖ്യകൾ, കൂടാതെ optional alpha. CSS Color Level 4 specification ഒരേ triple-ലേക്ക് round-trip ചെയ്യുന്ന നിരവധി text format, കൂടാതെ perceptually-uniform OKLCH space ഇവ define ചെയ്യുന്നു. ഈ ടൂൾ ഏതൊരു ഇൻപുട്ടും വായിക്കുന്നു, എല്ലാ format-ലേക്കും convert ചെയ്യുന്നു, accessible interface ship ചെയ്യാൻ ആത്മവിശ്വാസത്തോടെ WCAG 2.1 contrast ratio report ചെയ്യുന്നു.

Color conversion എങ്ങനെ പ്രവർത്തിക്കുന്നു?

Conversion നന്നായി defined linear, non-linear transforms-ൻ്റെ ഒരു series ആണ്. ഓരോ step-ഉം ബ്രൗസറിൽ run ആകുന്നു — ഒരു ഇൻപുട്ടും ഒരിക്കലും server-ൽ എത്തില്ല:

1. ഇൻപുട്ട് parse ചെയ്യുന്നു. ടൂൾ 3, 4, 6, 8-digit HEX, functional form rgb()/rgba()/hsl()/hsla()/hsv()/hwb() legacy comma syntax, modern slash-alpha syntax, അല്ലെങ്കിൽ 150 named CSS colours (rebeccapurple ഉൾപ്പടെ) auto-detect ചെയ്യുന്നു.
2. Parse ചെയ്ത colour canonical sRGB-ലേക്ക് normalise ചെയ്യുന്നു — 0–1 range-ൽ നാല് floats {r, g, b, a}. ഇത് ഓരോ output format-ഉം derive ചെയ്യുന്ന ഒരൊറ്റ source of truth ആണ്.
3. ഓരോ channel 0–255 byte value-ലേക്ക് round ചെയ്ത് hex digits join ചെയ്ത് HEX ഉണ്ടാക്കുന്നു. RGB / RGBA അതേ bytes print ചെയ്യുന്നു. HSL, HSV standard W3C cylindrical-coordinate algorithms apply ചെയ്യുന്നു; HWB hue HSV-ൽ നിന്ന്, whiteness min(r, g, b)-ൽ നിന്ന്, blackness 1 - max(r, g, b)-ൽ നിന്ന് derive ചെയ്യുന്നു.
4. CMYK ഒരു naive approximation ആണ് — k = 1 - max(r, g, b), പിന്നെ residual channels-ൽ നിന്ന് c, m, y. Screen preview-ന് അനുയോജ്യം, print-ന് അല്ല: real CMYK output-ന് ഈ ടൂൾ ഉദ്ദേശ്യപൂർവ്വം embed ചെയ്യാത്ത ICC profile ആവശ്യമാണ്.
5. OKLCH css-color-4 forward path follow ചെയ്യുന്നു: sRGB linearise ചെയ്ത്, LMS matrix multiply ചെയ്ത്, cube-root ചെയ്ത്, LMS-to-OKLab matrix multiply ചെയ്ത്, rectangular OKLab-ൽ നിന്ന് polar OKLCH-ലേക്ക് convert ചെയ്യുന്നു. OKLCH perceptually uniform ആണ്, അതിനാൽ human eye-ന് balanced ആയ palettes design ചെയ്യാൻ ഇത് ഉചിതമാണ്.

ഈ color converter ഉപയോഗിക്കേണ്ടതെന്തുകൊണ്ട്?

• സ്വകാര്യത: ഓരോ conversion-ഉം plain JavaScript ഉപയോഗിച്ച് ബ്രൗസറിൽ run ആകുന്നു. Paste ചെയ്ത colour ഉപകരണം വിടുന്നേ ഇല്ല — unreleased brand work, internal design system, NDA-കൾ കീഴിലുള്ള client mock ഇവക്ക് ഇത് പ്രധാനം.
• Designer-to-developer handoff: Figma-ൽ നിന്ന് HEX paste ചെയ്ത് Tailwind config-ന് rgb() string, CSS custom property-ന് hsl() string, അല്ലെങ്കിൽ modern palette-ന് oklch() string — ഒരിടത്ത് ഓരോ format, tabs-ൽ copy-paste ഇല്ല.
• WCAG accuracy: contrast checker കൃത്യം WCAG 2.1 relative-luminance formula, published AA (4.5 / 3.0), AAA (7.0 / 4.5) thresholds ഉപയോഗിക്കുന്നു. Reported ratio manual calculator-നോ browser devtools-നോ 0.01-ൻ്റെ അകലത്തിൽ match ആകും.
• Dark-mode, palette derivation: HSL, OKLCH lightness ഒരൊറ്റ channel ആയി expose ചെയ്യുന്നു, അതിനാൽ matched dark-mode token derive ചെയ്യാൻ അല്ലെങ്കിൽ ഒറ്റ seed-ൽ നിന്ന് 10-step palette ramp generate ചെയ്യാൻ brand colour lightness axis-ൽ shift ചെയ്യൽ straightforward ആണ്.

Color conversion-ൻ്റെ സാധാരണ ഉപയോഗങ്ങൾ എന്തെല്ലാം?

Color conversion വെബ് development, design, accessibility work ഉടനീളം കാണുന്നു:

• Design systems: CSS custom-property scale-ന് brand HEX matched HSL, OKLCH tokens-ലേക്ക് convert ചെയ്ത്, page background-ൻ്റെ ഓരോ token combination-ഉം WCAG AA pass ആകുന്നോ confirm ചെയ്യുക.
• Accessibility audit: real product screen-ൽ നിന്നുള്ള foreground, background pair paste ചെയ്ത് ഒറ്റ നോട്ടത്തിൽ contrast ratio, normal-weight, large-weight text-നുള്ള AA/AAA verdict ഓഫ് വായിക്കുക.
• Cross-tool round-trips: screenshot picker-ൽ നിന്ന് colour (HEX) pull ചെയ്ത്, ഇവിടെ paste ചെയ്ത്, hsl() അല്ലെങ്കിൽ oklch() string Tailwind, Figma tokens, CSS-in-JS theme-ൽ നേരിട്ട് copy ചെയ്യുക.

Color conversion ഉദാഹരണം എങ്ങനെ ഇരിക്കും?

പ്രസിദ്ധ rebeccapurple എടുക്കുക. Named-colour lookup അതിനെ #663399 ആക്കുന്നു. RGB conversion rgb(102, 51, 153) നൽകുന്നു. HSL conversion hsl(270, 50%, 40%) നൽകുന്നു — violet hue, half-saturated, four-tenths bright. ആ colour pure white-ൻ്റെ നേരെ contrast tool-ൽ check ചെയ്യുമ്പോൾ ratio 7.39-ഓ ടൽ ലഭ്യമാകുന്നു — normal text-ന് AAA (7.0), large text-ന് AAA (4.5) clear ചെയ്യുന്നു. #663399 RGB → HSL → RGB → HEX round-trip ചെയ്യുമ്പോൾ ഒറിജിനൽ string byte for byte തിരിച്ചു ലഭിക്കുന്നു.

Code-ൽ, design file-ൽ, screenshot-ൽ encounter ചെയ്യുന്ന ഏതൊരു colour-നും quick reference ആയി ഈ converter ഉപയോഗിക്കുക, shipping-ന് മുൻപ് sanity check ആയി contrast checker ഉപയോഗിക്കുക. ഓരോന്നും locally run ആകുന്നു, ഒന്നും log ആകുന്നില്ല, conversion math published W3C, WCAG specifications follow ചെയ്യുന്നു.