Color Picker
ColorPick any color and get HEX, RGB, HSL, and CSS values with a live preview swatch.
Contrast with white
How to use the Color Picker
Color Picker works the moment the page loads. Enter a colour value in any CSS-recognised format, and the tool instantly displays the colour visually, its equivalent values in other formats, and accessibility contrast information. The colour picker button opens your system's native picker for visual selection.
Why use the Color Picker
Color Picker handles the colour tasks that come up most frequently — converting between CSS colour formats, checking contrast accessibility, and generating variations — without requiring you to install design software or navigate a feature-heavy colour tool. The minimal interface means you find the value you need and get back to work.
When to use Color Picker
Use Color Picker when you are contributing to an open-source project and need to match the project's existing colour conventions. Convert the theme colours from the project style guide into your preferred format, confirm your contribution uses the right variables, and submit with confidence.
Key features of Color Picker
Color Picker gives you every colour format at once — HEX, RGB, HSL — with accurate WCAG contrast checks against light and dark backgrounds. Pick a colour visually or type a value, and all representations update simultaneously for instant comparison.
Common use cases for Color Picker
Color Picker is used when: a frontend developer converts the HEX values from a Figma design file into HSL for a Tailwind CSS configuration; a designer checks whether light text on a coloured background meets WCAG AA accessibility standards; and a branding manager documents the exact RGB equivalents of a company's HEX brand palette for print use.