Color Picker & Converter
Pick colors and convert between HEX, RGB, HSL formats.
Color Values
Preset Colors
About this tool
Dial in a colour with a visual picker and instantly see it rendered in every format you're likely to paste somewhere — 3- and 6-digit HEX, RGB, RGBA, HSL, and HSLA. Useful when a designer hands you a Figma palette in HEX but your chart library wants RGB, when you're matching a brand colour pulled from a screenshot, or when you need to nudge an HSL hue to a slightly darker shade without reaching for Photoshop. The picker runs entirely client-side, so unreleased brand colours don't get logged anywhere. Copy any representation to the clipboard with one click, tweak hue, saturation, and lightness independently, and keep a running preview so you can eyeball contrast before committing the change to your stylesheet.
Features
- Pick any color with an interactive color wheel
- Convert between HEX, RGB, and HSL formats
- Copy color codes to clipboard in any format
- Real-time preview of selected colors
How to Use
- Use the color picker to select your desired color
- View the color value in HEX, RGB, and HSL formats
- Click any color code to copy it to your clipboard
- Adjust hue, saturation, and lightness as needed
Frequently Asked Questions
Which colour format should I use in CSS?
For most modern projects, HSL is easier to reason about (the numbers map to hue, saturation, and lightness), while HEX is shorter in shared snippets. RGBA and HSLA let you set transparency. Pick whichever keeps your stylesheet readable — browsers render them identically.
Why does the HEX value have eight characters?
Eight-character HEX (e.g. #112233FF) includes an alpha channel — the last two characters encode transparency from 00 (invisible) to FF (fully opaque). Strip them if you only need the six-character opaque form.
Do I need to worry about colour spaces like P3 or OKLCH?
Not for standard web work. The picker stays in sRGB, which is what every browser, CSS value, and design tool assumes by default. Wide-gamut spaces like Display-P3 matter for high-end photography and cinema, not typical UI work.
Is this accessible? Does it check contrast?
The picker shows you the colour, but it doesn't yet score WCAG contrast. For now, pair it with a dedicated contrast tool to verify text readability against your chosen background — especially for body copy and interactive elements.
Why does the same HEX code look different on my monitor and my phone?
Each display has its own calibration — colour temperature, gamma, and gamut vary. sRGB is the lowest-common-denominator your browser assumes, but phones often render with wider gamuts and bolder saturation. For brand-critical colours, hard-calibrate against a reference device rather than trusting any one screen.
Can I copy a colour directly from an image?
Not yet — the picker starts from a colour you select visually, not from image input. If you need to sample a colour from a screenshot, use your OS's built-in colour picker (Digital Color Meter on macOS, Snipping Tool on Windows) and paste the HEX back in.