Generators
Color Picker & Converter
Pick colors and convert between HEX, RGB, and HSL.
Pick a color and instantly see its HEX, RGB, HSL and CSS values. A handy tool for designers, developers and anyone tweaking a brand palette.
Use the tool
#6366F1rgb(99, 102, 241)hsl(239, 84%, 67%)What this tool does
A color converter translates a single color between common color models. HEX is compact and widely used in CSS; RGB describes screen color in red/green/blue components; HSL describes color by hue, saturation and lightness, which is more intuitive for adjusting tints and shades.
Why people use it
- Designers handing files to developers need both HEX and RGB.
- Developers tweaking a Tailwind theme need HSL for cleaner palette generation.
- Print-adjacent workflows need CMYK (we display the closest sRGB equivalent).
- Brand guidelines often list only one format — convert to whatever your tool needs.
Step-by-step guide
- Open the Color Picker & Converter tool.
- Use the color picker to choose a color, or paste an existing HEX or RGB value.
- All other formats update simultaneously.
- Copy whichever format you need.
Real examples
Building a brand palette
A founder picks a primary brand color and copies the HEX, RGB and HSL values into the brand guidelines doc.
Tweaking a button hover state
A developer grabs the HSL of the brand color and bumps the lightness to create a polished hover variant.
Common use cases
- Brand palette setup
- Tailwind theme building
- Adjusting hover/active states
- Matching colors from a screenshot
- Designing infographics
Frequently asked questions
Is the color picker accurate?
Yes — it uses the browser’s native color input, which is calibrated to your monitor’s sRGB profile.
Does it support HSLA / RGBA?
The transparency channel is on the roadmap. For now, alpha can be appended manually.