Your Business Name

Color System Preview

All presets meet WCAG AA accessibility standards

Professional Blue

Clean, trustworthy palette for professional services, law firms, consultants

Config key: professional

☀️ Light Mode

#ffffff

Background

#1e40af

Primary

#64748b

Secondary

#0369a1

Accent

WCAG Contrast Ratios:

Primary on Background: 8.72:1 AAA
Secondary on Background: 4.76:1 AAA
Accent on Background: 5.93:1 AAA

🌙 Dark Mode

#0f172a

Background

#60a5fa

Primary

#94a3b8

Secondary

#38bdf8

Accent

WCAG Contrast Ratios:

Primary on Background: 7.02:1 AAA
Secondary on Background: 6.96:1 AAA
Accent on Background: 8.33:1 AAA

Warm & Inviting

Warm, appetizing colors for restaurants, cafes, bakeries

Config key: warm

☀️ Light Mode

#fefce8

Background

#dc2626

Primary

#78716c

Secondary

#c2410c

Accent

WCAG Contrast Ratios:

Primary on Background: 4.67:1 AA
Secondary on Background: 4.64:1 AAA
Accent on Background: 5.01:1 AAA

🌙 Dark Mode

#1c1917

Background

#fca5a5

Primary

#d6d3d1

Secondary

#fdba74

Accent

WCAG Contrast Ratios:

Primary on Background: 9.21:1 AAA
Secondary on Background: 11.74:1 AAA
Accent on Background: 10.37:1 AAA

Modern & Clean

Sleek, minimal design for tech companies, startups, agencies

Config key: modern

☀️ Light Mode

#f8fafc

Background

#0f172a

Primary

#64748b

Secondary

#0e7490

Accent

WCAG Contrast Ratios:

Primary on Background: 17.06:1 AAA
Secondary on Background: 4.55:1 AAA
Accent on Background: 5.12:1 AAA

🌙 Dark Mode

#0f172a

Background

#f1f5f9

Primary

#cbd5e1

Secondary

#22d3ee

Accent

WCAG Contrast Ratios:

Primary on Background: 16.30:1 AAA
Secondary on Background: 12.02:1 AAA
Accent on Background: 9.88:1 AAA

Nature & Health

Natural, calming palette for spas, wellness centers, eco-businesses

Config key: nature

☀️ Light Mode

#f0fdf4

Background

#15803d

Primary

#4d7c0f

Secondary

#0e7490

Accent

WCAG Contrast Ratios:

Primary on Background: 4.79:1 AA
Secondary on Background: 4.77:1 AAA
Accent on Background: 5.12:1 AAA

🌙 Dark Mode

#14532d

Background

#86efac

Primary

#bef264

Secondary

#67e8f9

Accent

WCAG Contrast Ratios:

Primary on Background: 6.49:1 AA
Secondary on Background: 6.97:1 AAA
Accent on Background: 6.29:1 AAA

Elegant & Luxury

Sophisticated colors for luxury services, high-end retail, premium brands

Config key: elegant

☀️ Light Mode

#fafaf9

Background

#44403c

Primary

#737373

Secondary

#b45309

Accent

WCAG Contrast Ratios:

Primary on Background: 9.84:1 AAA
Secondary on Background: 4.54:1 AAA
Accent on Background: 4.81:1 AAA

🌙 Dark Mode

#292524

Background

#fafaf9

Primary

#d4d4d4

Secondary

#fbbf24

Accent

WCAG Contrast Ratios:

Primary on Background: 14.52:1 AAA
Secondary on Background: 10.23:1 AAA
Accent on Background: 9.09:1 AAA

Bold & Energetic

Bold, energetic colors for gyms, fitness studios, sports businesses

Config key: bold

☀️ Light Mode

#fef2f2

Background

#b91c1c

Primary

#1e293b

Secondary

#c2410c

Accent

WCAG Contrast Ratios:

Primary on Background: 5.91:1 AA
Secondary on Background: 13.37:1 AAA
Accent on Background: 4.73:1 AAA

🌙 Dark Mode

#1e293b

Background

#fca5a5

Primary

#e2e8f0

Secondary

#fb923c

Accent

WCAG Contrast Ratios:

Primary on Background: 7.71:1 AAA
Secondary on Background: 11.87:1 AAA
Accent on Background: 6.46:1 AAA

Creative & Artistic

Vibrant, artistic palette for design studios, artists, creative agencies

Config key: creative

☀️ Light Mode

#faf5ff

Background

#7c3aed

Primary

#db2777

Secondary

#b45309

Accent

WCAG Contrast Ratios:

Primary on Background: 5.31:1 AA
Secondary on Background: 4.28:1 AA
Accent on Background: 4.68:1 AAA

🌙 Dark Mode

#4c1d95

Background

#c4b5fd

Primary

#f9a8d4

Secondary

#fbbf24

Accent

WCAG Contrast Ratios:

Primary on Background: 5.93:1 AA
Secondary on Background: 6.04:1 AAA
Accent on Background: 6.56:1 AAA

Trust & Reliability

Conservative, trustworthy colors for banks, legal services, insurance

Config key: trust

☀️ Light Mode

#eff6ff

Background

#1e40af

Primary

#475569

Secondary

#047857

Accent

WCAG Contrast Ratios:

Primary on Background: 8.01:1 AAA
Secondary on Background: 6.96:1 AAA
Accent on Background: 5.04:1 AAA

🌙 Dark Mode

#1e3a8a

Background

#93c5fd

Primary

#cbd5e1

Secondary

#6ee7b7

Accent

WCAG Contrast Ratios:

Primary on Background: 5.74:1 AA
Secondary on Background: 6.98:1 AAA
Accent on Background: 6.80:1 AAA

WCAG AA Requirements: Normal text ≥ 4.5:1 | Large text ≥ 3.0:1

To use a preset, update src/config/colors.js