Technical, precise, modern, and optimistic.
A strong neutral pair frames three cool accents that can be expanded into separate numeric scales.
RGB · Curated palette
Modern Tech Color Palette
A dark slate, blue, cyan, teal, and near-white palette suited to technology products, Tailwind scales, and semantic UI tokens.
#0F172A#2563EB#06B6D4#14B8A6#F8FAFC- Technology SaaS
- Developer platforms
- Tailwind design systems
- Data products
- Warm editorial brands
- Interfaces that use cyan and teal as different status meanings without additional cues
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 |
|---|---|---|---|---|---|
#0F172A | 15, 23, 42 | oklch(20.8% 0.04 266) | 64% / 45% / 0% / 84% | CPS 22950SΔE00 2.92 | |
#2563EB | 37, 99, 235 | oklch(54.6% 0.215 263) | 84% / 58% / 0% / 8% | CPS 23500EΔE00 2.17 | |
#06B6D4 | 6, 182, 212 | oklch(71.5% 0.126 215) | 97% / 14% / 0% / 17% | CPS 12400VΔE00 2.87 | |
#14B8A6 | 20, 184, 166 | oklch(70.4% 0.123 183) | 89% / 0% / 10% / 28% | CPS 16400BΔE00 3.97 | |
#F8FAFC | 248, 250, 252 | oklch(98.4% 0.003 248) | 2% / 1% / 0% / 1% | CPS 34050NΔE00 0.64 |
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.
Text and dark canvas
Actions and links
Data and informational emphasis
Supporting positive emphasis
Page background
Context previews
Review the palette in light, dark, and mobile UI.
These previews reveal role assumptions that are invisible in a simple swatch strip.
Modern TechOverviewProjects
Primary metric24,680
Latest activity
Role-based color preview
ReadyDark contextDashboardSettings
Selected stateColor system
Focus and status
Check the real relationships
ActiveModern Tech•••
Mobile previewBuild with roles
Test text, controls, and states before export.
Important foreground and background pairs.
AaDark text on light canvas#0F172A on #F8FAFC17.06:1AA normal text
AaLight label on blue action#F8FAFC on #2563EB4.94:1AA normal text
AaDark label on cyan#0F172A on #06B6D47.35:1AA normal text
AaDark label on teal#0F172A on #14B8A67.17:1AA normal text
Accessibility notes
- Blue, cyan, and teal should receive distinct roles rather than being interchangeable accents.
- Generate full shade scales before using them for hover, active, and dark mode.
- Test dark and light foreground choices per shade.
Color-vision note
Cyan and teal can converge, so pair different roles with labels or component styles.
Print note
Digital-first; cyan and teal may require print adjustments. CMYK values are generic planning approximations.
Related palettes
SaaS Interface Color Palette
Fintech Signal Color Palette
Midnight UI Dark Color Palette