Color Picker & Converter
Pick colors and convert between HEX, RGB, HSL, Tailwind CSS and more.
Color Values
WCAG Contrast Checker
Sample Text
The quick brown fox jumps over the lazy dog
4.47
Contrast Ratio
Quick Colors
About the Color Picker & Converter
Pick a color visually or paste any value, then convert instantly between HEX, RGB, HSL, HSV, and CMYK. Every format describes the same color differently, and switching between them is a constant chore when moving a palette between design files, CSS, and native code.
How to use it
- 1 Use the color picker, or paste an existing value in any supported format.
- 2 Every other format updates at the same time.
- 3 Adjust the hue, saturation, or lightness to explore nearby shades.
- 4 Copy the format you need directly into your stylesheet or design tool.
What it does
- Visual picker plus direct value entry
- HEX, RGB, HSL, HSV and CMYK conversion in real time
- Alpha channel support for transparent colors
- Generated tints and shades for building a scale
Frequently asked questions
Is anything uploaded?
No. Every calculation happens locally in your browser using JavaScript. Nothing you paste is uploaded, logged, or stored on a server, which makes the tool safe to use with production data, credentials, and customer records.
When should I use HSL instead of HEX?
HSL separates hue from saturation and lightness, so you can build a consistent palette by keeping the hue fixed and varying lightness. That is far harder with HEX, where making a color 10% lighter means recalculating three unrelated pairs of digits.
Why does my CMYK conversion not match my printer?
RGB is additive light and CMYK is subtractive ink, and the two gamuts do not overlap fully — vivid RGB greens and blues simply cannot be reproduced in ink. The conversion here uses the standard naive formula. For production print work, convert through a proper ICC profile in your design software.
What does the alpha value mean?
Alpha is opacity, from 0 (fully transparent) to 1 (fully opaque). In HEX it appears as two extra digits at the end (#RRGGBBAA); in CSS you can also write rgb(0 0 0 / 50%).
What is a HEX color code?
It is a six-digit hexadecimal number where each pair of digits sets the red, green, and blue channel from 00 to FF (0–255). #FF0000 is pure red. The three-digit shorthand #F00 expands by doubling each digit.