Pick any color and convert instantly to HEX, RGB, HSL & Tailwind CSS
Select any color using the interactive color picker to view live HEX, RGB, HSL, and Tailwind CSS arbitrary background class values.
Web designers and frontend engineers frequently need to translate a single visual color across multiple CSS and utility-class notations. Our Color Picker & Palette Generator uses your browser's native color-selection interface (`<input type="color">`) and converts your chosen swatch in real time into four developer-ready formats: uppercase 6-digit hexadecimal (`#4F46E5`), functional `rgb(r, g, b)` channel values, perceptual `hsl(h, s%, l%)` coordinates, and a ready-to-use Tailwind CSS arbitrary background class (`bg-[#4f46e5]`). Every value recalculates instantaneously as you drag the color selector.
Understanding the math behind each color model makes stylesheet work much easier. A 6-digit `HEX` code (`#RRGGBB`) stores Red, Green, and Blue light intensities as three base-16 byte pairs ranging from `00` (`0`) to `FF` (`255`). Our tool extracts the decimal `RGB` channels (`0–255`) using bitwise shifts on the parsed hexadecimal integer (`(bigint >> 16) & 255` for Red, `(bigint >> 8) & 255` for Green, and `bigint & 255` for Blue). Those RGB channels are then normalized to the `0–1` range to compute `HSL`: Hue (`0°–360°` around the color wheel, where `0°` is red, `120°` is green, and `240°` is blue), Saturation (`0%` neutral gray to `100%` pure vivid color), and Lightness (`0%` black, `50%` pure hue, `100%` white).
Practical Usage & Technical Limitations: When copying the generated Tailwind CSS class (`bg-[#...]`), remember that square-bracket arbitrary value syntax requires Tailwind CSS v3.0+ (or JIT mode) and can also be adapted for text (`text-[#...]`) or border (`border-[#...]`) utilities. Keep in mind that standard CSS `HEX`, `rgb()`, and `hsl()` values operate within the sRGB color space and Do Not include alpha transparency (`rgba`/`hsla`) or print `CMYK` ink profiles in this tool. When choosing UI background and text colors, always verify that your foreground-to-background luminance contrast meets WCAG accessibility guidelines (at least 4.5:1 for normal body text).
वेब डिज़ाइनर्स और फ्रंटएंड डेवलपर्स को अक्सर एक ही रंग को अलग-अलग CSS फॉर्मेट और फ्रेमवर्क क्लासेस में लिखने की आवश्यकता होती है। हमारा Color Picker & Palette Generator आपके ब्राउज़र के नेचुरल कलर पिकर (`<input type="color">`) की मदद से आपके द्वारा चुने गए किसी भी रंग को तुरंत चार उपयोगी कोडिंग फॉर्मेट्स में बदलता है: 6-अंकों का कैपिटल `HEX Code` (`#4F46E5`), `rgb(r, g, b)` मान, `hsl(h, s%, l%)` मान, और सीधे उपयोग के लिए `Tailwind CSS` की आर्बिट्रेरी बैकग्राउंड क्लास (`bg-[#4f46e5]`)। जैसे ही आप कलर पिकर में कोई नया शेड चुनते हैं, चारों कोड रियल-टाइम में अपने-आप अपडेट हो जाते हैं।
इन अलग-अलग कलर मॉडल्स के पीछे के गणित को समझना UI डिज़ाइन में बहुत काम आता है। 6-अक्षरों वाला `HEX` कोड (`#RRGGBB`) लाल (Red), हरे (Green) और नीले (Blue) रंग की तीव्रता को बेस-16 (Hexadecimal) के तीन जोड़ों में दर्शाता है, जहाँ `00` का अर्थ `0` और `FF` का अर्थ `255` होता है। यह टूल बिटवाइज़ शिफ्टिंग के ज़रिए HEX कोड से तीनों `RGB` चैनल्स (`0` से `255`) निकालता है और फिर उन्हें `0–1` के अनुपात में बदलकर `HSL` की गणना करता है: जिसमें `H` (Hue) `0°` से `360°` के कलर व्हील का कोण है, `S` (Saturation) रंग की गहराई (`0%` ग्रे से `100%` शुद्ध रंग) है, और `L` (Lightness) चमक (`0%` काला, `50%` सामान्य रंग, `100%` सफेद) को दर्शाता है।
व्यावहारिक उपयोग और तकनीकी सीमाएं: इस टूल द्वारा दिए गए Tailwind CSS कोड (`bg-[#...]`) का उपयोग Tailwind v3.0 या उसके बाद के वर्शन में सीधे कस्टम बैकग्राउंड के लिए किया जा सकता है, और आप आवश्यकतानुसार `bg-` के स्थान पर `text-[#...]` या `border-[#...]` भी लिख सकते हैं। ध्यान रखें कि यह टूल मानक 6-अंकीय `sRGB` रंगों (`HEX`, `RGB`, `HSL` और `Tailwind CSS`) के लिए काम करता है—इसमें अल्फा ट्रांसपेरेंसी (`rgba`) या प्रिंटिंग के `CMYK` कोड शामिल नहीं हैं। अपनी वेबसाइट के लिए रंग चुनते समय यह अवश्य सुनिश्चित करें कि बैकग्राउंड और टेक्स्ट के रंगों के बीच पर्याप्त कंट्रास्ट (Contrast) हो ताकि उपयोगकर्ताओं को पढ़ने में आसानी रहे।