Theme Builder

Compare and fine-tune accent and background colors side-by-side. Inspect contrast ratios and color spaces on the fly.

Presets:
Sample A
BG
Sample B
BG
Color Sample A (Left)
HEX:
Contrast vs Workspace Background:
-:1 -
R 0
G 0
B 0
H 0
S 0
L 0
L 0
C 0
H 0

Color Values & Code

Hex #84E12E
RGB rgb(132, 225, 46)
HSL hsl(91, 76%, 53%)
OKLCH oklch(81.2% 0.237 131.6)
Color Sample B (Right)
HEX:
Contrast vs Workspace Background:
-:1 -
R 0
G 0
B 0
H 0
S 0
L 0
L 0
C 0
H 0

Color Values & Code

Hex #CCFF00
RGB rgb(204, 255, 0)
HSL hsl(72, 100%, 50%)
OKLCH oklch(96.9% 0.286 111.4)

Spatial Spectral Analysis

sRGB Euclidean Distance ||V₁ - V₂||₂
- / 441.67 max

Calculates 3D spatial separation between color vectors in RGB space. Larger gaps signify higher physical difference.

Color Similarity Ratio
- proximity

A high spatial proximity (approaching 100%) indicates nearly identical tones. Lower values represent higher visual contrast differences.

Proximity Gauge Moderately Close
0% (OUTER) 50% 100% (IDENTICAL)
Inter-Sample WCAG Contrast L₁ / L₂
-:1 luminance ratio

Calculates compatibility for foreground/background pairings. Ratio needs to exceed 4.5:1 for body copy.

Aa (Sample A) on Sample B FAIL
Bb (Sample B) on Sample A FAIL
CVD Filter Simulation SVG Engine

Applies matrix filters across color cones. Switch conditions to test legibility dynamically.

A
B
Aa Text Bb Text
Normal: Standard RGB spectrum

Symmetric Tone Pairs

Chroma-Preserved Lightness-Adaptive Pairs

Calculates a lightness-inverted twin preserving exact color identity (chroma C + hue H) in OKLCH space. If a color works on a dark background, its twin is its ideal equivalent for a light background (and vice-versa). Formula: L_twin = 100 − L.

Sample A Twin
TWIN PAIRING
Original
#84E12E
Calculated Twin
#000000

Loads this calculated twin color into Sample B to compare contrast and test side-by-side legibility.

Sample B Twin
TWIN PAIRING
Original
#CCFF00
Calculated Twin
#000000

Loads this calculated twin color into Sample A to compare contrast and test side-by-side legibility.

Vibrant Duel Playground

Interactive tools to analyze contrast thresholds, color interpolation, and deficiency simulations.

#84E12E
#CCFF00
50% Panel A Drag divider to adjust proportions 50% Panel B