Skip to content
Image tools

Color Picker

Pick a color, convert between HEX, RGB, HSL, and find the closest Tailwind shade.

How it works

  1. 1Click the color swatch or type a HEX code.
  2. 2See HEX, RGB, HSL, and the nearest Tailwind color name update live.
  3. 3Click any shade in the ramp to jump to lighter or darker variants.

Use cases

  • Convert a design token across formats.
  • Generate a shade ramp around a brand color.
  • Pick a contrast-safe text color over a background.

Frequently asked questions

Are HSL and HSV the same?

No. We use HSL (Hue, Saturation, Lightness). HSV (Value) is similar but lightness/value diverge at high saturation.

What does the "Tailwind closest" row mean?

We compute Euclidean distance in RGB space between your color and every Tailwind 500 shade, and return the closest match.

Does this support alpha?

Not yet. Alpha (transparency) is on the roadmap.

See all →