Focused, technical, calm, and nocturnal.
Near-black and navy surfaces create depth without pure-black glare, while cyan supplies a crisp interactive signal.
Dark · Curated palette
Midnight UI Dark Color Palette
A layered dark blue palette with softened light text and a cyan action accent for dashboard and developer interfaces.
#020617#111827#334155#E2E8F0#38BDF8- Developer tools
- Monitoring dashboards
- Media applications
- Dark productivity interfaces
- Long-form reading without careful type and spacing
- Print-first branding where dark ink coverage is a concern
Color values
HEX, RGB, OKLCH, CPS, and CMYK planning values.
CMYK values are generic planning approximations. Final print output requires a target ICC profile and physical proof.
| Color | HEX | RGB | OKLCH | CMYK approximation | Nearest CPS |
|---|---|---|---|---|---|
#020617 | 2, 6, 23 | oklch(12.9% 0.041 265) | 91% / 74% / 0% / 91% | CPS 36950NΔE00 4.57 | |
#111827 | 17, 24, 39 | oklch(21% 0.032 265) | 56% / 38% / 0% / 85% | CPS 22950SΔE00 3.91 | |
#334155 | 51, 65, 85 | oklch(37.2% 0.039 257) | 40% / 24% / 0% / 67% | CPS 36800NΔE00 4.90 | |
#E2E8F0 | 226, 232, 240 | oklch(92.9% 0.013 256) | 6% / 3% / 0% / 6% | CPS 36100NΔE00 1.68 | |
#38BDF8 | 56, 189, 248 | oklch(75.4% 0.139 233) | 77% / 24% / 0% / 3% | CPS 21300EΔE00 1.51 |
Semantic role mapping
Give every color a stable job.
This role map is a practical starting point. Validate it against the real components, text sizes, and interaction states in your product.
Deep page background
Cards and navigation
Inputs and separators
Body and heading text
Links, focus, selected states
Context previews
Review the palette in light, dark, and mobile UI.
These previews reveal role assumptions that are invisible in a simple swatch strip.
Midnight UIOverviewProjects
Primary metric24,680
Latest activity
Role-based color preview
ReadyDark contextDashboardSettings
Selected stateColor system
Focus and status
Check the real relationships
ActiveMidnight UI•••
Mobile previewBuild with roles
Test text, controls, and states before export.
Important foreground and background pairs.
AaLight text on deep canvas#E2E8F0 on #02061716.36:1AA normal text
AaLight text on card surface#E2E8F0 on #11182714.39:1AA normal text
AaDark label on cyan action#020617 on #38BDF89.42:1AA normal text
AaCyan link on surface#38BDF8 on #1118278.28:1AA normal text
Accessibility notes
- Use the cyan with a checked foreground rather than defaulting to white.
- The slate border should remain thick enough to be visible on navy surfaces.
- Muted text needs its own tested value; do not lower opacity without checking the composite result.
Color-vision note
The palette relies mainly on lightness hierarchy, which remains useful when hue perception changes, but cyan should not be the only selected-state cue.
Print note
This is a screen-first palette. Large dark print areas require ink-limit planning and proofing.
Related palettes
Obsidian Product Dark Color Palette
SaaS Interface Color Palette
Modern Tech Color Palette