ZeonTools
How AI Extracts Dominant Colors from Images
When you drag and drop an image into this tool, the color extraction isn't random. We use an advanced K-Means Clustering algorithm running entirely in your browser. This is the exact same mathematical model used by machine learning systems to classify data points.
The algorithm works in three phases: (1) Canvas Sampling: The image is drawn to a hidden HTML5 canvas, and we extract the raw RGBA pixel data. (2) Centroid Initialization: We randomly select 5 "centroid" pixels to represent our 5 color clusters. (3) Iterative Convergence: Every pixel in the image is assigned to its nearest centroid based on 3D Euclidean distance in the RGB color space. The centroids are then recalculated to the average of their assigned pixels. This loop repeats until the 5 most dominant, mathematically distinct color families emerge.
Modern Color Spaces: Why OKLCH is the Future
For decades, developers relied on RGB, HEX, and HSL. Today, OKLCH is the new standard for modern UI development (and the default color space for Tailwind CSS v4).
| Color Space | Mechanism | Pros & Cons |
|---|---|---|
| HEX / RGB | Hardware-based additive light (Red, Green, Blue) | Universally supported, but mathematically impossible for humans to intuitively adjust. |
| HSL | Hue, Saturation, Lightness cylinder | Easy to read, but perceptual lightness is broken (yellow looks much brighter than blue at the same "Lightness" value). |
| Display-P3 | Wide-gamut RGB Apple standard | Allows for 25% more vibrant neon colors that standard sRGB screens cannot physically emit. |
| OKLCH | Lightness, Chroma, Hue (Perceptually Uniform) | The holy grail. 50% lightness in OKLCH looks visually identical across all hues. Essential for accessible design systems. |
The Mathematics of Color Harmony
Our AI Keyword Generator uses trigonometric color wheel mathematics to guarantee aesthetic perfection. Instead of picking colors at random, it hashes your keyword to find a "Base Hue" (from 0° to 360°), and then applies specific harmonic offsets.
| Harmony Type | Math Formula | Psychological Effect |
|---|---|---|
| Analogous | Base Hue ± 30° | Serene, highly cohesive, professional (e.g., Blue, Teal, Green). |
| Complementary | Base Hue + 180° | Maximum visual tension and vibrancy. Perfect for Call-to-Action buttons. |
| Triadic | Base Hue + 120° & 240° | Playful, energetic, high-contrast (e.g., Red, Yellow, Blue). |
| Split-Complementary | Base Hue + 150° & 210° | High contrast without the aggressive tension of pure complementary. |
WCAG 2.1 Accessibility & The Law
The Web Content Accessibility Guidelines (WCAG) dictate how much contrast must exist between text and its background. In many countries (including the US under the ADA, and the EU under the European Accessibility Act), failing these contrast ratios can lead to crippling lawsuits.
- Level AA (Required): Demands a contrast ratio of 4.5:1 for normal text, and 3.0:1 for large text (18pt+).
- Level AAA (Gold Standard): Demands a contrast ratio of 7.0:1 for normal text, and 4.5:1 for large text. This ensures readability for users with severe vision loss.
Designing for Color Blindness (CVD)
Over 300 million people worldwide have some form of Color Vision Deficiency (CVD). This tool includes a built-in SVG-matrix vision simulator so you can immediately see how your generated palette appears to visually impaired users.
| Condition | Prevalence | Visual Effect | Design Mitigation |
|---|---|---|---|
| Protanopia | 1% of Males | Red-blind. Reds look dark gray/black. | Never rely solely on Red=Bad / Green=Good. Add icons (X / Check). |
| Deuteranopia | 5% of Males | Green-blind. Red and Green look identical (brownish). | Use distinct lightness values. Ensure your "danger" red is much darker than your "success" green. |
| Tritanopia | Rare | Blue-blind. Blue and Yellow confuse with Red and Green. | Rely heavily on high contrast ratios (WCAG AAA) across the board. |
Exporting to Design Tokens (Tailwind & CSS)
Hardcoding hex values into your CSS is a lethal anti-pattern in modern development. To maintain dark modes and multi-brand themes, you must use Design Tokens. This tool instantly compiles your palette into production-ready CSS variables and Tailwind Config formats.
Instead of writing color: #ec4899;, you write color: var(--color-accent);. When the user toggles dark mode, or when your company rebrands, you only change the root variable. The token architecture provided in our export tab follows the industry standard semantic naming convention: Background, Surface, Primary, Secondary, Accent.