Sign Up Sign Up
4-Color Old Glory Blue Palette

4-Color Old Glory Blue Palette

4-color palette · Cool · Mixed · Complementary harmony

Back to Library

4-Color Old Glory Blue Palette

4-color palette · Cool temperature · Mixed tone · Complementary harmony

Modify
Vibrant 4 colors Cool Mixed Complementary
Likes 3,011
Colors 4

CSS variables

:root {
  --c-vibrant-1: #03256C;
  --c-vibrant-2: #2541B2;
  --c-vibrant-3: #1768AC;
  --c-vibrant-4: #E5D549;
}

About this palette

This 4-color vibrant palette runs from Citrus Sugar (#E5D549) as its lightest tone to Old Glory Blue (#03256C) as its darkest. It blends Old Glory Blue, Denim, Bowen Blue and Citrus Sugar into a single set you can drop straight into a UI. Of its 6 color pairings, 2 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #03256C on #E5D549 at 9.39:1.

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

Color breakdown

Old Glory Blue #03256C
RGB
rgb(3, 37, 108)
HSL
hsl(221, 95%, 22%)
Luminance
0.024
Denim #2541B2
RGB
rgb(37, 65, 178)
HSL
hsl(228, 66%, 42%)
Luminance
0.074
Bowen Blue #1768AC
RGB
rgb(23, 104, 172)
HSL
hsl(207, 76%, 38%)
Luminance
0.131
Citrus Sugar #E5D549
RGB
rgb(229, 213, 73)
HSL
hsl(54, 75%, 59%)
Luminance
0.647

Contrast & accessibility

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

Aa #03256C on #E5D549 9.39:1 AAA
Aa #2541B2 on #E5D549 5.63:1 AA
Aa #1768AC on #E5D549 3.86:1 AA Large
Aa #03256C on #1768AC 2.43:1 Fail
Aa #03256C on #2541B2 1.67:1 Fail
Aa #2541B2 on #1768AC 1.46:1 Fail

Similar palettes

#222831 #393E46 #00ADB5 #EEEEEE
4 colors
#F9F7F7 #DBE2EF #3F72AF #112D4E
4 colors
#1B262C #0F4C75 #3282B8 #BBE1FA
4 colors
#08D9D6 #252A34 #FF2E63 #EAEAEA
4 colors
#27374D #526D82 #9DB2BF #DDE6ED
4 colors
#364F6B #3FC1C9 #F5F5F5 #FC5185
4 colors
#E4F9F5 #30E3CA #11999E #40514E
4 colors
#F0F5F9 #C9D6DF #52616B #1E2022
4 colors