Savvy Goose
Character Counter Text & Writing
Case Converter Text & Writing
Diff Viewer Text & Writing
Markdown Converter Text & Writing
Percentage Calculator Numbers & Time
Unit Converter Numbers & Time
Timestamp Converter Numbers & Time
Time Between Dates Numbers & Time
Barcode Generator Generators
QR Code Generator Generators
Base64 Encoder Data & Encoding
URL Encoder Data & Encoding
JWT Decoder Data & Encoding
Hash Generator Data & Encoding
Color Converter Data & Encoding
JSON Formatter Data & Encoding
Format Converter Data & Encoding
Regex Tester Data & Encoding
Browser Info Data & Encoding
Password Generator Generators
UUID Generator Generators
Image Resizer Generators
Slug Generator Generators
Lorem Ipsum Generators
No results found
Buy me a coffee
Savvy Goose

Color Converter

HEX ↔ RGB ↔ HSL with a live swatch and contrast checker.

Foreground
HEX
RGB
HSL
CSS rgb()
CSS hsl()
Background
HEX
RGB
HSL
CSS rgb()
CSS hsl()
Contrast
WCAG contrast ratios

Compares relative luminance of two colors. Higher is more legible.

ratio = (L1 + 0.05) ÷ (L2 + 0.05)

  • AA · Normal: at least 4.5:1.
  • AA · Large: at least 3:1 (≥ 18px bold or 24px regular).
  • AAA · Normal: at least 7:1.
  • AAA · Large: at least 4.5:1.

Pure white on pure black is 21:1, the maximum.
Sample small text, 14px regular Sample large text, 20px bold
Contrast ratio
Pass
AA · Normal
Pass
AA · Large
Pass
AAA · Normal
Pass
AAA · Large
Share
The URL below carries both colors so you can link straight to this combination.

Some inputs are too long to fit in the URL.

Share URL

How to use the Color Converter

  1. Enter a color in any format: HEX, RGB, or HSL.
  2. The equivalents in the other formats appear alongside.
  3. Pair two colors to see the WCAG contrast ratio.

Frequently asked questions

How is contrast measured?
Using the WCAG 2.1 luminance ratio formula. Pass/fail thresholds for AA and AAA at normal and large text are shown.

Made for free with

Open source — PRs welcome Buy me a coffee