Skip to content
BrowserUtil

Color Converter

Convert colors between HEX, RGB, HSL, HSV, and CMYK with WCAG contrast and palette generator.

#2563EB100% Alpha
Opacity100%
RGB Channels
R37
G99
B235
Preset Colors

Color Formats

HEX
#2563EB
HEXA (with Alpha)
#2563EBFF
RGB
rgb(37, 99, 235)
RGBA
rgba(37, 99, 235, 1)
HSL
hsl(221, 83%, 53%)
HSLA
hsla(221, 83%, 53%, 1)
HSV / HSB
hsv(221, 84%, 92%)
CMYK (Print)
cmyk(84%, 58%, 0%, 8%)

Tints & Shades Palette

Tints (Lighter)
Shades (Darker)

WCAG 2.1 Contrast Ratio

Contrast vs White (#FFFFFF)5.17:1
The quick brown fox jumps over the lazy dog
AA (≥4.5) ✓ Pass AAA (≥7.0) ✕ Fail
Contrast vs Black (#000000)4.06:1
The quick brown fox jumps over the lazy dog
AA (≥4.5) ✕ Fail AAA (≥7.0) ✕ Fail

How to use

  1. 1 Pick a color using the visual picker or enter any HEX, RGB, HSL, or CSS color name.
  2. 2 Adjust the opacity slider or fine-tune individual RGB channels.
  3. 3 Copy the color in HEX, RGB, HSL, HSV, or CMYK format with one click.
  4. 4 Review the WCAG 2.1 contrast ratio for accessibility compliance and explore lighter/darker shades.

Features

  • Real-time conversion across HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV, and CMYK
  • Native color picker with alpha transparency checkerboard preview
  • Direct support for standard CSS named colors (e.g. coral, crimson, steelblue)
  • WCAG 2.1 contrast checker with AA and AAA rating badges for white and black backgrounds
  • 10-step palette generator for tints (lighter) and shades (darker)
  • Interactive RGB channel sliders with live updates
  • 100% client-side calculation without server round-trips

Frequently asked questions

What is the difference between RGB, HSL, and HSV?

RGB represents colors through red, green, and blue light intensity (how screens emit light). HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) model color in a way that aligns closer with human perception and design workflows.

What do the WCAG AA and AAA contrast ratings mean?

WCAG 2.1 guidelines require a minimum contrast ratio of 4.5:1 for normal text (Level AA) and 7:1 for enhanced accessibility (Level AAA). For large text (18pt+), the requirement is 3:1 for AA and 4.5:1 for AAA.

Does the tool support alpha transparency?

Yes. You can adjust the opacity slider or input 8-digit HEXA (#RRGGBBAA) or rgba() values. All formats update to reflect the transparency.

Related tools