Colorby codefrydev

Design System Live Preview

Interactive UI components running on dynamic CSS tokens.

Monthly Revenue+14.2%
$48,250
Active UsersReal-time
12,480
Cluster Load42%
42% Capacity
PaidPendingOverdueReview
Explore 5 Production-Grade Real-World TemplatesSaaS Analytics, E-Commerce Store, Developer Docs, Marketing Landing Page, and Mobile Shell.

Harmonic Palette Scales

50-950 luminance curves. Click any swatch to copy value in HEX.

OKLCH mode
Primary Scale
Accent Scale
Secondary Scale
Neutral Scale
Semantic Feedback Scales
Success
Warning
Danger
Info

Accessibility & Perception Studio

WCAG 2.2 contrast compliance, APCA ratings, and Machado color-blindness simulation.

10/10 Pass (AA)
Key Interface Contrast Ratios
Aa
Primary text on app background
--text-primary on --bg-app
14.21:1
APCA Lc 100
AAA ✓
Aa
Primary text on surface card
--text-primary on --bg-surface
15.20:1
APCA Lc 105
AAA ✓
Aa
Secondary text on surface
--text-secondary on --bg-surface
4.83:1
APCA Lc 76
AA ✓
Aa
Muted helper text on surface
--text-muted on --bg-surface
4.83:1
APCA Lc 76
AA ✓
Aa
Primary button label
--btn-primary-text on --btn-primary-bg
5.08:1
APCA Lc -83
AA ✓
Aa
Accent button label
--accent-text on --accent-bg
7.97:1
APCA Lc -95
AAA ✓
Aa
Success badge text
--success-text on --success-bg
11.90:1
APCA Lc 91
AAA ✓
Aa
Warning badge text
--warning-text on --warning-bg
12.63:1
APCA Lc 91
AAA ✓
Aa
Danger alert text
--danger-text on --danger-bg
12.14:1
APCA Lc 87
AAA ✓
Aa
Interactive Link text
--link on --bg-surface
11.30:1
APCA Lc 99
AAA ✓
Color Vision Deficiency Simulation
Normal vision1 confusable
Primary ≈ Warning
Protanopia6 confusable
Primary ≈ Secondary · Primary ≈ Success · Primary ≈ Warning · Secondary ≈ Success · Secondary ≈ Warning · Success ≈ Warning
Deuteranopia10 confusable
Primary ≈ Secondary · Primary ≈ Success · Primary ≈ Warning · Primary ≈ Danger · Secondary ≈ Success · Secondary ≈ Warning · Secondary ≈ Danger · Success ≈ Warning · Success ≈ Danger · Warning ≈ Danger
Tritanopia1 confusable
Primary ≈ Warning
Achromatopsia15 confusable
Primary ≈ Accent · Primary ≈ Secondary · Primary ≈ Success · Primary ≈ Warning · Primary ≈ Danger · Accent ≈ Secondary · Accent ≈ Success · Accent ≈ Warning · Accent ≈ Danger · Secondary ≈ Success · Secondary ≈ Warning · Secondary ≈ Danger · Success ≈ Warning · Success ≈ Danger · Warning ≈ Danger

Harmonic Tuning & Bias

Saturation Boost1.00×
Multiplies saturation across all generated scales
Accent Hue Rotation-2°
Fine-rotates accent hues around the geometric harmony angle
Neutral Brand Tint15%
Controls how much primary brand color leaks into greys
Neutral Hue Offset-26°
Warm-shift or cool-shift greys relative to primary
Status Colors Brand Pull15%
Pulls success, warning, danger, and info towards brand hue

Design Tokens (Radius & Shadows)

Border Radius Multiplier1.0×
Corner roundness from sharp/brutalist to pill/organic
Spacing Multiplier1.00×
Card padding, button insets, and grid gaps
Elevation Shadow Intensity1.0×
Layered multi-stop box shadows with ambient brand tinting
Typography Scale Factor1.00×
Font size progression across headings and body text
Line Height Rhythm1.45
Reading rhythm and paragraph vertical spacing

Derivation Engine Pipeline

Step-by-step mathematical translation from base hue to full design system tokens.

1Input Analysis
HEX Code#8C6900
RGB Values138, 103, 0
PsychologyWarm, friendly, optimistic
Temperaturewarm
2Harmony Derivation
ModeSPLIT
Primary Hue45°
Accent Hue193°
ΔE (P↔A)103.9 (Perceptual)
3Scale Synthesis
Saturation Floor100%
Neutral Tint / Hue15% / 19°
Status Hue Shift15% Brand Pull
Scale ModeOKLCH
4Accessibility Picks
Contrast Target4.5:1 (AA)
Button Stopp-500 (5.1:1)
Secondary Textn-600
Muted Textn-600
5Design Tokens
Radius Factor1.32 × 1.0
Spacing Factor1.25 × 1.00
Type Multiplier0.98×
Elevation Softness1.25 / 0.14

Image Brand Color Extractor

Drag and drop logos or images to automatically extract harmonic palette colors.

Drop an image or click to browsePNG, JPG, SVG, WebP up to 10MB