Sign Up Sign Up
ST 8 Ocean

ST 8 Ocean

8-color palette · Cool · Dark · Analogous harmony

Back to Library

ST 8 Ocean

8-color palette · Cool temperature · Dark tone · Analogous harmony

Modify
Vibrant 8 colors Cool Dark Analogous artist ocean water aqua
Likes 93
Colors 8

CSS variables

:root {
  --c-vibrant-1: #040D09;
  --c-vibrant-2: #081A14;
  --c-vibrant-3: #0F332E;
  --c-vibrant-4: #165955;
  --c-vibrant-5: #238C8C;
  --c-vibrant-6: #39BFBF;
  --c-vibrant-7: #5CE5E5;
  --c-vibrant-8: #B2FAFF;
}

About this palette

This 8-color vibrant palette runs from Italian Sky Blue (#B2FAFF) as its lightest tone to Alpine Salamander (#040D09) as its darkest. It blends Alpine Salamander, Black Stallion, Storm Green, Baltic Prince, Fish Story, Maximum Blue Green, Near Moon and Italian Sky Blue into a single set you can drop straight into a UI. Of its 28 color pairings, 12 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #040D09 on #B2FAFF at 16.89:1.

A versatile palette suitable for marketing pages, product hero blocks, illustrations, and accent UI states.

Color breakdown

Alpine Salamander #040D09
RGB
rgb(4, 13, 9)
HSL
hsl(153, 53%, 3%)
Luminance
0.003
Black Stallion #081A14
RGB
rgb(8, 26, 20)
HSL
hsl(160, 53%, 7%)
Luminance
0.008
Storm Green #0F332E
RGB
rgb(15, 51, 46)
HSL
hsl(172, 55%, 13%)
Luminance
0.027
Baltic Prince #165955
RGB
rgb(22, 89, 85)
HSL
hsl(176, 60%, 22%)
Luminance
0.080
Fish Story #238C8C
RGB
rgb(35, 140, 140)
HSL
hsl(180, 60%, 34%)
Luminance
0.210
Maximum Blue Green #39BFBF
RGB
rgb(57, 191, 191)
HSL
hsl(180, 54%, 49%)
Luminance
0.419
Near Moon #5CE5E5
RGB
rgb(92, 229, 229)
HSL
hsl(180, 72%, 63%)
Luminance
0.640
Italian Sky Blue #B2FAFF
RGB
rgb(178, 250, 255)
HSL
hsl(184, 100%, 85%)
Luminance
0.851

Contrast & accessibility

12 of 28 color pairings meet the WCAG AA contrast threshold (4.5:1) for body text.

Aa #040D09 on #B2FAFF 16.89:1 AAA
Aa #081A14 on #B2FAFF 15.42:1 AAA
Aa #040D09 on #5CE5E5 12.93:1 AAA
Aa #081A14 on #5CE5E5 11.81:1 AAA
Aa #0F332E on #B2FAFF 11.75:1 AAA
Aa #0F332E on #5CE5E5 9.00:1 AAA
Aa #040D09 on #39BFBF 8.79:1 AAA
Aa #081A14 on #39BFBF 8.03:1 AAA
Aa #165955 on #B2FAFF 6.94:1 AA
Aa #0F332E on #39BFBF 6.12:1 AA
Aa #165955 on #5CE5E5 5.32:1 AA
Aa #040D09 on #238C8C 4.88:1 AA
Aa #081A14 on #238C8C 4.45:1 AA Large
Aa #165955 on #39BFBF 3.62:1 AA Large
Aa #238C8C on #B2FAFF 3.46:1 AA Large
Aa #0F332E on #238C8C 3.39:1 AA Large
Aa #238C8C on #5CE5E5 2.65:1 Fail
Aa #040D09 on #165955 2.43:1 Fail
Aa #081A14 on #165955 2.22:1 Fail
Aa #165955 on #238C8C 2.00:1 Fail
Aa #39BFBF on #B2FAFF 1.92:1 Fail
Aa #238C8C on #39BFBF 1.80:1 Fail
Aa #0F332E on #165955 1.69:1 Fail
Aa #39BFBF on #5CE5E5 1.47:1 Fail
Aa #040D09 on #0F332E 1.44:1 Fail
Aa #081A14 on #0F332E 1.31:1 Fail
Aa #5CE5E5 on #B2FAFF 1.31:1 Fail
Aa #040D09 on #081A14 1.10:1 Fail

Similar palettes

#212121 #323232 #0D7377 #14FFEC
4 colors
#0A2647 #144272 #205295 #2C74B3
4 colors
#040D12 #183D3D #5C8374 #93B1A6
4 colors
#142850 #27496D #0C7B93 #00A8CC
4 colors
#635985 #443C68 #393053 #18122B
4 colors
#000000 #150050 #3F0071 #610094
4 colors
#151515 #301B3F #3C415C #B4A5A5
4 colors
#041C32 #04293A #064663 #ECB365
4 colors