Choosing cohesive brand colors and accessible UI theme tokens is fundamental to great digital design. OmniTool Hub generates mathematically balanced color palettes based on classic optical harmony formulas, while calculating real-time WCAG AA and AAA contrast compliance scores for accessible readability.
Key Property Parameters & Specifications
| Harmony Rule | Degree Offset on Wheel | Psychological Mood / Usage |
|---|---|---|
| Complementary | Opposite angle (+180°) | High energy, vibrant contrast; great for call-to-action buttons |
| Analogous | Adjacent angles (±30°) | Harmonious, serene, and calming; common in natural UI themes |
| Triadic | Three equidistant angles (0°, 120°, 240°) | Balanced, rich palette; offers diverse UI status colors |
| Split-Complementary | Base + two adjacent opposites (0°, 150°, 210°) | Strong contrast with less tension than pure complementary |
Implementation Guide & Technical Reference
WCAG 2.1 Luminance Contrast Calculation Formula
function getLuminance(r, g, b) {
const [rs, gs, bs] = [r, g, b].map(c => {
c /= 255;
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
});
return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}
const ratio = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);Standard W3C relative luminance ratio.
Frequently Asked Questions (FAQ)
What is a WCAG AA compliant contrast ratio?
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for regular text and at least 3:1 for large text (18pt+ or 14pt bold).
Can I lock individual colors while randomizing others?
Yes. Click the padlock icon on any color swatch to freeze it while generating complementary matching shades.
What formats can I export my palette in?
You can export in HEX, RGB, HSL, CSS Variables (`--color-primary`), Tailwind config, or PNG swatch image.
Does this tool work completely offline?
Yes. All HSL/RGB math and contrast calculations execute 100% locally in your browser.