Skip to content

Color Converter

Convert colors between HEX, RGB, HSL, HSV, CMYK, and Tailwind CSS with contrast checker

Color Converter

Enter a color in any format

Converted #10b981

Preview

#10b981

RGB sliders

R16
G185
B129

HSL sliders

H160deg
S84%
L39%

Color values

HEX#10b981
RGBrgb(16, 185, 129)
HSLhsl(160, 84%, 39%)
HSB/HSVhsv(160, 91%, 73%)
CMYKcmyk(91%, 0%, 30%, 27%)
Tailwind
emerald-500
CSS name
lightseagreen

Contrast checker (WCAG 2.1)

Sample Text
On white background2.54:1
FailAA normal
FailAA large
FailAAA normal
FailAAA large
Sample Text
On black background8.28:1
PassAA normal
PassAA large
PassAAA normal
PassAAA large

Color history

Colors you use will appear here.

Updated . Provided as is. Check the output before you rely on it in production.

How to use Color Converter

  1. 1

    Paste any color format

    Enter a color in HEX (#FF5733), RGB (255, 87, 51), HSL (10, 100%, 60%), HSV, CMYK, or Tailwind CSS class name. The tool converts between all formats.

  2. 2

    See all format equivalents

    View conversions to HEX, RGB, HSL, HSV, CMYK, and Web color names. All formats update together when you adjust any value.

  3. 3

    Find matching Tailwind CSS color

    See the closest Tailwind CSS utility class for your color (e.g., bg-blue-500). If no exact match, it shows the nearest shade.

  4. 4

    Adjust lightness and saturation

    Use sliders to lighten/darken or increase/decrease saturation. See all format conversions update in real-time as you adjust.

  5. 5

    Copy any format to clipboard

    Click any color value to copy it to your clipboard, ready for CSS, design tools or code.

Questions and answers

What is Color Converter?
Colors can be written as HEX, RGB, HSL or HSV for screens and CMYK for print, all describing the same color. This converter accepts any of these, a Tailwind class or a CSS color name, shows every format with the nearest Tailwind and CSS name, and checks WCAG contrast against white and black.
Does it show the nearest Tailwind CSS color?
Yes. When you enter any color, the tool identifies the closest matching Tailwind CSS color class and shows the exact Tailwind shade name. This is helpful when migrating designs to a Tailwind-based project.

Use it as an API

Color Converter is also callable as a free HTTP JSON API at https://aidevhub.io/api/color-palette/convert/ — GET with query parameters or POST with a JSON body, no authentication, CORS enabled, fair use (abusive traffic is throttled at the edge; there is no per-request quota header). Responses return { ok, tool, result, meta }. 

curl -s "https://aidevhub.io/api/color-palette/convert/?color=%233b82f6&to=hsl"

Machine-readable contract: /api/tool/color-converter.json All API endpoints: /agents/ LLM site index: /llms.txt

For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Dedicated API endpoint

Deterministic outputs, machine-safe contracts, and production-ready examples.

Dedicated API

https://aidevhub.io/api/color-palette/convert/

OpenAPI: https://aidevhub.io/api/openapi.yaml

GET /api/color-palette/convert/ GET color-palette/convert
POST /api/color-palette/convert/ POST color-palette/convert