Color Picker

Free color picker: Drag a live palette to get HEX, RGB, HSL, CMYK, and the closest Tailwind color class. Copy CSS values instantly. Best online color picker for developers.

Color picker
Free color picker: Drag a live palette to get HEX, RGB, HSL, CMYK, and the closest Tailwind color class. Copy CSS values instantly. Best online color picker for developers.

Formats

HEX
RGB

Use any RGB format rgb(50, 50, 50) or 50, 50, 50

HSL
Tailwind
blue-600

Closest Tailwind Color Match

CMYK
cmyk(84%, 57%, 0%, 8%)

Frequently Asked Questions

What color formats are supported?

You can convert between HEX, RGB, HSL, and CMYK while dragging the color picker. The tool also finds the closest Tailwind CSS color class (for example red-500).

How does the closest Tailwind color work?

The picker compares your color with the default Tailwind palette (including 50–950 shades) and returns the nearest class name, such as blue-600 or rose-400. Copy it for use in className.

How do I use HEX in CSS?

Copy the HEX value (for example #2563EB) and paste it into CSS as color: #2563EB; or background-color: #2563EB;. RGB and HSL work the same way with rgb() and hsl() functions.

Is CMYK exact for print?

The CMYK values are a standard digital approximation. For professional print work, always proof colors in a dedicated print workflow because screens use RGB light.