What contrast ratio does WCAG 2.1 AA require?

WCAG AA requires at least 4.5:1 for normal body text and 3.0:1 for large headings (18pt+ or 14pt bold+) and UI borders.

Why use HSL over HEX in CSS design systems?

HSL separates Hue, Saturation, and Lightness, making it effortless to derive hover states and dark-mode shades systematically.

Does this support 3-digit shorthand HEX codes like #F0A?

Yes, both 3-digit and 6-digit HEX codes are parsed and normalized cleanly.

Can I check dark mode contrast quickly?

Yes—click the preset Dark Slate (#0F172A) background chip to verify how accent colors perform in dark mode.

Converters100% Client-Side4.8 (465 ratings)

Color Picker & Converter (HEX / RGB / HSL)

Crafted for UI designers and frontend engineers building accessible design tokens and checking WCAG AA/AAA text contrast.

Foreground / Accent Color

Comparison Background (WCAG Test)

Sample Accessible Text Preview

The quick brown fox jumps over the lazy dog.

6.29:1 ContrastWCAG AA: PassAAA: Fail

HEX

#4F46E5

RGB

rgb(79, 70, 229)

HSL

hsl(243, 75%, 59%)

How to Use Color Picker & Converter (HEX / RGB / HSL)

1Pick a foreground color visually or type a HEX (#4F46E5), RGB, or HSL value.
2Choose a comparison background color to test real WCAG 2.1 contrast ratio.
3Copy ready-to-paste CSS HEX, rgb(), or hsl() strings.
4Check AA (4.5:1) and AAA (7:1) pass badges for normal and large text.

Key Features

Bidirectional HEX, RGB, and HSL parsing & conversion
Built-in WCAG 2.1 relative luminance contrast calculator
Curated Tailwind-inspired accessible swatch presets
One-click CSS token clipboard copy

Designing Accessible Color Systems Across Light and Dark Themes

An accent color that looks crisp on a pure white card frequently fails accessibility contrast on a dark navy surface. Checking relative luminance early prevents painful design-system rewrites later.

ToolCix combines bidirectional HEX, RGB, and HSL conversion with a live WCAG 2.1 contrast meter so engineers and designers share exact CSS values and accessibility verification in one screen.

Translating Design Tokens Into CSS Custom Properties

Copy normalized HEX or HSL variables directly into Tailwind v4 `@theme` blocks or CSS stylesheets and keep brand accents consistent across every interactive component.