🎨 Color Picker — HEX RGB HSL Converter

Pick colors visually and instantly convert between HEX, RGB, and HSL formats. Copy CSS-ready values with one click. Free online color picker and converter for designers.

Pick Color

Click to open color picker

HEX

RGB

HSL

Opacity 100%

Selected

Complementary

Tints (lighter)

Shades (darker)

CSS Output

How to Use

Pick a color

Click the color swatch to open the browser color picker, or type directly into HEX, RGB, or HSL fields.

All formats update

All input fields and the preview update in real-time as you change any value.

Copy CSS values

Click any copy button in the CSS Output section to copy your color in any CSS format.

Frequently Asked Questions

What is HEX color format? +

HEX (hexadecimal) color format represents colors as a 6-digit code prefixed with #, like #7c6af7. Each pair of digits (00–FF) represents Red, Green, and Blue channel intensity.

What is the difference between RGB and HSL? +

RGB defines colors by Red, Green, Blue channel values (0–255). HSL uses Hue (0–360°), Saturation (0–100%), and Lightness (0–100%) — more intuitive for human perception and easier to create color variations.

How do I convert HEX to RGB? +

Split the HEX code into three pairs, convert each from hexadecimal to decimal: #7c6af7 → R:124, G:106, B:247. This tool does it instantly as you type.

Which color format should I use in CSS? +

Use HEX for static colors in CSS (most common). Use HSL when you need to programmatically create lighter/darker variants. Use RGB when you need transparency (rgba()).

How do I pick accessible colors? +

Ensure sufficient contrast between text and background. WCAG AA requires a 4.5:1 contrast ratio for normal text. Tools like our color picker help you find complementary colors.

संपूर्ण गाइड: Color Picker

Color Picker क्या है?

Color Picker एक visual tool है जो HEX, RGB, HSL, और HSV color formats के बीच real-time conversion करता है। Web design में color consistency maintain करना critical है — एक ही color के अलग-अलग representations को manually convert करना error-prone और time-consuming होता है।

यह tool designers और developers दोनों के लिए है: CSS variables set करने से लेकर brand color palettes define करने तक, सब कुछ accurately और instantly convert होता है।

कैसे उपयोग करें

Color wheel पर click करें या drag करें अपना desired color select करने के लिए।
HEX code type करें directly input field में।
RGB या HSL sliders adjust करें fine-tuning के लिए।
Copy format select करें — HEX, RGB, या HSL में से किसी भी format में copy करें।

Pro Tips

HSL format human-readable होता है: Hue (0-360°), Saturation (0-100%), Lightness (0-100%)।
CSS custom properties (--primary-color: #3b82f6) use करें design system maintain करने के लिए।
Dark mode के लिए same hue रखें लेकिन lightness adjust करें।