Clear, dependable, modern, and product-focused.
The quiet slate foundation keeps dense application content readable while blue and teal provide distinct action and supporting emphasis.
HTML Color · Curated palette
SaaS Interface Color Palette
A practical SaaS interface palette with cool surfaces, strong dark text, a blue primary action, and teal secondary emphasis.
#F8FAFC#E2E8F0#0F172A#2563EB#14B8A6- SaaS dashboards
- Product settings
- Onboarding flows
- Documentation portals
- Luxury print where warm materials define the brand
- Interfaces that need multiple high-salience status colors without additional variants
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 |
|---|---|---|---|---|---|
#F8FAFC | 248, 250, 252 | oklch(98.4% 0.003 248) | 2% / 1% / 0% / 1% | CPS 34050NΔE00 0.64 | |
#E2E8F0 | 226, 232, 240 | oklch(92.9% 0.013 256) | 6% / 3% / 0% / 6% | CPS 36100NΔE00 1.68 | |
#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 | |
#14B8A6 | 20, 184, 166 | oklch(70.4% 0.123 183) | 89% / 0% / 10% / 28% | CPS 16400BΔE00 3.97 |
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.
Primary application canvas
Subtle component structure
Headings and body text
Buttons, links, selected states
Supporting data and highlights
Context previews
Review the palette in light, dark, and mobile UI.
These previews reveal role assumptions that are invisible in a simple swatch strip.
SaaS InterfaceOverviewProjects
Primary metric24,680
Latest activity
Role-based color preview
ReadyDark contextDashboardSettings
Selected stateColor system
Focus and status
Check the real relationships
ActiveSaaS Interface•••
Mobile previewBuild with roles
Test text, controls, and states before export.
Important foreground and background pairs.
AaBody text on page background#0F172A on #F8FAFC17.06:1AA normal text
AaLight label on primary action#F8FAFC on #2563EB4.94:1AA normal text
AaDark content on muted surface#0F172A on #E2E8F014.48:1AA normal text
AaDark label on teal accent#0F172A on #14B8A67.17:1AA normal text
Accessibility notes
- The dark text and light surfaces provide the strongest reading relationships.
- Use a checked light foreground on the blue action; do not assume every light gray is suitable.
- Teal should not become the only success indicator without text or icon cues.
Color-vision note
Blue and teal can move closer in some simulations, so primary and secondary actions should also differ by label, placement, or component style.
Print note
Suitable as a digital-first palette. Any CMYK values shown are generic planning approximations and require a real profile and proof for print.
Related palettes
Modern Tech Color Palette
Finance Dashboard Color Palette
Midnight UI Dark Color Palette