Color Converter

यह किसके लिए है?

Designers और front-end developers लगातार formats के बीच colors को shuffle करते रहते हैं — Figma आपको hex देता है, design tokens spec को OKLCH चाहिए, आपका CSS HSL इस्तेमाल करता है, और आपने जो image पकड़ी वह RGB में है। यह tool हर notation को sync में रखता है: एक को edit करें, बाकी live update हो जाते हैं। CSS Color Module 4 में जोड़ा गया (और 2023 से सभी major browsers में supported) modern oklch() format शामिल है, जो perceptually uniform colors produce करता है जिन्हें HSL की तुलना में reason करना बहुत आसान है।

कब इस्तेमाल करें

• एक brand hex code को CSS overlay के लिए alpha के साथ rgb() में translate करना।
• Design system को perceptual color में migrate करते हुए HSL और OKLCH के बीच बदलना।
• Screenshot tool से paste किया हुआ rgb(52, 152, 219) पढ़कर अपनी stylesheet के लिए hex code में बदलना।
• OKLCH chroma value की sanity-check (~0.4 से ऊपर कुछ भी संभवतः sRGB gamut के बाहर है)।

Format quick reference

• Hex — #RRGGBB (या 3-digit shorthand #RGB)। Universal, alpha तब तक नहीं जब तक 8-digit (#RRGGBBAA) नहीं हो।
• RGB — rgb(0–255, 0–255, 0–255)। वास्तविक sRGB channel values जो आपकी screen पाती है।
• HSL — hue (0–360°), saturation (0–100%), lightness (0–100%)। Color families के बारे में सोचना आसान है, पर lightness non-perceptual है: HSL 50% green, HSL 50% blue से ज़्यादा bright दिखती है।
• OKLCH — perceptual lightness (0–1), chroma (sRGB में 0–~0.4), hue (0–360°)। एक ही L वाले दो colors equally bright दिखते हैं; design systems और accessibility के लिए ideal है।

आम गलतियाँ

• OKLCH lightness 0–1 इस्तेमाल करती है, 0–100 नहीं। CSS दोनों accept करता है (0.65 या 65%); यह tool भी दोनों form accept करता है।
• कुछ OKLCH values sRGB के बाहर गिरती हैं (जैसे blue के लिए high chroma)। Tool conversion पर displayable sRGB तक clamp कर देता है — result approximate है, exact नहीं।
• HSL HSV जैसा नहीं है। HSV का "value" सबसे bright channel है; HSL का "lightness" सबसे bright और सबसे dark का midpoint है। वे एक ही color के लिए अलग numbers देते हैं।
• Round-tripping हमेशा lossless नहीं होती। hex → hsl → hex rounding की वजह से एक single integer shift कर सकता है। Exact reproduction के लिए, hex store करें।
• Hex और RGB default रूप से sRGB हैं, Display P3 या Rec. 2020 नहीं। अगर आपका design tool wide-gamut profile में है, तो वही hex अलग दिखेगा।