Color Converter & Contrast Checker

Converters

Convert colors between HEX, RGB, HSL, HSV, CMYK, and HWB with WCAG accessibility contrast scores and harmony palettes.

#3b82f6

Nearest Match:Dodger Blue

Pick or Enter HEX Color

Quick Swatches:

HEX Code

#3b82f6

RGB String

rgb(59, 130, 246)

RGBA String

rgba(59, 130, 246, 1)

HSL Color

hsl(217, 91%, 60%)

HSV / HSB

hsv(217, 76%, 96%)

CMYK Print

cmyk(76%, 47%, 0%, 4%)

HWB Color

hwb(217deg 23% 4%)

Tailwind Arbitrary

bg-[#3b82f6]

CSS Property

color: #3b82f6;

WCAG 2.1 Accessibility Contrast Checker

Against White (#FFFFFF)3.68 : 1

Sample Text on Color

Normal AA FAIL

Large AA PASS

Normal AAA FAIL

Against Dark (#000000)5.71 : 1

Sample Text on Color

Normal AA PASS

Large AA PASS

Normal AAA FAIL

Color Harmony Palettes

Complementary

Analogous

Triadic

Tetradic

Lightness Tint & Shade Scale

Client-Side Privacy Guarantee

100% Private & Client-Side: Color calculations and WCAG checks execute locally in your browser memory.

What is this?

An essential color utility for designers and web developers. Convert color values seamlessly between HEX, RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, and HWB formats. Inspect WCAG 2.1 accessibility contrast compliance against dark and light text, and generate monochromatic, complementary, and triadic color harmony palettes.

Key Features & Concepts

Universal Color Conversions: Instant conversion across HEX, RGB, RGBA, HSL, HSLA, HSV, HSB, CMYK, and HWB
Visual Color Picker: Interactive browser color picker with alpha transparency slider
WCAG 2.1 Accessibility Evaluator: Real-time contrast ratio score against white and black backgrounds with AA / AAA pass/fail indicators
Color Palette Harmonies: Automatically generates Complementary, Analogous, Triadic, Tetradic, and Monochromatic color palettes
Shades & Tints Scale: Generates 10-step lighter tint and darker shade scales for CSS design systems
CSS & Tailwind Exports: One-click copying for CSS declarations (`color: #ff5733`), RGB/HSL values, and Tailwind arbitrary class names (`bg-[#ff5733]`)
Nearest Named Color Match: Identifies the closest standard HTML/CSS color keyword name
100% Client-Side Calculations: Instant color math with zero network requests

How to Use

Use the visual color picker or paste any HEX, RGB, HSL, or CMYK color string into the input box.
View instant conversion values across all standard web and print color formats.
Check the WCAG Accessibility panel to verify text legibility contrast ratios against light and dark backgrounds.
Explore generated color harmony palettes and shade scales for design system palettes.
Click any copy button to grab CSS codes or Tailwind class names.

Common Use Cases

UI/UX Designers establishing accessible color systems and WCAG compliant palettes
Frontend Developers converting Figma/Design spec colors into CSS or Tailwind classes
Print Designers checking RGB to CMYK color translation approximations

Practical Examples

Converting design mock HEX `#3B82F6` to CSS `rgb(59, 130, 246)` or `hsl(217, 91%, 60%)`
Verifying button background contrast against white text for WCAG 2.1 AA compliance (ratio >= 4.5:1)
Building a 10-step UI shade scale for custom Tailwind themes

Limitations & Technical Notes

CMYK conversions are mathematical sRGB approximations. Print production may require ICC color profile calibration.

Frequently Asked Questions

What is WCAG AA and AAA contrast compliance?

WCAG 2.1 guidelines require a minimum contrast ratio of 4.5:1 for standard body text (AA rating) and 7:1 for enhanced contrast (AAA rating). Large text requires at least 3:1.

How does HSL differ from RGB?

RGB defines colors by Red, Green, and Blue light intensity (0-255). HSL defines colors by Hue (color wheel angle 0-360°), Saturation (0-100%), and Lightness (0-100%), making it much more intuitive for adjusting color variations.

Related Developer Tools

URL Encoder & Decoder

Encode special characters into percent-encoded URI strings and parse URL query parameters.

QR Code Generator

Generate customizable, high-resolution QR codes for URLs, Wi-Fi networks, text, contacts, and emails with PNG/SVG export.

CSS Gradient Generator

Design linear, radial, and conic CSS gradients with multi-stop color controls, presets, and Tailwind export.

CSS Box Shadow Generator

Build multi-layered, smooth CSS box shadows with live card preview, presets, and Tailwind CSS code export.