coolvibrant
Marine Signal Color Palette
Marine Signal is a cool and vibrant color palette of 5 colors: Prussian Blue (#023047), Cadet Blue (#219ebc), Sky Blue (#8ecae6), Amber (#ffb703) and Tangerine (#fb8500). Its dominant hue is orange.
The darkest color, Prussian Blue, on the lightest, Amber, gives a 7.93:1 contrast ratio — enough for body text at WCAG AAA. 3 pairs in this palette pass AA for normal text. Tangerine (#fb8500) is its most saturated color and a natural choice for buttons and links.
Colors
- Prussian Blue
- Cadet Blue
- Sky Blue
- Amber
- Tangerine
CSS Output
:root {
--marine-signal-1: #023047;
--marine-signal-2: #219ebc;
--marine-signal-3: #8ecae6;
--marine-signal-4: #ffb703;
--marine-signal-5: #fb8500;
}Marine Signal on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Prussian Blue on Amber#023047 on #ffb7037.93:1AAA
- Prussian Blue on Sky Blue#023047 on #8ecae67.74:1AAA
- Prussian Blue on Tangerine#023047 on #fb85005.57:1AA
- Prussian Blue on Cadet Blue#023047 on #219ebc4.40:1AA Large