An urban-inspired theme blending raw, industrial grays with a vibrant orange primary for graphic impact. Reflecting street art and cityscapes, it uses near-neutral backgrounds to make interactive elements pop. The OKLCH format ensures perceptually uniform colors and smooth transitions between light and dark modes, maintaining accessibility and visual punch.
Global Foundation
Core colors that establish the theme's overall visual foundation
background
oklch(0.99 0.005 240)
foreground
oklch(0.15 0.01 240)
muted
oklch(0.93 0.008 240)
muted-foreground
oklch(0.45 0.01 240)
border
oklch(0.90 0.01 240)
Content Containers
Colors for cards, popovers, modals, and other content containers
card
oklch(0.99 0.005 240)
card-foreground
oklch(0.15 0.01 240)
popover
oklch(0.99 0.005 240)
popover-foreground
oklch(0.15 0.01 240)
Interactive Elements
Colors for buttons, controls, and other interactive components
primary
oklch(0.65 0.15 50)
primary-foreground
oklch(0.98 0.01 50)
secondary
oklch(0.95 0.01 240)
secondary-foreground
oklch(0.25 0.01 240)
accent
oklch(0.95 0.01 240)
accent-foreground
oklch(0.25 0.01 240)
destructive
oklch(0.60 0.18 25)
Form Controls
Colors for form elements, inputs, and interactive controls
input
oklch(0.88 0.01 240)
ring
oklch(0.70 0.16 50)
Navigation & Layout
Colors specific to navigation components like sidebars and menus
sidebar
oklch(0.97 0.006 240)
sidebar-ring
oklch(0.70 0.16 50)
sidebar-accent
oklch(0.94 0.008 240)
sidebar-border
oklch(0.90 0.01 240)
sidebar-primary
oklch(0.65 0.15 50)
sidebar-foreground
oklch(0.15 0.01 240)
sidebar-accent-foreground
oklch(0.25 0.01 240)
sidebar-primary-foreground
oklch(0.98 0.01 50)
Data Visualization
Color series designed for charts, graphs, and data representation
