HelpCalc

Color Converter

Convert between HEX, RGB, HSL, HSV, and CMYK, and check WCAG contrast ratios.

Color
Use the picker or edit any format below—values stay in sync when you leave a field (Tab, click away, or Enter).
WCAG Contrast
Check foreground against a background color.

Sample text

Large sample

3.15:1

Contrast ratio

Normal text
AA (4.5:1): FailAAA (7:1): Fail
Large text
AA (3:1): PassAAA (4.5:1): Fail
Channel Breakdown
R / G / B
255 / 87 / 51
H / S / L
11, 100%, 60%
H / S / V
11, 80%, 100%
C / M / Y / K
0%, 66%, 80%, 0%

About the Color Converter

This tool converts between the most common color formats used in web and design work: HEX, RGB, HSL, HSV (also known as HSB), and CMYK. Use the color picker or edit any supported format—when you finish editing a field, every other representation updates to match. A built-in WCAG contrast checker helps you pick foreground and background pairs that meet accessibility requirements.

How to Use

  1. Choose a color with the picker, or edit HEX, RGB, HSL, HSV, or CMYK (e.g. #ff5733, rgb(255,87,51), or hsl(11, 100%, 60%)). Press Tab, click outside the field, or press Enter to apply your edit and refresh the other formats.
  2. Use the Copy buttons to put any format on your clipboard.
  3. Set a background color to see the WCAG contrast ratio and whether the pair meets AA or AAA for normal and large text.

Color Format Primer

  • HEX: A six- (or eight-) digit hexadecimal string, one pair per channel. Commonly used in CSS and design tools.
  • RGB: Red, Green, Blue on a 0–255 scale. Matches how displays emit light.
  • HSL: Hue (0–360°), Saturation, Lightness. Intuitive for tinting and shading.
  • HSV / HSB: Hue, Saturation, Value/Brightness. Popular in graphics software (Photoshop, Figma) because it mirrors how a color picker works.
  • CMYK: Cyan, Magenta, Yellow, Key/Black. Used for print output.

WCAG Contrast

The Web Content Accessibility Guidelines (WCAG) define a contrast ratio between foreground and background. The minimum recommended ratios are:

  • AA normal text: 4.5:1
  • AA large text: 3:1
  • AAA normal text: 7:1
  • AAA large text: 4.5:1

Frequently Asked Questions

What is the difference between RGB and HSL?

RGB describes a color by how much red, green, and blue light is mixed to produce it — useful for screens but not intuitive to adjust manually. HSL describes the same color via its hue, saturation, and lightness, which maps more closely to how humans reason about color, making it easier to create tints, shades, and related palettes.

What is a WCAG contrast ratio?

The contrast ratio compares the relative luminance of two colors. It ranges from 1:1 (identical) to 21:1 (black on white). WCAG 2.x recommends at least 4.5:1 for normal body text and 3:1 for large text to keep content legible for users with low vision.

How do I convert HEX to RGB in JavaScript?

Strip the leading hash, then parse each two-character segment with parseInt(segment, 16) to get values between 0 and 255. For a three-character shorthand like #f00, duplicate each digit first (ff00 00).

Which format should I use in CSS?

HEX is the most common and compact. RGB/RGBA is useful when you need alpha transparency. HSL/HSLA is ideal when you plan to tweak lightness or hue programmatically (for example, generating hover states or theme variants).

Note: Conversions are mathematically exact within integer precision; repeated round-trips may vary by one unit per channel due to rounding. CMYK output is an uncalibrated mathematical mapping and does not represent a specific print profile.