Clean Brand Color Kit

A clean brand color kit focuses on clarity and simplicity to create a fresh and modern look.

Color Settings

Adjust your base color

HEX
#3B82F6
Saturation100%
Brightness100%

Color Palette

Full color scale from light to dark variants

50
light#4a80d8
Global Surface
App Backgrounds
Hover Overlays
Shadows
On White3.9:1
On Black5.4:1
100
light#3b77d8
Global Surface
App Backgrounds
Hover Overlays
Shadows
On White4.4:1
On Black4.8:1
200
light#2466d0
Subtle Component
Subtle Badges
Input Hover
Skeleton
On White5.4:1
On Black3.9:1
300
light#1b58bb
Border & Divider
Inactive States
Card Borders
Dividers
On White6.6:1
On Black3.2:1
400
base#134ba4
Muted Content
Secondary Icons
Captions
Placeholders
On White8.2:1
On Black2.6:1
500BASE
base#0d3d8c
Primary Branding
Action Buttons
Active Links
Primary Logo
On White10.2:1
On Black2.1:1
600
base#083172
Emphasized Color
Button Hover
Selected Nav
Focus Rings
On White12.4:1
On Black1.7:1
700
dark#052457
Deep Brand Color
Main Headings
Success/Error Text
Banners
On White15.0:1
On Black1.4:1
800
dark#03183a
Heading & Text
Heavy Body Text
Contrast Borders
Icons
On White17.6:1
On Black1.2:1
900
dark#010c1d
Strong Accent
App Bars
Dark Page Mode
Strong Overlays
On White19.6:1
On Black1.1:1

Harmonious Schemes

Color combinations based on classical color theory

Analogous

#078292
#3B82F6
#170792

Perfect for balanced multi-color layouts.

Complementary

#3B82F6
#f6ae3b

Perfect for balanced multi-color layouts.

Triadic

#3B82F6
#92073c
#3c9207

Perfect for balanced multi-color layouts.

Monochromatic

#3375df
#1356c2
#3B82F6
#0e3e8b
#0c264f

Perfect for balanced multi-color layouts.

Split Complementary

#3B82F6
#921707
#829207

Perfect for balanced multi-color layouts.

Semantic Tokens

Functional color assignments for UI consistency

primaryToken
#0d3d8c
primary-hoverToken
#0b3477
primary-activeToken
#092b62
secondaryToken
#1b58bb
accentToken
#f6ae3b
successToken
#10B981
warningToken
#F59E0B
errorToken
#EF4444
infoToken
#3B82F6
surfaceToken
#FFFFFF
backgroundToken
#F9FAFB
text-primaryToken
#111827
text-secondaryToken
#6B7280
text-disabledToken
#9CA3AF
borderToken
#E5E7EB

Accessibility Matrix

Verify WCAG 2.1 contrast compliance for your system

ShadeOn WhiteOn BlackStatus
50
3.91:1FAIL
5.37:1AA
Accessible
100
4.36:1FAIL
4.82:1AA
Accessible
200
5.40:1AA
3.89:1FAIL
Accessible
300
6.65:1AA
3.16:1FAIL
Accessible
400
8.17:1AAA
2.57:1FAIL
Accessible
500
10.18:1AAA
2.06:1FAIL
Accessible
600
12.41:1AAA
1.69:1FAIL
Accessible
700
15.04:1AAA
1.40:1FAIL
Accessible
800
17.56:1AAA
1.20:1FAIL
Accessible
900
19.60:1AAA
1.07:1FAIL
Accessible

Live Preview

Test your palette in a real UI context

Coloraccy

Build Better with Coloraccy

Automated, accessible color systems for modern development teams.

Dynamic Styles

Every tool in this kit is built to scale with your brand across platforms.

Verified System

Adaptive UI

Real-time visualization of how your choices affect the final product.

System Analytics

Deep dive into your color kit performance data

Efficiency
100%

Accessible Shades

Readability
10.3

Avg Contrast (White)

Distribution
10

Total Tokenized Colors

Pick _ Swatches

Observe _ Spectrum