Ocean Color Palette
Deep ocean color palette — abyssal blues, teal, sea spray white. Hex codes for nautical designs, coastal brands, and serene UI.
The Ocean Palette
- Sea Mist #E0F2FE rgb(224, 242, 254) hsl(204, 94%, 94%)
- Shallow Water #7DD3FC rgb(125, 211, 252) hsl(199, 95%, 74%)
- Sky Reflection #0EA5E9 rgb(14, 165, 233) hsl(199, 89%, 48%)
- Deep Current #0369A1 rgb(3, 105, 161) hsl(201, 96%, 32%)
- Abyssal Blue #1E3A8A rgb(30, 58, 138) hsl(224, 64%, 33%)
- Midnight Depths #0F172A rgb(15, 23, 42) hsl(222, 47%, 11%)
Want a custom palette from your own photo?
PhotoTones extracts hex codes from any image in under a second — free and private.
Open the Color Palette from Image GeneratorHex Codes at a Glance
#E0F2FE, #7DD3FC, #0EA5E9, #0369A1, #1E3A8A, #0F172A
How to Use This Palette
- In CSS: Paste each hex into your
:rootcustom properties or directly intobackground-color/colordeclarations. - In Figma or Sketch: Copy the hex into any fill or stroke color field. Save each color to your local style library for reuse across frames.
- In Tailwind CSS: Add each hex to your
tailwind.config.jsfile insidetheme.extend.colors, then use classes likebg-palette-500. - In Procreate or Photoshop: Create a new swatch set and paste each hex value. PhotoTones Pro exports ready-to-import
.swatchesand.asefiles.
Build Your Own Palette
This ocean palette is one of many themed palettes in the PhotoTones gallery. To build a palette from your own photo, use the free PhotoTones color palette from image generator — it extracts up to 12 hex codes per image in under a second, entirely in your browser. No signup required.