Back to Foundations

Comprehensive color palette and usage guidelines

Our comprehensive color system designed for accessibility, consistency, and visual impact

COLOR PALETTE OVERVIEW
Click any color to copy its hex code

Black

#000000

White

#FFFFFF

Gray 100

#F3F4F6

Gray 300

#D1D5DB

Gray 500

#6B7280

Gray 700

#374151

Red 500

#EF4444

Blue 500

#3B82F6

Black Scale
Primary dark colors and variants

Black

#000000

Gray 900

#111827

Gray 800

#1F2937

White Scale
Primary light colors and variants

White

#FFFFFF

Gray 50

#F9FAFB

Gray 100

#F3F4F6

Purple Scale
Brand accent purple variants

Purple 400

#A855F7

Purple 500

#8B5CF6

Purple 600

#7C3AED

Blue Scale
Secondary brand blue variants

Blue 400

#60A5FA

Blue 500

#3B82F6

Blue 600

#2563EB

Pink Scale
Accent pink variants

Pink 400

#F472B6

Pink 500

#EC4899

Pink 600

#DB2777

Green Scale
Accent green variants

Green 400

#4ADE80

Green 500

#22C55E

Green 600

#16A34A

Gray Scale System
Complete neutral color palette for UI elements

Gray 50

#F9FAFB

Backgrounds

Gray 100

#F3F4F6

Light borders

Gray 200

#E5E7EB

Dividers

Gray 300

#D1D5DB

Disabled

Gray 400

#9CA3AF

Placeholders

Gray 500

#6B7280

Secondary text

Gray 600

#4B5563

Body text

Gray 700

#374151

Headings

Gray 800

#1F2937

Strong text

Gray 900

#111827

Primary text

Light Neutrals
Background and surface colors

Primary Background

White #FFFFFF

Secondary Background

Gray 50 #F9FAFB

Card Background

Gray 100 #F3F4F6

Medium Neutrals
Border and separator colors

Light Borders

Gray 200 #E5E7EB

Strong Borders

Gray 300 #D1D5DB

Input Placeholders

Gray 400 #9CA3AF

Dark Neutrals
Text and content colors

Body Text

Gray 600 #4B5563

Headings

Gray 700 #374151

Primary Text

Black #000000

Success Colors
Positive feedback and completion

Success Light

#DCFCE7

Backgrounds

Success

#22C55E

Primary

Success Dark

#15803D

Hover states

Error Colors
Error states and warnings

Error Light

#FEE2E2

Backgrounds

Error

#EF4444

Primary

Error Dark

#B91C1C

Hover states

Warning Colors
Caution and attention states

Warning Light

#FEF3C7

Backgrounds

Warning

#EAB308

Primary

Warning Dark

#A16207

Hover states

Info Colors
Information and neutral states

Info Light

#DBEAFE

Backgrounds

Info

#3B82F6

Primary

Info Dark

#1D4ED8

Hover states

Semantic Color Usage
Real-world application examples
Success Message

Your changes have been saved successfully

Error Message

Something went wrong. Please try again

Warning Message

Please review your information before proceeding

Info Message

New features are available in your dashboard

Contrast Ratios
WCAG compliant color combinations
Black on WhiteAAA

Contrast ratio: 21:1

Perfect for all text sizes

Gray 700 on WhiteAAA

Contrast ratio: 12.6:1

Excellent for body text

Blue 600 on WhiteAA

Contrast ratio: 4.5:1

Good for UI elements

Black on Yellow 400A

Contrast ratio: 3.2:1

Use for large text only

Color Blindness Considerations
Ensuring accessibility for all users

Do

  • Use high contrast color combinations
  • Combine colors with patterns or icons
  • Test with color blindness simulators
  • Provide alternative text descriptions
  • Use shapes and position as visual cues

Don't

  • Rely solely on color to convey information
  • Use red/green as the only differentiator
  • Use low contrast color pairs
  • Ignore accessibility testing tools
  • Use color-only error indicators

Color Blind Safe Combinations

Blue + Pattern
Orange + Pattern
Purple + Shape
Gray + Texture
Accessibility Testing Tools
Tools and resources for color accessibility validation

Contrast Checkers

  • WebAIM Contrast Checker
  • Colour Contrast Analyser
  • Stark (Figma/Sketch plugin)
  • axe DevTools

Color Blindness Simulators

  • Coblis simulator
  • Sim Daltonism
  • Chrome DevTools
  • Stark simulator

Browser Extensions

  • axe DevTools
  • WAVE Evaluation Tool
  • Lighthouse Accessibility
  • Color Oracle