Chakra UI - Simple & Modular Colors
A simple, modular and accessible component library color system for React applications. Chakra UI is a modular design system for React, offering a rich color palette with hues like #2B6CB0 (blue) and #38A169 (green). Copy styles and explore examples to build intuitive, visually appealing interfaces effortlessly.
Modular Color System with Design Tokens
Blue 50
#EBF8FF
blue-50
Blue 100
#BEE3F8
blue-100
Blue 200
#90CDF4
blue-200
Blue 300
#63B3ED
blue-300
Blue 400
#4299E1
blue-400
Blue 500
#3182CE
blue-500
Blue 600
#2B77CB
blue-600
Blue 700
#2C5AA0
blue-700
Blue 800
#2A4365
blue-800
Blue 900
#1A365D
blue-900
Teal 50
#E6FFFA
teal-50
Teal 100
#B2F5EA
teal-100
Teal 200
#81E6D9
teal-200
Teal 300
#4FD1C7
teal-300
Teal 400
#38B2AC
teal-400
Teal 500
#319795
teal-500
Teal 600
#2C7A7B
teal-600
Teal 700
#285E61
teal-700
Teal 800
#234E52
teal-800
Teal 900
#1D4044
teal-900
Orange 50
#FFFAF0
orange-50
Orange 100
#FEEBC8
orange-100
Orange 200
#FBD38D
orange-200
Orange 300
#F6AD55
orange-300
Orange 400
#ED8936
orange-400
Orange 500
#DD6B20
orange-500
Orange 600
#C05621
orange-600
Orange 700
#9C4221
orange-700
Orange 800
#7B341E
orange-800
Orange 900
#652B19
orange-900
Chakra UI Color Generator
Generate and test colors from the Chakra UI palette
Color Generator
Generate color variations and test them in real components
Real-world UI Examples
See how Chakra UI colors look in practical applications
Track your expenses
Total Expenses
$12,543
Analytics
Revenue$15,989
Expenses$12,543
Gain control
Advanced settings
Categories
Groceries
9 transactions
$2,345
Household
12 transactions
$1,876
Financial Summary
Income
$15,989
$18,871 last period
Expenses
$12,543
$10,221 last period
All Set!
Your Chakra UI configuration is complete.
Traditional Components
Buttons
Alerts
Information
This is an informational alert using default colors.
Success
This is a success alert with Chakra UI styling.
Form Elements
Badges
Primary
Secondary
Accent
Outline