Advertisement
Guide
About the Color Converter
The same color can be written many ways. HEX (#3b82f6) is compact and common in CSS. RGB describes red, green, and blue channels directly. HSL and HSV describe a color by hue, saturation, and lightness or value — which is far more intuitive when you want to make a color lighter, more muted, or shift its hue. Newer CSS adds OKLCH, which is perceptually even, and wide-gamut spaces like Display P3. Paste a color in any of these and the tool gives you every other notation, plus ready-made code for SwiftUI, UIKit, Jetpack Compose, Flutter, Android and Unity.
It also finds the nearest Tailwind and CSS named color, shows the WCAG contrast of the color as text on white and black, and suggests harmonies. Everything runs in your browser.
When to use HSL instead of HEX or RGB
HEX and RGB are great for storing an exact color but awkward for adjusting one — there's no obvious way to make #3b82f6“10% lighter” by eye. HSLmakes that trivial: keep the hue and saturation, raise the lightness. That's why HSL is handy for hover states and theme variations. Its weakness is that equal lightness does not look equally light across hues — yellow at 50% looks far brighter than blue at 50%. OKLCHfixes that, which is why Tailwind v4 defines its palette in it. Use the OKLCH sliders when you need colors that feel consistent.
Contrast and accessibility
Color choices affect readability. The WCAG contrast ratio tells you whether text will be legible against its background — the guidelines call for at least 4.5:1 for normal text. Checking contrast as you pick colors avoids designs that look fine to you but are hard to read for many users. For a dedicated pass/fail view, see the Contrast Checker.
How to use it
- 1Paste a color in any format, use the eyedropper, or click the swatch to open a picker.
- 2Fine-tune with the RGB, alpha, HSL or OKLCH sliders.
- 3Copy the CSS notation or platform code you need.
- 4Check contrast and the nearest Tailwind color, or try a harmony.
Frequently asked questions
What is the difference between HSL and HSV?
Both describe hue and saturation, but HSL uses lightness (0% is black, 100% is white) while HSV uses value (0% is black, 100% is the pure vivid color). HSL is common in CSS; HSV appears in many color pickers.
How do I convert HEX to RGB?
Enter the HEX value and read the RGB fields. Each pair of hex digits maps to one channel, so #3b82f6 is red 59, green 130, blue 246.
Why use HSL for a design system?
Because you can generate consistent lighter and darker shades by changing only the lightness, keeping hue and saturation fixed. That makes coherent color scales easy to build.
What contrast ratio do I need for text?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA asks for 7:1. The tool shows the ratio of your color as text on white and on black, with any transparency taken into account.
What is OKLCH and should I use it?
OKLCH describes a color by lightness, chroma and hue in a space designed so equal changes look equal. It is supported in all current browsers and is what Tailwind v4 uses. Some OKLCH colors lie outside sRGB; the sliders warn you and show the closest color that fits.
Why is the Android value in a different order?
Android, Jetpack Compose and Flutter write colors as 0xAARRGGBB — alpha first — while CSS puts alpha last (#RRGGBBAA). The tool converts between the two, and you can paste either.
How is the nearest Tailwind color chosen?
By distance in OKLab against Tailwind v4’s default palette. A ΔE under about 2 is hard to tell apart; above that, an arbitrary value like bg-[#6366f1] is the exact match.
Is my color data uploaded?
No. All conversion and contrast calculation happens in your browser.