A bold and contemporary theme featuring a vibrant blue primary color for high visual impact. Clean neutrals ensure excellent readability in both light and dark modes. Strategic accents derived from the base palette maintain cohesion, while distinct chart colors provide clarity in data visualization. The design prioritizes accessibility and a modern aesthetic.
Global Foundation
Core colors that establish the theme's overall visual foundation
background
hsl(0 0% 100%)
foreground
hsl(222.2 84% 4.9%)
muted
hsl(210 40% 96.1%)
muted-foreground
hsl(215.4 16.3% 46.9%)
border
hsl(214.3 31.8% 91.4%)
Content Containers
Colors for cards, popovers, modals, and other content containers
card
hsl(0 0% 100%)
card-foreground
hsl(222.2 84% 4.9%)
popover
hsl(0 0% 100%)
popover-foreground
hsl(222.2 84% 4.9%)
Interactive Elements
Colors for buttons, controls, and other interactive components
primary
hsl(221.2 83.2% 53.3%)
primary-foreground
hsl(210 40% 98%)
secondary
hsl(210 40% 96.1%)
secondary-foreground
hsl(222.2 47.4% 11.2%)
accent
hsl(210 40% 96.1%)
accent-foreground
hsl(222.2 47.4% 11.2%)
destructive
hsl(0 84.2% 60.2%)
Form Controls
Colors for form elements, inputs, and interactive controls
input
hsl(214.3 31.8% 91.4%)
ring
hsl(221.2 83.2% 53.3%)
Navigation & Layout
Colors specific to navigation components like sidebars and menus
sidebar
hsl(0 0% 99%)
sidebar-ring
hsl(221.2 83.2% 53.3%)
sidebar-accent
hsl(210 40% 94%)
sidebar-border
hsl(214.3 31.8% 91.4%)
sidebar-primary
hsl(221.2 83.2% 53.3%)
sidebar-foreground
hsl(222.2 84% 4.9%)
sidebar-accent-foreground
hsl(222.2 47.4% 11.2%)
sidebar-primary-foreground
hsl(210 40% 98%)
Data Visualization
Color series designed for charts, graphs, and data representation
