The Standard of Color Intelligence
The Anatomy of Color & Color Intelligence
ColourIntell is a global color intelligence platform for designers, developers, and brands. Explore color theory, WCAG 2.2 contrast ratios, palettes, and optical conversions.
01 / Fundamentals
What is Color? The Physics & Biology of Vision
At its physical essence, color is not an inherent property of objects, but rather the perceptual interpretation of electromagnetic radiation within the narrow visible spectrum spanning wavelengths from 380 nanometers (violet) to 750 nanometers (deep red).
Human vision is trichromatic: our retinas house three distinct photoreceptor cone types—Short (S, peak ~420nm), Medium (M, peak ~530nm), and Long (L, peak ~560nm). When illuminated light reflects off a physical surface or emits from a screen, these cone cells stimulate neural pathways decoded by the visual cortex into hue, saturation, and lightness.
02 / Methodology
What is Color Intelligence?
Color Intelligence represents the convergence of optical physics, cognitive psychology, W3C accessibility math, and programmatic generative design systems. Historically, color selection in digital software was purely subjective—relying on artist intuition or arbitrary hex pickers.
In production web applications, intuition alone results in catastrophic failure modes: unreadable text, failed legal compliance audits, inconsistent brand scaling, and cognitive disorientation across dark and light modes.
What ColourIntell.com Does in Detail
ColourIntell.com is a global, zero-friction color intelligence operating system engineered for creators, engineers, video colorists, architects, and industrial manufacturers. It operates directly inside the browser with zero account gates, combining photometric physics with automated design intelligence:
Multi-Space Engine
Instant bi-directional mathematical conversions across HEX, RGB, HSL, HSV, CMYK, OKLCH, CIE XYZ, and CIE Lab with sRGB gamma linearization and D65 white-point calibration.
WCAG 2.2 Compliance Lab
Real-time photometric contrast calculator verifying 4.5:1 (Level AA), 3.0:1 (Large UI/Components), and 7.0:1 (Level AAA) using W3C relative luminance equations.
Harmonic Geometry
Algorithmic geometric color-wheel calculation of Complementary (180°), Analogous (±30°), Triadic (120°), Split-Complementary (150°/210°), and Tetradic (90°) relationships.
Perceptual Scales (50–950)
Production-grade 11-step tonal ramp generator engineered in OKLCH perceptual color space to preserve human optical lightness steps without muddying chroma or shifting hue.
Ask ColourIntell AI Agent
Natural language generative color intelligence powered by Gemini, translating conceptual queries into cohesive palettes with live UI mockups.
Cognitive Perception Games
Interactive optical calibration suite featuring Spot the Odd Hue (acuity training), Hex Code Guesser (memory calibration), and WCAG Reflex (accessibility intuition).
Multi-Framework Exports
Instant one-click exports for CSS Custom Properties (:root), Tailwind CSS configuration objects, Figma Design Tokens (JSON), and CMYK print specifications.
100% Client-Side Privacy
Image palette extraction and color quantization execute 100% locally inside client HTML5 Canvas. Zero photos, pixels, personal data, or tracking telemetry ever leave your machine.
Frequently Asked Questions
What is ColourIntell and who is it designed for?
ColourIntell is a global color intelligence platform created for UI/UX designers, web developers, design system architects, and brand creators. It combines scientific color space conversions (HEX, RGB, HSL, HSV, CMYK, OKLCH, CIE XYZ, CIE Lab) with WCAG 2.2 accessibility verification, automated harmonic palette generators, and instant developer code exports.
How does ColourIntell calculate WCAG 2.2 color contrast ratios?
ColourIntell calculates contrast ratios using the official W3C relative luminance equation: (L1 + 0.05) / (L2 + 0.05). Relative luminance is determined by linearizing sRGB values through gamma expansion and applying human spectral sensitivity weighting (0.2126R + 0.7152G + 0.0722B). Ratios of at least 4.5:1 meet AA for normal body text, 3.0:1 meet AA for large text and UI components, and 7.0:1 achieve Level AAA conformance.
What is the difference between HEX, RGB, HSL, and OKLCH?
HEX and RGB are screen-level additive color encodings representing red, green, and blue light channels. HSL is an intuitive cylindrical representation (Hue, Saturation, Lightness), but is not perceptually uniform. OKLCH is a modern perceptual color model developed by Björn Ottosson that aligns lightness with human visual sensitivity, making it the premier choice for accessible UI design systems.
Is image palette extraction private and secure?
Yes, 100% private. All color extraction and quantization runs locally on your device via client-side HTML5 Canvas and JavaScript. Your photos, screenshots, and artwork are never transmitted to any external server or saved in a remote database.
How are geometric color harmonies calculated?
Harmonies are determined by mathematical angular relationships on the 360-degree color wheel: Complementary (180° opposite), Analogous (±30° neighbors), Triadic (120° equilateral intervals), Split-Complementary (150° and 210°), and Tetradic (90° rectangular intervals).
Can I use ColourIntell tokens and palettes in commercial products?
Yes. All CSS variables, Tailwind configuration snippets, Material tokens, and JSON design tokens generated on ColourIntell are completely open and free for personal and commercial applications without attribution or licensing restrictions.