Hex Color Validator & WCAG Contrast Checker
Validate hex codes, convert between HEX/RGB/HSL/CMYK, check WCAG AA/AAA contrast ratios, and generate color palettes — all in real time, 100% in your browser.
🎨 Color Input & Validation
Enter a hex color code to validate
↔ Color Format Conversions
Enter a valid hex code above to see conversions.
◑ WCAG Contrast Checker
Foreground (Text)
Background
Live Preview
The quick brown fox jumps over the lazy dog — normal text (16px)
Large Text Example (24px bold)
Button Component
—
Contrast Ratio
Enter colors above
🎨 Color Palette Suggestions
Enter a valid hex code in Section 1 to generate palettes.
Related Tools
Color Contrast Checker
Full WCAG accessibility checker with recommendations
Color Palette Generator
Generate beautiful color palettes from any base color
CSS Grid Generator
Visual CSS grid layout builder with live preview
CSS Minifier
Minify and compress CSS for production
Hash Generator
MD5, SHA-1, SHA-256 and more hash functions
? Frequently Asked Questions
A valid hex color code is a string representing a color using hexadecimal notation. It can be 3 digits (#RGB), 6 digits (#RRGGBB), or 8 digits (#RRGGBBAA for transparency). Each pair of digits represents the Red, Green, and Blue channels from 00 (0) to FF (255). The # prefix is optional in most validators. Example: #FF5733 is a vivid orange-red.
WCAG (Web Content Accessibility Guidelines) contrast ratio measures the luminance difference between two colors. It ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white). The ratio is calculated as (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's relative luminance and L2 is the darker color's relative luminance.
WCAG 2.1 defines two conformance levels. AA (minimum level) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). AAA (enhanced level) requires 7:1 for normal text and 4.5:1 for large text. AA compliance is the legal standard in many jurisdictions; AAA is recommended for maximum accessibility.
To convert hex to RGB, split the 6-digit hex code into three pairs: the first pair is Red, second is Green, third is Blue. Convert each pair from hexadecimal to decimal. For example, #FF8000: FF = 255 (red), 80 = 128 (green), 00 = 0 (blue), giving rgb(255, 128, 0). For 3-digit shorthand, expand each digit: #F80 becomes #FF8800.
HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel from 0 to 360 (0=red, 120=green, 240=blue). Saturation is a percentage (0% is grayscale, 100% is full color). Lightness is a percentage (0% is black, 50% is normal, 100% is white). HSL is more intuitive for humans than RGB because it separates the color type from its intensity.
CMYK stands for Cyan, Magenta, Yellow, and Key (Black). It is a subtractive color model used in color printing. Unlike RGB (which adds light), CMYK subtracts light by absorbing colors. Web screens use RGB, but if you need to send colors to a printer or design for print, you will need CMYK values. The conversion from RGB to CMYK is: K = 1 − max(R,G,B)/255; C = (1 − R/255 − K) / (1 − K); M and Y follow the same pattern.
Complementary colors are calculated by rotating the hue value by 180 degrees in HSL color space. For example, if a color has a hue of 30 degrees (orange), its complement is at 210 degrees (blue). Analogous colors are at ±30 degrees, triadic at ±120 degrees, and split-complementary at ±150 degrees from the original hue. This is why color theory is best expressed in HSL format.