Color Picker & Converter
Pick colors and copy HEX, RGB, HSL values with accessible contrast context. Fully client-side — no account, uploads, or remote storage.
Added Apr 18, 2026 · Updated Apr 21, 2026
Input
Result
Enter a value for pick a color to see your result.
How it works
Converts a color picked from the native color picker into HEX, RGB, HSL, HSV/HSB, and CMYK color codes — plus a ready-to-use CSS custom property. All conversions happen instantly in your browser with no data sent anywhere.
Step by step
- 01Pick a color using the native browser color picker.
- 02The hex value is read directly from the input.
- 03Convert hex to RGB by parsing each pair of hex digits as a base-16 number.
- 04Derive HSL by normalising RGB values and computing hue, saturation, and lightness.
- 05Derive HSV and CMYK from the RGB values using their respective formulas.
Examples
Tailwind blue-500
Inputs
- Pick a color:
- #3b82f6
Result
- HEX:
- #3B82F6
- RGB:
- rgb(59, 130, 246)
- HSL:
- hsl(217°, 91%, 60%)
Frequently asked questions
What is the difference between HSL and HSV?
HSL (Hue, Saturation, Lightness) uses lightness where 50% is a 'pure' hue and 100% is white. HSV (Hue, Saturation, Value) uses value where 100% is the brightest form of the hue. HSL is more common in CSS; HSV is common in design software.
Why do HEX and RGB represent the same colour?
HEX is just RGB in base-16 (hexadecimal) notation. #3b82f6 represents R=0x3b=59, G=0x82=130, B=0xf6=246, which is the same as rgb(59, 130, 246).