Hex color codes are the universal language of digital color — used in CSS, design tools, and graphics software. A hex code like #3B82F6 encodes the red, green, and blue channels as two-digit hexadecimal values (0-255 each). This checker validates hex codes, shows a live preview, converts to RGB/HSL/CMYK, calculates WCAG contrast ratios, and generates harmonious color palettes.
How to Use the Hex Color Checker
Enter a hex color code with or without the # prefix:
- Live preview — see the exact color rendered
- Format conversions — HEX, RGB, HSL, and CMYK values
- Contrast ratios — WCAG AA/AAA compliance against black and white
- Palette — complementary, analogous, and triadic colors
Also accepts RGB (rgb(59,130,246)) and HSL (hsl(217,91%,60%)) inputs.
Understanding Hex Color Format
A hex color code uses base-16 notation:
- #RGB — shorthand (e.g., #F00 = #FF0000 = red)
- #RRGGBB — standard 6-digit format
- #RRGGBBAA — 8-digit with alpha transparency
Each pair ranges from 00 (0) to FF (255). The channels are Red, Green, Blue in that order.
Color Contrast & Accessibility
WCAG 2.1 defines minimum contrast ratios for accessibility:
- AA Normal text: 4.5:1 contrast ratio
- AA Large text: 3:1 contrast ratio
- AAA Normal text: 7:1 contrast ratio
This tool calculates the relative luminance and contrast ratio against both white and black backgrounds.
Step-by-Step Instructions
- 1Enter a hex color code (e.g., #3B82F6 or 3B82F6).
- 2View the live color preview swatch.
- 3Check RGB, HSL, and CMYK conversion values.
- 4Review WCAG contrast ratios for accessibility compliance.
- 5Explore the generated color palette for harmonious combinations.