Color Code Converter

This tool converts between five color formats — HEX, RGB, HSL, HSV, and CMYK — in real time. Pick a color with the color picker, or type directly into any format field and all other fields update instantly. Everything runs in your browser; no data is sent to any server. Use the copy button to grab any format value with a single click.

Color Format Reference

HEX (e.g. #3b82f6) is the standard notation for HTML and CSS, using base-16 numbers to encode each color channel. RGB (e.g. rgb(59, 130, 246)) represents red, green, and blue channels as integers from 0 to 255 — the natural format for programmatic color manipulation. HSL (e.g. hsl(217, 91%, 60%)) encodes hue, saturation, and lightness in a way that feels intuitive to designers, making it easy to create harmonious palettes by shifting hue or adjusting lightness. HSV (e.g. hsv(217, 76%, 96%)) is similar to HSL but uses value (brightness) instead of lightness, and is the model behind most graphical color-picker widgets. CMYK (e.g. cmyk(76, 47, 0, 4)) is the industry-standard format for print, representing ink amounts for cyan, magenta, yellow, and key (black) as percentages.

WCAG Contrast Ratio and Accessibility

The Web Content Accessibility Guidelines (WCAG) define standards for making web content accessible to people with visual impairments. Contrast ratio measures the perceptual difference in luminance between a foreground and background color, calculated using the W3C relative luminance formula. A ratio of 4.5:1 or higher is required for AA compliance (normal text), and 7:1 or higher for AAA compliance. This tool automatically calculates the contrast ratio of your chosen color against both white and black text, showing the AA/AAA pass or fail status for each. Use this when selecting button backgrounds, card colors, or any UI element with text overlaid — it helps ensure your design is readable for users with low vision or color blindness.

Tailwind CSS Color Matching

Tailwind CSS is a utility-first CSS framework with an extensive built-in color palette — including slate, gray, red, blue, green, and many more families, each with shades from 50 to 950. This tool finds the closest Tailwind color to any color you input, so you can see which design token to use (e.g. blue-500). This is especially useful when importing a color from a design file or brand kit and wanting to map it to an existing Tailwind class, avoiding one-off custom values. If the nearest match is close enough, you can use the class name directly in your JSX or HTML, saving time and keeping your UI consistent with the Tailwind palette.