UI Colors
Browse 360 calibrated UI colors across 18 palettes. Copy HEX, RGB, and CSS variables with one click.
Design collections for user interfaces
Essential UI Studio
Citrus & Neon
Contemporary Pastel
Boutique & Spices
Nordic Minimal
Pacific & Glacier
Ocean & Sunset
Twilight & Velvet
Haute Couture Atelier
Earth & Fire
Industrial Bauhaus
Silk & Imperial Jade
Silicon Pop Digital
Metropolis & Royalty
Obsidian & Digital Neon
Terminal & Emerald Code
Cupertino & Glass System
Aurora & Digital Gradient
Web & app UI color swatches catalog (360 calibrated shades)
Choosing the right colors for digital products often leads to hours of frustrating guesswork: shades that look overly saturated, buttons that fail readability tests, or colors that do not work cleanly together across buttons, cards, and dark backgrounds.
This catalog brings together 18 modern color palettes and 360 shades calibrated specifically for digital interfaces. Each color features paired light and deep variations for hover states or surface cards, with one-click copy to your clipboard in HEX, RGB, HSL, and CSS variables.
Before and after comparison
Check the difference in file size, visual quality, and speed.
Visual inconsistency
Oversaturated colors without natural harmony
- •Contrast pairings that fail WCAG accessibility standards.
- •Buttons and cards that become hard to read in dark mode.
- •Wasted time manually converting color codes across formats.
360 Calibrated swatches
Natural visual balance across any screen
- ✓Curated color pairs designed for background and foreground harmony.
- ✓One-click instant copy in HEX, RGB, HSL, and native CSS variables.
- ✓Production-ready tokens ready to drop into Tailwind or style sheets.
How to use these color palettes in your projects
Website & application UI design
Find harmonious primary, secondary, and surface colors that look professional without overwhelming users.
Interactive buttons and hover states
Use matched light and deep shades to create subtle, natural hover and pressed states with zero effort.
Data visualization and dashboards
Distinct, accessible hues to represent metric bars, pie charts, and stats that remain clear at a glance.
Frequently asked questions about UI color swatches
Copy HEX for general design tools or Figma. Use RGB if you need alpha opacity transparency. Use CSS variables if you are coding a website so you can swap themes easily in one place.
Each column provides two related shades: a lighter surface tint on top and a deeper tone below, designed to pair naturally as surface and accent.
Yes. All palettes and color codes are completely free for personal, open-source, and commercial projects.