Ocean Depths
From deep sea navy to bright shallow water.
Color codes
| HEX | RGB | HSL | CMYK | |
|---|---|---|---|---|
| hsl(239, 94%, 19%) | cmyk(97%, 96%, 0%, 63%) | |||
| hsl(201, 100%, 36%) | cmyk(100%, 35%, 0%, 29%) | |||
| hsl(190, 100%, 42%) | cmyk(100%, 17%, 0%, 15%) | |||
| hsl(189, 75%, 75%) | cmyk(40%, 6%, 0%, 6%) | |||
| hsl(190, 77%, 88%) | cmyk(19%, 3%, 0%, 3%) |
CSS
:root {
--ocean-depths-1: #03045E;
--ocean-depths-2: #0077B6;
--ocean-depths-3: #00B4D8;
--ocean-depths-4: #90E0EF;
--ocean-depths-5: #CAF0F8;
}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 69 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 #03045E on #CAF0F8 (14.65:1).
Ocean Depths — readable text using the best pair.
Suggested applications
- Outdoor brands, wellness and sustainability projects.
- 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 Ocean Depths palette?
The Ocean Depths 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 #03045E on #CAF0F8: it has a contrast ratio of 14.65: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
Forest Floor#1B3A2B #3E6B48 #7FA16B #C9B88A #6B4F3ADesert Dunes#F2D6B3 #E0A96D #C2763B #8C4A2F #3B2A20Olive Grove#4A5A23 #7A8B3A #B5B77C #E6E2C3 #5C4033Citrus Splash#F9C80E #F86624 #EA3546 #662E9B #43BCCDMarble Hall#F6F4F0 #E2DDD5 #BFB6A8 #7D7366 #2E2A26Cotton Candy#FFC8DD #FFAFCC #BDE0FE #A2D2FF #CDB4DB