About this tool
This color converter takes a color in any common notation and shows it in every other one at once: 3, 4, 6, or 8-digit hex, rgb() and rgba(), hsl(), hsv/hsb, cmyk(), and the 148 named CSS colors, with a copy button beside each. A native color picker is wired to the same field, so you can pick visually or paste a value from a stylesheet or design file. Below the formats you get ten tints toward white and ten shades toward black, complementary, analogous, triadic, and split-complementary harmonies, and WCAG 2 contrast ratios against white, black, and any background you type, each marked pass or fail for AA and AAA text. It is for front-end developers, designers moving between Figma, CSS, and print, and anyone checking whether a text color is readable on a background.
How it works
Every input is parsed to red, green, and blue channels from 0 to 255 plus an alpha value, then converted from there. Hue, saturation, and lightness use the standard piecewise sRGB to HSL formulas (hue from the dominant channel, lightness as the mean of the maximum and minimum channel, saturation as the chroma divided by 1 minus |2L minus 1|); HSV uses the same hue with value equal to the maximum channel and saturation equal to chroma divided by value. CMYK is the simple conversion K = 1 minus max(R,G,B), C = (1 minus R minus K) / (1 minus K), and so on; it is not color-managed, so printed results depend on the press profile. Contrast ratios follow WCAG 2.1: each channel is linearized (c / 12.92 below 0.04045, otherwise ((c + 0.055) / 1.055) ^ 2.4), relative luminance is 0.2126 R + 0.7152 G + 0.0722 B, and the ratio is (L1 + 0.05) / (L2 + 0.05). Tints mix toward white and shades toward black in equal steps in RGB; harmonies rotate the hue in HSL.
Frequently asked questions
What is the difference between HSL and HSV (HSB)?
Both describe a color by hue plus two other numbers, but they define brightness differently. In HSL, lightness 100% is always white and 50% is the pure hue, so saturated colors sit in the middle. In HSV (also called HSB in Photoshop and macOS), value 100% is the brightest version of that hue, so pure red is hsv(0, 100%, 100%) but hsl(0, 100%, 50%). CSS uses HSL; most design tools show HSB.
Why does the CMYK result differ from what Photoshop shows?
This tool uses the plain mathematical conversion (K = 1 minus the brightest channel, then C, M, Y from the remainder) without an ICC profile. Photoshop and print workflows convert through a specific press profile such as U.S. Web Coated (SWOP) or FOGRA39, which accounts for real ink behavior and limits total ink coverage, so its numbers are different and are the ones to use for actual printing.
What contrast ratio do I need for accessible text?
WCAG 2.1 level AA requires at least 4.5:1 for normal text and 3:1 for large text (18 pt regular or 14 pt bold, roughly 24 px and 18.7 px). Level AAA raises those to 7:1 and 4.5:1. Non-text elements such as icons and form borders need 3:1 under AA. Black on white is 21:1, the maximum possible; mid gray #767676 on white is 4.54:1, just over the AA line.
How does an 8-digit hex color work?
The last two digits are the alpha channel: #2563eb80 is the same blue at 50% opacity (0x80 = 128, and 128 / 255 is about 0.5). A 4-digit form like #25e8 expands each digit by doubling it (#2255ee88). Both are supported by every current browser. Contrast ratios here are computed on the opaque color, because the visible result of a translucent color depends on what is behind it.