brand-likecool
Health & Calm Color Palette
Health & Calm is a brand-ready and cool color palette of 5 colors: Gunmetal (#0b3c49), Light Sea Green (#14b8a6), Pale Turquoise (#99f6e4), Azure (#f0fdfa) and Pumpkin (#f97316). Its dominant hue is blue.
The darkest color, Gunmetal, on the lightest, Azure, gives a 11.46:1 contrast ratio — enough for body text at WCAG AAA. 3 pairs in this palette pass AA for normal text. Pumpkin (#f97316) is its most saturated color and a natural choice for buttons and links.
Colors
- Gunmetal
- Light Sea Green
- Pale Turquoise
- Azure
- Pumpkin
CSS Output
:root {
--health-calm-1: #0b3c49;
--health-calm-2: #14b8a6;
--health-calm-3: #99f6e4;
--health-calm-4: #f0fdfa;
--health-calm-5: #f97316;
}Health & Calm on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Gunmetal on Azure#0b3c49 on #f0fdfa11.46:1AAA
- Gunmetal on Pale Turquoise#0b3c49 on #99f6e49.48:1AAA
- Gunmetal on Light Sea Green#0b3c49 on #14b8a64.80:1AA
- Gunmetal on Pumpkin#0b3c49 on #f973164.26:1AA Large