Color Engine (CMYK • HEX • RGBA)

Plug in your brand values in any format. Bidirectional sync updates print CMYK, digital HEX, and RGBA in real-time.

Color A (Background)
#FFFFFF
cmyk(0%, 0%, 0%, 0%)
rgb(255, 255, 255)
#
Cyan (C)
%
Magenta (M)
%
Yellow (Y)
%
Black (K)
%
Red
Green
Blue
Alpha
Color B (Foreground / Text / Accent)
#0072B2
cmyk(100%, 36%, 0%, 30%)
rgb(0, 114, 178)
#
Cyan (C)
%
Magenta (M)
%
Yellow (Y)
%
Black (K)
%
Red
Green
Blue
Alpha
Curated Accessible & Problematic Presets:
Enhanced (AAA)
11.42 : 1
Normal Vision • Under Deuteranomaly: 8.35:1

WCAG 2.1 & Colorblind Compliance Matrix

Standard ISO/IEC 40500
💡 Contrast Insight: Colorblind vision often reduces the perceptual luminance gap between specific hues (especially red-green and blue-yellow pairs), turning passing text combinations into severe legibility failures.

Interactive Side-by-Side Split View

Drag the center curtain left or right to compare Normal Vision against the Simulated Colorblind View in real-time.

Normal Vision Simulated Vision
⇄

Simultaneous 8-Deficiency Matrix

Inspect how your Color A and Color B mutate across every clinical classification of color vision deficiency, with simulated CMYK and HEX values.

Digital Product & Component Playground

See why relying solely on color (e.g. Red vs. Green) creates usability traps in alerts, buttons, metrics, and data visualizations.

1. Alert Banners & Notification States Color-Only Hazard
✓ Success: Payment captured successfully.
⚠ Error: Billing authentication failed.

In deuteranopia/protanopia, red and green alert backgrounds shift to identical olive-brown hues. Always include distinct iconography (✓ vs ✕) and clear text prefixes.

2. Action Buttons with Dynamic Input Colors Your Custom Colors
Dynamic Surface Card
Testing foreground text against background container surface.
3. Data Trends & Status Dots KPIs
Conversion Rate
+14.8% ▲
Churn Rate
-5.2% ▼

Pairing colors with arrows (▲ / ▼) ensures that viewers with color vision deficiency still perceive directionality effortlessly.

Data Visualization Palette Confusion Tester

Test a multi-color chart palette to find out which data series collide and become indistinguishable under the active colorblindness filter.

Normal Vision (Click any swatch to load into Foreground Inspector):
Simulated Perceived Palette Under Selected Deficiency:

Image Simulation & Ishihara Plate Tester

Upload your own design mockups or test with the built-in Ishihara Plate #8 simulation. Click anywhere on the image with the eyedropper to inspect its CMYK, HEX, and RGBA values!

Click or Drag & Drop any image here (.png, .jpg, .webp, .svg)

All processing runs 100% locally in your browser for privacy.

🎯 Eyedropper Tip: Click any pixel on the image canvas above to immediately load its exact CMYK, HEX, and RGBA color into the inspector.