HEX
#818cf8
RGB
rgb(129, 140, 248)
HSL
hsl(234, 89%, 74%)
Color Palettes
Complementary
Analogous
Triadic
WCAG Accessibility Contrast
White Text
on background
2.14:1
FAIL
Black Text
on background
9.81:1
PASS (AAA)
Color Formats Explained
Understanding different color formats is crucial for web design and development. Here are the most common ones:
- HEX: Hexadecimal color codes start with a hash (
#) followed by 3 or 6 characters (0-9 and A-F). They represent Red, Green, and Blue values. Example:#818cf8. - RGB: Stands for Red, Green, Blue. Values range from 0 to 255. Example:
rgb(129, 140, 248). - HSL: Stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0-360), while saturation and lightness are percentages. It's often more intuitive for humans to manipulate. Example:
hsl(234, 89%, 74%).
Color Theory & Palettes
Creating harmonious color schemes relies on color theory. Our generator automatically calculates these standard palettes based on your selected base color:
- Complementary: Colors opposite each other on the color wheel. They create high contrast and vibrant looks.
- Analogous: Colors next to each other on the color wheel. They are serene, comfortable, and often found in nature.
- Triadic: Three colors that are evenly spaced around the color wheel, offering strong visual contrast while retaining harmony.
WCAG Contrast & Accessibility
The Web Content Accessibility Guidelines (WCAG) ensure digital content is accessible to everyone, including users with visual impairments. A key metric is the contrast ratio between text and its background.
WCAG 2.1 requires the following minimum contrast ratios:
- AA Level: Minimum 4.5:1 for normal text, and 3.1:1 for large text (usually 18pt or 14pt bold).
- AAA Level: Minimum 7.0:1 for normal text, and 4.5:1 for large text.
Our contrast checker instantly compares your selected color against pure white (#FFFFFF) and pure black (#000000) to help you choose readable combinations.