Fresh Mint color palette
Cool and clean, like the first breath after brushing your teeth. Mint white #F0FFF4 and pale #C6F6D5 are barely tinted, #9AE6B4 is a soft spearmint, and #48BB78 and #276749 bring a confident leaf and pine. The ramp reads healthy and trustworthy. Dental clinics and health apps are a comfortable match.
Fresh Mint palette in use
Set text in #276749 on a #F0FFF4 background. #48BB78 is the button and success color, #C6F6D5 suits alert boxes and cards, and #9AE6B4 progress bars.
This pair measures 6.50:1, so it works for body text too. The button uses #48BB78 with black text.
ButtonGood for
- Dental clinic website
- Health tracking app
- Eco cleaning products
- Salad bar menu
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#276749 | #F0FFF4 | 6.50:1 | AA |
#276749 | #C6F6D5 | 5.61:1 | AA |
#276749 | #9AE6B4 | 4.59:1 | AA |
Fresh Mint palette as code
CSS variables
:root {
--fresh-mint-1: #F0FFF4;
--fresh-mint-2: #C6F6D5;
--fresh-mint-3: #9AE6B4;
--fresh-mint-4: #48BB78;
--fresh-mint-5: #276749;
}Tailwind v4
@theme {
--color-fresh-mint-1: #F0FFF4;
--color-fresh-mint-2: #C6F6D5;
--color-fresh-mint-3: #9AE6B4;
--color-fresh-mint-4: #48BB78;
--color-fresh-mint-5: #276749;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'fresh-mint': {
100: '#F0FFF4',
200: '#C6F6D5',
300: '#9AE6B4',
400: '#48BB78',
500: '#276749',
},SCSS
$fresh-mint-1: #F0FFF4;
$fresh-mint-2: #C6F6D5;
$fresh-mint-3: #9AE6B4;
$fresh-mint-4: #48BB78;
$fresh-mint-5: #276749;JSON
["#F0FFF4","#C6F6D5","#9AE6B4","#48BB78","#276749"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.