GhostKitghostkit.dev

Color Suite & Contrast Checker

Media & Design

Convert between HEX, RGB, RGBA, and HSL color formats with an interactive color picker and calculate WCAG 2.1 AA/AAA compliance contrast scores between foreground and background colors.

100% Client-Side
Palette Swatches

Export Code & Conversions

HEX Code#3F45F2
RGB Stringrgb(63, 69, 242)
HSL Stringhsl(238, 87%, 60%)
HSV Stringhsv(238, 74%, 95%)
CSS Variable--custom-color: #3F45F2;
Color Harmonies
Complementary
Analogous
Triadic

WCAG 2.1 Accessibility Contrast Checker

Test foreground text color readability against any background color.

The quick brown fox jumps over the lazy dog.Sample body text rendered with chosen foreground and background.
6.28:1Contrast Ratio
AA Normal Text
AA Large Text
AAA Normal Text
AAA Large Text

Zero-Knowledge Privacy Guarantee

This Color Suite & Contrast Checker executes 100% locally in your browser’s JavaScript memory using client-side Web APIs. No inputs, keys, tokens, files, or outputs are ever uploaded to any server or logged in any database.

Key Features & Capabilities

  • Two-way conversions: HEX ↔ RGB ↔ RGBA ↔ HSL
  • WCAG 2.1 AA and AAA contrast ratio score calculator
  • Complementary, analogous, and monochromatic palette generator
  • 1-click CSS variable export

How to Use This Tool

  1. 1Enter a HEX, RGB, or HSL color or use the visual picker.
  2. 2Copy converted color values for CSS or design tools.
  3. 3Switch to Contrast tab to verify text readability against backgrounds.

Frequently Asked Questions (FAQ)

WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text (AA level) and 7:1 for enhanced accessibility (AAA level).

More in Media & Design

Explore category