Color Converter
Convert between HEX, RGB, HSL, HSV, and CMYK
rgb(58, 114, 216)
hsl(219, 67%, 54%)
hsv(219, 73%, 85%)
cmyk(73%, 47%, 0%, 15%)
WCAG 2 contrast of the color as it appears on each background (transparency included): 4.5:1 is the AA minimum for body text, 3:1 for large text, 7:1 is AAA.
About Color Converter
Color Converter shows one color in five notations at once: HEX (3, 4, 6, or 8 digits), RGB, HSL, HSV/HSB, and CMYK. Edit any of them, or use the color picker and the opacity slider, and the others follow as you type. Each notation has its own Copy button, and the page grades the color's WCAG 2 contrast as text on white and on black, transparency included. Color names such as rebeccapurple are not read, and CMYK comes from the plain formula, not from a printer profile. The page derives all five notations from one RGB value, so a HEX code typed with transparency keeps its alpha in rgba() and hsla() as well.
Example
The HEX code #3b82f6 typed in the "HEX" field, at full opacity, and what the page shows for it (the page's own conversion code, run in Node on October 6, 2026).
You type
HEX: #3b82f6 Opacity (alpha): 100%
The page shows
rgb(59, 130, 246) hsl(217, 91%, 60%) hsv(217, 76%, 96%) cmyk(76%, 47%, 0%, 4%) Text on white: 3.67:1 — AA large text only Text on black: 5.70:1 — AA
How to convert a color between HEX, RGB, and CMYK
- 1Type a code in the "HEX" field, with or without #, or choose a color with the picker next to it.
- 2Or change any number under "RGB", "HSL", "HSV / HSB", or "CMYK": every other field updates at once.
- 3Move the opacity slider to add transparency; the HEX, rgba(), and hsla() values then include it.
- 4Click "Copy" next to a notation, or "Copy HEX", to put that value on your clipboard.
Formats and limits
- Input
- HEX with 3, 4, 6, or 8 digits (the 4th and 8th digits set transparency), RGB 0–255, HSL and HSV with H 0–360 and the rest 0–100, CMYK 0–100, the color picker, opacity 0–100
- Output
- Text to copy: #rrggbb or #rrggbbaa, rgb() or rgba(), hsl() or hsla(), hsv(), cmyk()
- Rounding
- HSL, HSV, and CMYK are shown as whole numbers, and decimals typed in a number field are cut off
- Transparency
- Carried by HEX, rgba(), and hsla(); the hsv() and cmyk() lines stay opaque
- Contrast
- WCAG 2 ratio over white and over black, cut to two decimals: 7:1 AAA, 4.5:1 AA, 3:1 AA for large text only
Where your colors are processed
Each HEX, RGB, HSL, HSV, and CMYK value and both contrast grades are worked out in your browser, and no color you type or pick leaves it. The Copy buttons write to your own clipboard. If the browser refuses that copy, or the page itself crashes, our error watch sends the cleaned error message, the tool's name, and your browser's name and major version, never your color.
Frequently asked questions
Can I convert HEX to RGB and back?
Yes. A code typed in the "HEX" field fills the R, G, and B boxes (0 to 255) at once, and editing those boxes rewrites the HEX code. Short codes such as #fff are expanded, and a code that is not HEX is reported while the other fields keep the last valid color.
Is the CMYK value ready for print?
No. It is the simple formula K = 1 − max(R, G, B), with no ink or paper profile behind it. A print shop converts with the profile of its press, so ask for a proof, or for its own CMYK values, before printing brand colors.
Does it handle RGBA, HSLA, and 8-digit HEX?
Yes. Set "Opacity (alpha)" or type a code such as #3b82f680, and the HEX, rgba(), and hsla() values carry the alpha. The contrast grade is then measured on the color as it looks over each background. The hsv() and cmyk() lines have no alpha.
Are color names like rebeccapurple accepted?
No. Only HEX codes and the number fields are read. A name typed in the "HEX" field is reported as not a HEX color, so look up its code first; rebeccapurple, for instance, is #663399.
Tips and tricks
- ✓For lighter or darker shades of the same hue, change only "L%" under "HSL" and watch the contrast grade.
- ✓To find a text color that passes AA on a white page, lower "L%" until "Text on white" shows AA.