What is WCAG Contrast Ratio?

WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (18pt+) to ensure readability for visually impaired users.

Can I copy CSS variable formats?

Yes! Simply click any color card or format badge to copy formatted CSS hex, rgb(), hsl(), or CSS custom properties.

Color Picker & Converter

Convert HEX, RGB, HSL and pick perfect colors.

Free No Signup 100% Private No Watermark

#0891B2Choose Color

Adjust HSL Sliders

Hue (H)192°

Saturation (S)91%

Lightness (L)36%

Color Formats (Click to Copy)

HEX#0891B2

RGBrgb(8, 145, 178)

RGBArgba(8, 145, 178, 1)

HSLhsl(192, 91%, 36%)

HSLAhsla(192, 91%, 36%, 1)

CMYKcmyk(96%, 19%, 0%, 30%)

CSS Variable--primary-color: #0891B2;

WCAG Contrast Audit

Test foreground text readability against background

Background:

The quick brown fox

jumps over the lazy dog (14px sample)

Contrast Ratio3.68 : 1

AA Normal Text (≥4.5) Fail

AAA Large Text (≥3.0) Pass

Color Harmonies

Complementary

#AF2A08

Triadic (3 Colors)

#AF088E

#8EAF08

Analogous

#08AF7D

#083AAF

Tints & Shades Scale (10% - 90% Lightness)

More Dev Tools

How to Use Color Picker & Converter in 3 Easy Steps

Fast, local, and completely free with no software installation required.

Select or Drop Your File

Choose or drag-and-drop your file into the secure workspace directly from your device.

Customize Settings & Process

Adjust desired quality, options, or target formatting in real-time with instant browser processing.

Download Your Finished File

Save your optimized, watermark-free result immediately with zero server uploads or tracking.

About Color Picker & Converter

A comprehensive color utility for frontend developers and UI designers. Inspect and convert colors between HEX, RGB, HSL, and CMYK formats, generate harmonic palettes (complementary, triadic, analogous), and audit accessibility contrast ratios under WCAG 2.1 guidelines.

All file conversions, resizing, and processing take place directly in your browser using modern WebAssembly and HTML5 Canvas technologies. No data is stored, tracked, or sent across external networks.