Untitled UI - Professional Design System Colors
Clean and modern design system with carefully crafted color palettes for professional applications. Untitled UI is a modern, Figma-crafted design system with a dynamic palette for Tailwind CSS projects. Explore hues like #6366F1 (indigo) and #6EE7B7 (emerald) to build clean, visually engaging interfaces with ready-to-use components.
Professional Color System with Extended Scales
Primary 25
#FCFAFF
bg-primary-25
Primary 50
#F9F5FF
bg-primary-50
Primary 100
#F4EBFF
bg-primary-100
Primary 200
#E9D7FE
bg-primary-200
Primary 300
#D6BBFB
bg-primary-300
Primary 400
#B692F6
bg-primary-400
Primary 500
#9061F9
bg-primary-500
Primary 600
#7C3AED
bg-primary-600
Primary 700
#6927DA
bg-primary-700
Primary 800
#5521B5
bg-primary-800
Primary 900
#44179A
bg-primary-900
Primary 950
#2C0D69
bg-primary-950
Gray 25
#FCFCFD
bg-gray-25
Gray 50
#F9FAFB
bg-gray-50
Gray 100
#F2F4F7
bg-gray-100
Gray 200
#EAECF0
bg-gray-200
Gray 300
#D0D5DD
bg-gray-300
Gray 400
#98A2B3
bg-gray-400
Gray 500
#667085
bg-gray-500
Gray 600
#475467
bg-gray-600
Gray 700
#344054
bg-gray-700
Gray 800
#1D2939
bg-gray-800
Gray 900
#101828
bg-gray-900
Gray 950
#0C111D
bg-gray-950
Blue 25
#F5FBFF
bg-blue-25
Blue 50
#EFF8FF
bg-blue-50
Blue 100
#D1E9FF
bg-blue-100
Blue 200
#B2DDFF
bg-blue-200
Blue 300
#84CAFF
bg-blue-300
Blue 400
#53B1FD
bg-blue-400
Blue 500
#2E90FA
bg-blue-500
Blue 600
#1570EF
bg-blue-600
Blue 700
#175CD3
bg-blue-700
Blue 800
#1849A9
bg-blue-800
Blue 900
#194185
bg-blue-900
Green 25
#F6FEF9
bg-green-25
Green 50
#ECFDF3
bg-green-50
Green 100
#D1FADF
bg-green-100
Green 200
#A6F4C5
bg-green-200
Green 300
#6CE9A6
bg-green-300
Green 400
#32D583
bg-green-400
Green 500
#12B76A
bg-green-500
Green 600
#039855
bg-green-600
Green 700
#027A48
bg-green-700
Green 800
#05603A
bg-green-800
Green 900
#054F31
bg-green-900
Error 25
#FFFBFA
bg-error-25
Error 50
#FEF3F2
bg-error-50
Error 100
#FEE4E2
bg-error-100
Error 200
#FECDCA
bg-error-200
Error 300
#FDA29B
bg-error-300
Error 400
#F97066
bg-error-400
Error 500
#F04438
bg-error-500
Error 600
#D92D20
bg-error-600
Error 700
#B42318
bg-error-700
Error 800
#912018
bg-error-800
Error 900
#7A271A
bg-error-900
Warning 25
#FFFCF5
bg-warning-25
Warning 50
#FFFAEB
bg-warning-50
Warning 100
#FEF0C7
bg-warning-100
Warning 200
#FEDF89
bg-warning-200
Warning 300
#FEC84B
bg-warning-300
Warning 400
#FDB022
bg-warning-400
Warning 500
#F79009
bg-warning-500
Warning 600
#DC6803
bg-warning-600
Warning 700
#B54708
bg-warning-700
Warning 800
#93370D
bg-warning-800
Warning 900
#7A2E0E
bg-warning-900
Untitled UI Color Generator
Generate and test colors from the Untitled UI palette
Color Generator
Generate color variations and test them in real components
Real-world UI Examples
See how Untitled 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 Untitled UI configuration is complete.
Traditional Components
Buttons
Alerts
Information
This is an informational alert using default colors.
Success
This is a success alert with Untitled UI styling.
Form Elements
Badges
Primary
Secondary
Accent
Outline