Pick a color and convert between HEX, RGB, HSL formats. Color palette with CSS value copying
WCAG Contrast
Shades
Tailwind CSS
Harmonies
Convert colors between HEX, RGB, and HSL formats.
Visual color selection using a palette. Changing a value in any format automatically recalculates the others.
You can copy the color value in any of the three formats for use in CSS, design, or development.
Color Picker Online — Color Selection, Harmonies, Tailwind CSS
A professional color tool: convert between HEX, RGB, HSL, CMYK, find color harmonies, check WCAG contrast, find the nearest Tailwind CSS class, and generate shade scales — all in one place.
Color Models and Formats
| Format | Example | Use case |
|---|---|---|
| HEX | #3B82F6 | CSS, HTML — most common |
| RGB | rgb(59, 130, 246) | CSS, Canvas API, image filters |
| HSL | hsl(217, 91%, 60%) | Programmatic color manipulation, theming |
| CMYK | 76%, 47%, 0%, 4% | Print, publishing |
Color Harmonies
- Complementary — opposite on the color wheel (H + 180°). Maximum contrast.
- Analogous — neighboring colors (±30°). Soft, harmonious combination.
- Triadic — three colors at 120°. Vivid, balanced palette.
- Split-complementary — base + two neighbors of the complement. Less tense than complementary.
Tailwind CSS — Nearest Class Finder
The tool finds the nearest Tailwind CSS class using Euclidean RGB distance across all 242 standard colors (22 families × 11 shades). For example, #3B82F6 maps to bg-blue-500.
WCAG Contrast
WCAG defines minimum contrast ratios for text readability. Our tool shows contrast against white and black backgrounds. For accessible color pair selection use WCAG Contrast.
Frequently Asked Questions
How to convert HEX to RGB?
HEX #3B82F6: R=0x3B=59, G=0x82=130, B=0xF6=246. Our tool does this automatically for any input format.
What is a shade scale?
A scale of 10 color variants from very light (L=95%) to very dark (L=5%) preserving the original hue and saturation.
Why is HSL better than RGB for design?
HSL is intuitive: H=hue (0–360°), S=saturation, L=lightness. Easy to predict how a change in one component affects the color.
For contrast checking use WCAG Contrast, for gradients — CSS Gradient.
Useful articles
WCAG Color Contrast: Website Accessibility Guide
A complete guide to color contrast: WCAG 2.1 standards, AA and AAA levels, calculation formula, practical examples of good and bad contrast, and how to fix accessibility issues.
CSS Border Radius: Rounding Element Corners
How to use border-radius: syntax, shorthand notation, elliptical corners. Online border-radius generator.