Palette · dark · blue · calm
Deep Ocean
A restrained, professional blue palette — trustworthy without the corporate stiffness.
Copy as
Usage system
Everything you need to wire this palette into a real project, not just the colors.
CSS variables
:root {
--color-bg: #071A2B;
--color-surface: #0F2A40;
--color-primary: #36B7C2;
--color-accent: #5BA7F7;
--color-text: #E4F1F6;
--color-muted: #7E9AAC;
}Tailwind config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
bg: '#071A2B',
surface: '#0F2A40',
primary: '#36B7C2',
accent: '#5BA7F7',
text: '#E4F1F6',
muted: '#7E9AAC',
},
},
},
}; Font pairing Sora / heading · Inter / body
Corner radius 10px
Spacing scale 4px base · 4 / 8 / 12 / 16 / 24 / 32
In context
New
Build better, faster
A card, a heading, a button and a hint of text — the palette doing real work.
Found one you like? Pair it with a template, generate a matching background in the gradient generator, or browse all palettes.