Our HTML Color Code Generator lets you pick and customize colors with HEX, RGB, HSL, and CMYK formats. Easily build gradients with CSS values, explore color harmony, ensure accessibility, and save palettes or gradients for future use.
Click on the color wheel to select a color
Complementary colors are opposite each other on the color wheel. They create high contrast and vibrant looks when used together.
WCAG AA:
Pass
WCAG AAA:
Pass
Preview will appear here
background: linear-gradient(90deg, #3498db, #e74c3c);
Normal Text (≥4.5:1): Pass
Large Text (≥3:1): Pass
UI Components (≥3:1): Pass
Normal Text (≥7:1): Pass
Large Text (≥4.5:1): Pass
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
Hover and active states should maintain sufficient contrast
This is normal body text. Ensure it has sufficient contrast against the background.
Small text requires higher contrast ratios