Color Picker (HEX/RGB/HSL)
Pick a color and copy it as HEX, RGB, HSL or HSV.
An interactive color picker. Drag the saturation/value square or type a value, and instantly see the color expressed in HEX, RGB, HSL and HSV. Click any value to copy.
Common use cases
- Pick brand colors for a website or app design and copy as HEX
- Convert a known HEX value to HSL for design tokens or theming
- Sample colors across formats when porting between Figma and code
- Find a similar shade by adjusting hue, saturation or lightness independently
Frequently asked questions
What's HSL good for?▾
HSL (hue/saturation/lightness) is intuitive when you want to derive related colors — shifting hue gives you the same color in a different family, lightness gives a tint or shade.
Why are HSL values from different tools slightly different?▾
Floating-point rounding. We round to the nearest integer for display, but compute internally at full precision so round-trip conversions stay accurate.
Related tools
🌈
CSS Gradient Generator
Build linear and radial CSS gradients with live preview.
🎨
Color Palette Generator
Generate harmonious color schemes from a base color.
👁
WCAG Contrast Checker
Check color contrast ratios against WCAG AA/AAA accessibility levels.
🎨
Color Converter
Convert HEX, RGB, HSL, HSV, CMYK and LAB instantly with auto-detection.