Ocean teal color palettes
Ocean teal sits between green-blue and blue: hues from 173 to 202 degrees, saturation from moderate to high, lightness on the dark side. Greener than sky blue, heavier than mint. Of 100 palettes in the library, 8 have a primary in that band, with saturation from 32 to 73 percent.
Ocean teal palettes in the library
Each card shows the primary and the body contrast. This family turns nearly black on dim screens, so that figure is worth reading closely.
#2f8f83sat 51%13.99:1 · AAA#177796sat 73%14.08:1 · AAA#2698basat 66%14.27:1 · AAA#1d6996sat 68%14.41:1 · AAA#1a9589sat 70%13.76:1 · AAA#196d9bsat 72%14.41:1 · AAA#1f5f5bsat 51%13.34:1 · AAA#49768dsat 32%14.41:1 · AAAWhat ocean teal means on screen
Borrowed from seawater: greener in the shallows, bluer in the deep. On screen it means the stretch that is neither as cold as pure blue nor as bright as a green-teal.
What separates it from the teal tag is the hue range: teal can lean green, ocean teal takes 170 to 205 degrees only. What separates it from blue is saturation and lightness: pure blue is louder, ocean teal carries some gray. The 8 palettes here run from 25 to 44 percent lightness; the dark end works as a full ground, the light end suits chart lines, links and icons. Which end you pick depends on how much area it has to cover.
Three rules
One: ground it in white or near-white
An ocean teal primary is already dark, so a dark ground leaves no room for layers. Body contrast across these 8 runs from 13.34:1 to 14.41:1, all with light grounds.
Two: do not mix in forest greens
Ocean teal and forest green pull each other off center, one cool, one yellow-green, with nothing between them. For a second color, use sand or warm gray.
Three: use it as the normal state in dashboards
On a dashboard this hue separates from alert red more easily than pure blue does, and reads more neutral than green. Make it the default state and save red and yellow for exceptions.
Ocean teal is neither teal nor blue
The teal tag is wider and includes the greener end; blue is louder and colder. 4 palettes here also carry the teal tag, and the rest are teal by hue without carrying the label.
When not to use it
- Anything that needs warmth or appetite. Blue-teal suppresses appetite in food contexts.
- Industries with no link to water or cleanliness. The association is strong enough that finance and legal work can read as lightweight in it.
- Large areas on dim screens. Deep ocean teal approaches black there and card edges disappear.
Common questions
- How is ocean teal different from the teal tag?
- Hue range. Teal includes the greener end; ocean teal takes 170 to 205 degrees only, the stretch from shallow water to deep.
- Why does this family suit data visualization?
- Because it sits far enough from both red and yellow that it will not be confused with an alert color as the normal state. That holds under color blindness simulation too: blue-teal is the easiest direction for red-green color blindness to separate.
- Does ocean teal work in dark mode?
- Yes, but the primary needs a lift, otherwise it approaches black on a dark ground and card edges vanish.
Related tools
Contrast checker →Color blindness simulator →Dark mode converter →See every teal and blue palette →