Skip to content
SPCXTools

Color Converter

Convert any color between HEX, RGB, HSL, HSV and CMYK, and check its contrast.

Runs locally — files never leave your device

Loading tool…

How to use Color Converter

  1. 1Type or paste a color in any format — for example #0EA5E9, rgb(14 165 233), hsl(199 89% 48%) or a CSS name like tomato — or use the color picker.
  2. 2Read the same color in HEX, RGB, HSL, HSV and CMYK and copy the format you need.
  3. 3Check the contrast ratio against white and black to see whether text in this color is readable.
  4. 4Click a swatch in the tints and shades scale to explore lighter and darker versions.

Convert colors between every common format

Designers, developers and marketers constantly move colors between tools that speak different languages: CSS wants HEX or HSL, a brand guide lists RGB and CMYK, and a design app shows HSB. This color converter takes a color in any of these formats and shows it in all the others at once, with a one-click copy for each. It also checks text contrast for accessibility and generates a scale of tints and shades.

Features

  • Any input format: HEX (3, 4, 6 or 8 digits), RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, plain number triples and CSS color names.
  • All outputs at once: HEX, RGB, HSL, HSV and CMYK, each with a copy button.
  • Transparency support — alpha values are kept in HEX8, RGBA and HSLA.
  • Native color picker for choosing a color visually.
  • WCAG contrast checker against white and black, with AA results for normal and large text.
  • Tints and shades from 10% to 90% lightness; click any swatch to load it.

Color formats explained

  • HEX — #RRGGBB in hexadecimal, the most common format in web design. An optional fourth pair sets transparency.
  • RGB — red, green and blue from 0 to 255; how screens actually create colors.
  • HSL — hue (the position on the color wheel), saturation (intensity) and lightness. Easy to adjust by hand: change only the lightness to get lighter or darker versions of the same color.
  • HSV / HSB — hue, saturation and value (brightness), used by most color pickers in design tools.
  • CMYK — cyan, magenta, yellow and key (black) ink percentages used in print.

Example

The sky blue #0EA5E9 is rgb(14, 165, 233), hsl(199, 89%, 48%), hsv(199, 94%, 91%) and roughly cmyk(94%, 29%, 0%, 9%). Its contrast against white is about 2.8:1 — fine for large headings and icons, but too low for body text, which needs 4.5:1. On black it reaches about 7.6:1, comfortably passing.

Tips for working with color

  • Build palettes in HSL. Keep hue and saturation fixed and vary lightness to create consistent button states, backgrounds and borders.
  • Check contrast early. Many brand colors are too light for text on white; use a darker shade from the scale for text and the original for accents.
  • Don't rely on color alone to convey meaning — add icons or labels for people with color vision deficiencies.
  • Expect print to differ. Bright RGB colors, especially vivid blues and greens, often look duller in CMYK.

Working with images too? The Image Converter changes formats between JPG, PNG and WebP. To encode a small image or icon for CSS, use Base64.

Frequently asked questions

How do I convert HEX to RGB?
A HEX color has three pairs of hexadecimal digits for red, green and blue. Convert each pair from base 16 to base 10: in #FF8800, FF = 255, 88 = 136 and 00 = 0, so the color is rgb(255, 136, 0). Three-digit shorthand such as #F80 doubles each digit first.
What is the difference between HSL and HSV (HSB)?
Both describe a color by hue (0–360°) and saturation, but they use a different third value. In HSL, lightness 50% is the pure color, 0% is black and 100% is white. In HSV/HSB, value or brightness 100% is the pure color at full saturation, and 0% is black. Design apps such as Photoshop and Figma often use HSB in their color pickers, while CSS uses HSL.
Is the CMYK conversion accurate for printing?
The CMYK values are a mathematical conversion from RGB, which is useful as a starting point. Real printing depends on the printer, ink and paper, defined by ICC color profiles. For professional print work, convert in your design software using your printer's profile.
What do the contrast ratios mean?
The Web Content Accessibility Guidelines (WCAG) measure contrast between text and background from 1:1 to 21:1. Normal text needs at least 4.5:1 to pass level AA, and large text (about 24 px, or 18.7 px bold) needs 3:1. The checker shows whether the color passes on a white and on a black background.
Which input formats are supported?
HEX with 3, 4, 6 or 8 digits (with or without #), rgb() and rgba(), hsl() and hsla(), hsv() or hsb(), cmyk(), three plain numbers like 255 136 0, and CSS color names such as rebeccapurple. Both comma-separated and modern space-separated syntax work, including alpha like rgb(14 165 233 / 50%).

Related tools

Image ConverterConvert photos and graphics between JPG, PNG, WebP and AVIF — in batches, without uploading.Case ConverterChange text to any letter case — from Title Case to snake_case — and see every format at once.Base64 Encode & DecodeConvert text and files to Base64 and back, with full UTF-8 and Base64URL support.