Back to palettes

Palette

Steel Bridge Arch

Solid and enduring, echoing the formidable structure and cool tones of an old steel bridge.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Steel Bridge Arch reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Steel Bridge Arch.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#708090#6C7A89#546C7E#435E71#2C3E50

Palette guide

How to use Steel Bridge Arch

Overview

The "Steel Bridge Arch" palette is a robust collection of cool blue-greys, evoking the formidable and enduring structure of an old steel bridge. With deep tones like #2C3E50 (Dark Steel Blue) and #435E71 (Slate Blue), it grounds designs in strength and reliability. Mid-tones such as #546C7E (Cadet Blue) and #6C7A89 (Light Steel Blue) offer versatility for various elements, while #708090 (Slate Gray) provides a lighter, atmospheric touch. This palette is ideal for projects requiring a sense of stability, modern industrialism, and a sophisticated, cool-toned aesthetic, perfect for engineering or urban themes.

Best used for

  • Engineering firm branding and websites
  • Urban development project presentations
  • Sophisticated web interfaces and dashboards
  • Documentary film graphics and titles
  • Resilient product packaging and labels
  • Modern architectural renderings

Suggested color roles

primary

Use #2C3E50 as a strong, deep steel blue for primary branding, heavy text, or foundational elements.

secondary

Apply #435E71 for key structural components, headers, or darker background sections.

accent

Introduce #708090 for subtle highlights, active states, or as a lighter contrasting element.

background

A versatile #546C7E creates an atmospheric mid-tone backdrop that supports other palette colors well.

text

For dark backgrounds, a light cream or white works best. On lighter elements, #2C3E50 provides excellent readability for body text.

Accessibility notes

  • Due to the close tonal range, ensure sufficient contrast when pairing adjacent colors for text, e.g., #6C7A89 on #708090.
  • The darkest #2C3E50 provides excellent contrast for white or light grey text.
  • Avoid using #708090 for small body text on #6C7A89 backgrounds.
  • For optimal readability, use #2C3E50 for main body text on lighter backgrounds like #708090.

Recommended combinations

Deep Structural Base

Creates a robust, layered foundation, perfect for defining strong architectural forms.

#2C3E50 · #435E71 · #546C7E

Weathered Steel Surface

Provides a lighter, aged appearance, ideal for surfaces or secondary design elements.

#708090 · #6C7A89 · #435E71

Modern Edge Contrast

Offers strong contrast for clear hierarchy and a sleek, contemporary feel.

#2C3E50 · #708090 · #546C7E

CSS variables

:root {
  --steel-bridge-arch-1: #708090;
  --steel-bridge-arch-2: #6C7A89;
  --steel-bridge-arch-3: #546C7E;
  --steel-bridge-arch-4: #435E71;
  --steel-bridge-arch-5: #2C3E50;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steel-bridge-arch": {
        1: "#708090",
        2: "#6C7A89",
        3: "#546C7E",
        4: "#435E71",
        5: "#2C3E50",
      }
    }
  }
}

Related searches

steel blue grey paletteindustrial blue colorsbridge design aestheticcool grey brandingmodern engineering palette

Palette colors

Hex values

Color 1#708090
·
Color 2#6C7A89
·
Color 3#546C7E
·
Color 4#435E71
·
Color 5#2C3E50
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.4:1Fail
1.7:1Fail
2.7:1Fail
2
1.1:1Fail
1.3:1Fail
1.6:1Fail
2.5:1Fail
3
1.4:1Fail
1.3:1Fail
1.2:1Fail
2:1Fail
4
1.7:1Fail
1.6:1Fail
1.2:1Fail
1.6:1Fail
5
2.7:1Fail
2.5:1Fail
2:1Fail
1.6:1Fail

Similar palettes

More like Steel Bridge Arch

View all neutral
City Concrete Grind
Concrete Grid Lines
Concrete Loft Living
Gallery Wall Azure
Graffiti Alley Hue
Gritty Urban Canvas