Color Converter
Convert any color across HEX, RGB, HSL, HSV and CMYK live — with the nearest CSS name, WCAG contrast, harmonies, and shade/tint ramps.
About this ToolHow it works, benefits & use casesTap to collapse
Type a color in almost any notation and this converter translates it across every common format at once. Feed it a HEX code, an rgb()/rgba(), hsl()/hsla(), or a CSS color name like royalblue, and it outputs HEX, RGB, HSL, HSV and CMYK — plus the alpha-aware HEXA, RGBA and HSLA forms — each as a click-to-copy row. A large swatch previews the color with the nearest CSS color name, and a built-in screen eyedropper (where the browser supports it) or a Random button let you grab colors fast. Beyond conversion, it analyzes the color: WCAG contrast ratios against white and black with AA/AAA/AA-Large pass markers, per-channel RGB/HSL/CMYK values, relative luminance, brightness and a light/dark verdict, and full ramps of shades, tints and color harmonies (complementary, analogous, triadic, tetradic, split-complement, monochromatic) that you can click to jump to. Every color is captured in a shareable URL, and it all runs in your browser.
How to Use
- 1Type or paste a color into the "Color value" field — HEX, rgb(), hsl(), or a CSS name all work.
- 2Use the native color box, the screen eyedropper (if your browser supports it), or "Random" to set a color visually instead.
- 3Read the format rows (HEX, RGB, HSL, HSV, CMYK, plus alpha variants) and click any one to copy it.
- 4Check the WCAG contrast cards against white and black to see which AA/AAA levels the color passes.
- 5Click any shade, tint or harmony swatch to make it the new active color, then copy the page URL to share it.
Key Benefits
- Accepts HEX, RGB(A), HSL(A) and CSS color names as input
- Converts to HEX, RGB, HSL, HSV, CMYK and the alpha-aware HEXA/RGBA/HSLA forms at once
- Shows the nearest CSS color name for any value
- WCAG contrast ratios against white and black with AA/AAA/AA-Large pass indicators
- Generates shade, tint and six harmony palettes you can click to adopt
- Screen eyedropper and Random helpers for fast color capture
- Shareable URL captures the exact color; everything runs client-side
Common Use Cases
- Converting a designer's HEX value into the rgb() or hsl() your CSS uses
- Checking whether text in a given color passes WCAG AA contrast on white or black
- Translating screen RGB into CMYK percentages before sending artwork to print
- Building a shade-and-tint scale or harmony palette from a single brand color
- Sampling a color from anywhere on screen with the eyedropper and reading all its formats
Channels & perception
RGB
- R
- 59
- G
- 130
- B
- 246
- A
- 1
HSL
- H
- 217°
- S
- 91%
- L
- 60%
- A
- 1
CMYK
- C
- 76%
- M
- 47%
- Y
- 0%
- K
- 4%
Perception
- Lum
- 0.235
- Bright
- 122
- Tone
- dark
Shades (→ black)
Tints (→ white)
Harmonies · click a swatch to use it
Complementary
Analogous
Triadic
Tetradic
Split-complement
Monochromatic
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- Color Scheme GeneratorBuild colour harmonies with full 50–950 ramps, a WCAG accessibility matrix, and a live UI preview — export CSS, Tailwind, SCSS, JSON or SVG
- Text to HexConvert text to hexadecimal
- cURL to Code ConverterConvert cURL commands to code in various languages
- HTML to MarkdownConvert HTML to Markdown
- JSON to CSVConvert JSON to CSV format
- npm to Yarn ConverterConvert npm commands and package-lock.json to Yarn equivalents
You can enter HEX (with or without alpha), rgb()/rgba(), hsl()/hsla(), or a CSS color name like tomato. It converts to HEX, RGB, HSL, HSV and CMYK, plus alpha-aware HEXA, RGBA and HSLA, each shown as a one-click copy row.
The tool computes the contrast ratio between your color and both white and black, then marks whether each ratio meets WCAG AA (4.5:1), AAA (7:1) and AA Large (3:1). That lets you judge at a glance whether the color is readable as text on a light or dark background.