Healthcare Calm
Calm teals and soft blues that communicate care and clarity.
Color codes
| HEX | RGB | HSL | CMYK | |
|---|---|---|---|---|
| hsl(192, 72%, 21%) | cmyk(84%, 17%, 0%, 64%) | |||
| hsl(173, 58%, 39%) | cmyk(73%, 0%, 9%, 38%) | |||
| hsl(199, 64%, 73%) | cmyk(38%, 12%, 0%, 10%) | |||
| hsl(165, 38%, 94%) | cmyk(5%, 0%, 1%, 4%) | |||
| hsl(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) |
CSS
:root {
--healthcare-calm-1: #0F4C5C;
--healthcare-calm-2: #2A9D8F;
--healthcare-calm-3: #8ECAE6;
--healthcare-calm-4: #E9F5F2;
--healthcare-calm-5: #FFFFFF;
}How these colors work together
The colors are analogous — neighbors on the color wheel — which gives a calm, cohesive feel. Overall it reads cool. Lightness spans 79 points, which sets how much contrast you can create.
3 of 10 color pairs reach the 4.5:1 contrast needed for normal text. The most readable pair is #0F4C5C on #FFFFFF (9.51:1).
Healthcare Calm — readable text using the best pair.
Suggested applications
- Reports, dashboards and business websites.
- Interface themes: use the lightest color for backgrounds and the darkest for text.
- Brand kits, social graphics and presentations.
Frequently asked questions
How do I use the Healthcare Calm palette?
The Healthcare Calm palette has 5 colors. Use one dominant color for large areas, a supporting color for secondary elements and the most saturated color sparingly as an accent.
Which colors in this palette are best for text?
Use #0F4C5C on #FFFFFF: it has a contrast ratio of 9.51:1.
Can I download this palette?
Yes. Export it as PNG, SVG, CSS variables, JSON or plain text with the buttons above the color table.
More palettes
Slate and Teal#1E293B #334155 #64748B #0D9488 #CCFBF1Trust Blue#0B1F3A #1D4E89 #3A7BD5 #A7C7E7 #F2F6FBModern Consulting#14213D #FCA311 #E5E5E5 #FFFFFF #000000Forest Floor#1B3A2B #3E6B48 #7FA16B #C9B88A #6B4F3AJapandi#F1EDE6 #D6CBBD #A89A86 #5F574B #2F2C28Accessible Contrast#FFFFFF #1A1A1A #0050B3 #B00020 #00703C