Palette · dark · green · saas
Emerald SaaS
Deep forest-black surfaces under a bright emerald primary — the confident, modern look of open-source dashboards and data tools.
Copy as
Building with shadcn/ui?
Install Emerald SaaS as a real theme — light and dark, OKLCH tokens, contrast checked.
Usage system
Everything you need to wire this palette into a real project, not just the colors.
CSS variables
:root {
--color-bg: #08110D;
--color-surface: #0F1F17;
--color-primary: #10B981;
--color-accent: #34D399;
--color-text: #E6F5EE;
--color-muted: #7FA593;
}Tailwind config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
bg: '#08110D',
surface: '#0F1F17',
primary: '#10B981',
accent: '#34D399',
text: '#E6F5EE',
muted: '#7FA593',
},
},
},
}; Font pairing Inter / 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.