வண்ண மாற்றி — ஆன்லைன் HEX, RGB, HSL மாற்றி _

வண்ண மாற்றம் என்றால் என்ன?

உங்கள் உலாவி render செய்யும் ஒவ்வொரு வண்ணமும் இறுதியில் ஒரு sRGB triple — சிவப்பு, பச்சை மற்றும் நீல channels-க்கு 0 முதல் 255 வரை மூன்று எண்கள், மற்றும் optional alpha. CSS Color Level 4 specification ஒரே triple-க்கு round-trip செய்யும் பல உரை வடிவங்களை, மற்றும் perceptually-uniform OKLCH space-ஐ வரையறுக்கிறது. இந்த கருவி அவற்றில் எதையும் படிக்கிறது, அனைத்திற்கும் மாற்றுகிறது, மற்றும் accessible interfaces ship செய்ய WCAG 2.1 contrast ratio-ஐ தெரிவிக்கிறது.

வண்ண மாற்றம் எவ்வாறு வேலை செய்கிறது?

மாற்றம் என்பது நன்கு வரையறுக்கப்பட்ட linear மற்றும் non-linear transforms-ன் ஒரு தொடர். ஒவ்வொரு படியும் உங்கள் உலாவியில் இயங்குகிறது — எந்த உள்ளீடும் எங்கள் servers-ஐ அடைவதில்லை:

1. உங்கள் உள்ளீடு parse செய்யப்படுகிறது. கருவி 3, 4, 6 அல்லது 8-digit HEX, legacy comma syntax அல்லது modern slash-alpha syntax-ல் rgb()/rgba()/hsl()/hsla()/hsv()/hwb() functional forms, அல்லது 150 named CSS colours-ல் ஏதாவது (rebeccapurple உட்பட) auto-detect செய்கிறது.
2. Parse செய்யப்பட்ட வண்ணம் canonical sRGB-க்கு normalise செய்யப்படுகிறது — 0–1 range-ல் ஒவ்வொன்றும் நான்கு floats {r, g, b, a}. இது ஒவ்வொரு output format-உம் derived ஆகும் single source of truth.
3. HEX ஒவ்வொரு channel-ஐயும் 0–255 byte மதிப்பிற்கு round செய்து hex digits-ஐ இணைப்பதால் கிடைக்கிறது. RGB / RGBA அதே bytes-ஐ print செய்கின்றன. HSL மற்றும் HSV standard W3C cylindrical-coordinate algorithms-ஐ பயன்படுத்துகின்றன; HWB hue-ஐ HSV-லிருந்து, whiteness-ஐ min(r, g, b)-லிருந்து, blackness-ஐ 1 - max(r, g, b)-லிருந்து பெறுகிறது.
4. CMYK ஒரு naive approximation — k = 1 - max(r, g, b), பிறகு residual channels-லிருந்து c, m, y. இது screen preview-க்கு ஏற்றது ஆனால் print-க்கு இல்லை: real CMYK வெளியீட்டிற்கு ICC profile தேவை, இந்த கருவி வேண்டுமென்றே அதை embed செய்வதில்லை.
5. OKLCH css-color-4 forward path-ஐ பின்பற்றுகிறது: sRGB linearise செய்யப்படுகிறது, LMS matrix மூலம் பெருக்கப்படுகிறது, cube-root எடுக்கப்படுகிறது, LMS-to-OKLab matrix மூலம் பெருக்கப்படுகிறது, மற்றும் இறுதியில் rectangular OKLab-லிருந்து polar OKLCH-க்கு மாற்றப்படுகிறது. OKLCH perceptually uniform, இதனால் மனிதக் கண்ணுக்கு balanced ஆக தெரியும் palettes வடிவமைக்க இது சரியான space.

இந்த வண்ண மாற்றியை ஏன் பயன்படுத்த வேண்டும்?

• தனியுரிமை: ஒவ்வொரு மாற்றமும் plain JavaScript பயன்படுத்தி உங்கள் உலாவியில் இயங்குகிறது. நீங்கள் ஒட்டும் வண்ணம் உங்கள் சாதனத்தை விட்டு வெளியே செல்வதில்லை, இது வெளியிடப்படாத brand வேலை, internal design systems மற்றும் NDA கீழ் client mocks-க்கு முக்கியமானது.
• Designer-to-developer handoff: Figma-விலிருந்து HEX ஒட்டி Tailwind config-க்கு rgb() string, CSS custom property-க்கு hsl() string, அல்லது modern palette-க்கு oklch() string படிக்கவும் — ஒரே இடத்தில் ஒவ்வொரு வடிவமும், 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 பயன்படுத்துகிறது. தெரிவிக்கப்பட்ட ratio manual calculators-உடன் 0.01 வரை match ஆகும்.
• Dark-mode மற்றும் palette derivation: HSL மற்றும் OKLCH lightness-ஐ ஒரே channel-ஆக expose செய்கின்றன, எனவே matched dark-mode tokens derive செய்ய அல்லது ஒரே seed-லிருந்து 10-step palette ramp உருவாக்க lightness axis-ஐ மேலும் கீழும் shift செய்வது எளிதானது.

வண்ண மாற்றத்தின் பொதுவான பயன்பாடுகள் என்ன?

வண்ண மாற்றம் web development, design மற்றும் accessibility வேலை முழுவதும் காட்சியளிக்கிறது:

• Design systems: CSS custom-property scale-க்கு matched HSL மற்றும் OKLCH tokens-க்கு ஒரு brand HEX மாற்றுதல், பிறகு ஒவ்வொரு token combination-உம் page background-க்கு எதிராக WCAG AA pass ஆகிறதா என சரிபார்த்தல்.
• Accessibility audits: ஒரு real product screen-லிருந்து foreground மற்றும் background pair ஒட்டி ஒரே பார்வையில் சாதாரண-weight மற்றும் large-weight உரை இரண்டிற்கும் contrast ratio மற்றும் AA/AAA verdicts படிக்கவும்.
• Cross-tool round-trips: screenshot picker-லிருந்து ஒரு வண்ணம் இழுத்து (HEX), இங்கே ஒட்டி, Tailwind, Figma tokens அல்லது CSS-in-JS theme-ல் நேரடியாக hsl() அல்லது oklch() string நகலெடுக்கவும்.

வண்ண மாற்ற எடுத்துக்காட்டு எப்படி இருக்கும்?

பிரபலமான rebeccapurple-ஐ எடுங்கள். named-colour lookup அதை #663399-க்கு resolve செய்கிறது. RGB மாற்றம் rgb(102, 51, 153) தருகிறது. HSL மாற்றம் hsl(270, 50%, 40%) தருகிறது — ஒரு violet hue, half-saturated, நான்கு-பத்துகள் bright. அந்த வண்ணத்தை pure white-உடன் contrast tool மூலம் சரிபார்க்கும்போது சுமார் 7.39 ratio கிடைக்கும், இது சாதாரண உரைக்கு AAA (7.0) மற்றும் பெரிய உரைக்கு AAA (4.5) pass ஆகிறது — ஒரு வலுவான, accessible foreground தேர்வு. #663399 RGB → HSL → RGB → HEX மூலம் round-trip செய்யும்போது அசல் string சரியாக திரும்புகிறது.

நீங்கள் சந்திக்கும் எந்த வண்ணத்திற்கும் — code-ல், design files-ல் அல்லது screenshot-ல் — இந்த மாற்றியை விரைவான reference ஆகவும், shipping முன்பு sanity check-ஆக contrast checker-ஐயும் பயன்படுத்துங்கள். எல்லாம் locally இயங்குகிறது, எதுவும் log ஆவதில்லை, மற்றும் conversion math published W3C மற்றும் WCAG specifications பின்பற்றுகிறது, எனவே எண்கள் உங்கள் audit tool அல்லது browser devtools தெரிவிப்பதோடு match ஆகும்.