How to Design With Blue and Complementary Colors

Find the colors that go with medium and dark blue

Blue is one of the most common colors used in web design. Using a medium to dark blue encourages a relaxing feel that designers can complement with yellow and orange.

Here are a few different ways Blue can work with other colors.

of 04

Opposites Attract and Blue Goes Well With Orange

Choose a blue and choose an orange for a 2-color complementary palette.

Lifewire / J. Bear

Consider combining blue colors with orange in a complementary color scheme.

From darkest to lightest, the oranges shown with each blue swatch in the above image are:

  • Hex #FFA500 | RGB 255,165,0 (a golden orange; SVG color keyword & CSS color keyword orange)
  • Hex #FF8000 | RGB 255,128,0 (medium orange)
  • Hex #FF4500 | RGB 255,69,0 (orange red; SVG color keyword orangered)
  • Hex #C83200 | RGB 200,50,0 (a dark orange)
  • Numbers: Hex #FF7F27 | RGB 255,127,39 (a peachy orange)

The blues, from darker to lighter are:

  1. NavyHex #000080 | RGB 0,0,128 (CSS color keyword/SVG color keyword navy)
  2. Blue: Hex #0000FF | RGB 0,0,255 (CSS/SVG color keyword is blue; browser safe color)
  3. Hex: #0045FF | RGB 0,69,255 (a medium blue)
  4. Steel Blue: Hex #4682B4 | RGB 70,130,180 (SVG color keyword steelblue; a corporate blue)
  5. Hex: #0080FF | RGB 0,128,255 (a medium blue)
  6. Light Blue: Hex #ADD8E6 | RGB 173,216,230 (SVG color keyword lightblue)

Dark blues and medium shades of blue symbolize importance, confidence, power, intelligence, stability, unity, and conservatism. By adding some orange to your predominantly dark blue palette, you introduce some warmth and energy that can keep your palette from being too stilted or overpowering.

You don't have to use these exact shades. Go a touch lighter or darker, or step one spot to the left or the right on the color wheel. These color combinations help you find a suitable color palette using blue and orange as the main components.

of 04

Mix Deep Blues With Golden Yellow

Pick a shade of yellow to go with a deep blue or violet-tinged blue.

Lifewire / J. Bear

Take dark blues to almost purple and add a splash of sunshine yellow in a complementary color scheme.

Blue is a cool color moving to warm as you add the purplish tones, while yellow is a warm color on the other side of the color wheel. To avoid unpleasant vibrations, avoid using in equal amounts. Enliven your blue with a splash of yellow (or calm your yellow with a dash of blue).

From darkest to lightest, the yellow shown with each blue swatch in the above image are:

  • Cadium Yellow: Hex #FF9912 | RGB 255,153,18 (a warm, brownish yellow)
  • Gold: Hex #FFD700 | RGB 255,215,0 (SVG color keyword gold)
  • Numbers: Hex #FFFF00 | RGB 255,255,0 (SVG/CSS color keyword yellow)

The blues are:

  1. Very Dark Blue: Hex #000033 | RGB 0,0,51 (a browser safe dark blue)
  2. Midnight Blue: Hex #191970 | RGB 25,25,112 (SVG color keyword midnightblue)
  3. Dark Slate Blue: Hex #483D8B RGB 72,61,139 (SVG color keyword darkslateblue; a grayish-purple blue)
  4. Indigo: Hex #4B0082 | RGB 75,0,130 (SVG color keyword indigo; a purplish blue)
  5. Blue Violet: Hex #8A2BE2 | RGB 138,43,226 (SVG color keyword blueviolet)
  6. Cobalt Blue: Hex #3D59AB | RGB 61,89,171

Colors that push to the violet-purple side of blue can add a touch of mystery, hints of femininity. It adds warmth to the cool blue.

of 04

Shades of Cyan With Dark Orange

Pick a color around cyan and a warm reddish orange.

Lifewire / J. Bear

Medium to dark cyan is blue on the verge of green. Here, various medium blue and cyan shades are teamed with dark brownish orange colors.

In addition to its calming attributes, this darker shade of blue might carry the symbolism of green, such as balance, harmony, and stability. It gets a bit of warmth and energy when paired with brownish or reddish shades of orange. Brown is a natural, down-to-earth neutral color. Red and cyan are opposites on the color wheel with high contrast, but they aren't necessarily a great combination. Moving from red to orange and darker blues provides a more pleasing palette.

From darkest to lightest, the red-orange shown with each blue swatch in the above image are:

  • Deep Orange Red: ​Hex #CD3700 | RGB 205,55,0
  • Cadmium Orange: ​Hex #FF6103 | RGB 255,97,3
  • Numbers: Red Hex #FF0000 | RGB 255,0,0 (SVG/CSS color keyword red)

The blues are:

  1. Dark Royal Blue: Hex #27408B | RGB 39,64,139
  2. Deep Sky Blue: Hex #00688B | RGB 0,104,139 (not color keyword deepskyblue)
  3. Dark Slate Blue: Hex #2F4F4F RGB 47,79,79 (not color keyword darkslateblue)
  4. Dark Cyan: Hex #008B8B | RGB 0,139,139 (the greener side of blue)
  5. Manganese Blue: Hex #03A89E | RGB 3,168,158 (a blue turquoise color)
  6. Cyan (Aqua): Hex #00FFFF | RGB 0,255,255 (SVG color keyword cyan or aqua; a blue-green color)
of 04

Blue, Red, and Yellow

Blue Red Yellow and their blue complements

Lifewire / J. Bear

A split complementary triad takes one color (in this case, blue) and then grabs the colors on either side of that color's complement (opposite color on the color wheel). The complement of pure blue is pure yellow. Medium blue is opposite orange. Depending on what shade of blue you start with and how many intermediate colors you go through, you can match it up with colors from pinkish-red to yellow-green.

  1. Navy: Hex #000080 | RGB 0,0,128
  2. Bright Red: Hex #FE0004 | RGB 254,0,4
  3. Sunny Yellow: Hex #FFFB00 | RGB 255,251,0
  4. Dark Slate Blue: Hex #483D8B RGB 72,61,139 (SVG color keyword dark slate blue; a grayish-purple blue)
  5. Gold: Hex #FFD700 | RGB 255,215,0 (SVG color keyword gold)
  6. Chartreuse: Hex #7FFF00 | RGB 127,255,0
  7. Dark Cyan: Hex #008B8B | RGB 0,139,139 (the greener side of blue)
  8. Violet-Red: Hex #D02090 | RGB 208,32,144
  9. Dark Orange: Hex #C83200 | RGB 200,50,0 (not color keyword dark orange)

Darker shades of blue denote importance, confidence, power, authority, intelligence, stability, unity, and conservatism. Red is another power color, but it grabs attention more than blue. Yellow adds some brightness and joy. Using equal amounts of each color would make it childlike (think primary colors), like example #1. However, if you only use small doses of the red and yellow (or nearby colors) with a primarily dark blue color scheme, it's pretty suitable for adult projects that you don't want to appear too serious.

Color swatches of Blue and other colors with hex numbers
Lifewire / Marina Li
Was this page helpful?