Palette

Steel Bridge Vista

A robust, architectural palette reflecting the strength and simplicity of steel structures.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Steel Bridge Vista 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 Vista.

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

Data visualization

#1C1C1C#3C3C3C#6C6C6C#9C9C9C#CCCCCC

Palette guide

How to use Steel Bridge Vista

Overview

The "Steel Bridge Vista" palette is a robust, architectural monochrome collection that embodies the strength and simplicity of steel structures. Spanning from the profound #1C1C1C (Deep Charcoal) to the airy #CCCCCC (Light Grey), it offers a versatile range of greys. Intermediate tones like #3C3C3C (Dark Grey), #6C6C6C (Medium Grey), and #9C9C9C (Silver) provide excellent depth and contrast for various design elements. This palette is perfect for projects that demand a sense of urbanity, modernism, and unyielding strength, reflecting the clean lines and formidable presence of steel in construction.

Best used for

Urban landscape photography portfolios
Construction company websites and branding
Minimalist branding for architectural firms
Technical documentation and reports
Modern art installations and gallery exhibits
High-contrast user interfaces

Suggested color roles

primary

Designate #1C1C1C as the deepest, most grounding color for strong headings, borders, or solid backgrounds.

secondary

Use #3C3C3C for prominent elements, navigation, or darker sections.

accent

Apply #CCCCCC (Light Grey) for subtle highlights, clean dividers, or as a contrasting background.

background

A versatile #9C9C9C serves as an excellent neutral mid-tone background, offering balance.

text

For optimal readability, use #1C1C1C for text on light backgrounds like #CCCCCC, and #CCCCCC for text on dark backgrounds like #1C1C1C.

Accessibility notes

Ensure sufficient contrast between #6C6C6C text and #9C9C9C backgrounds for readability.
The darkest #1C1C1C offers excellent contrast for white or #CCCCCC text.
Avoid pairing #9C9C9C text on #CCCCCC as the contrast will be insufficient for most users.
For body text, use high-contrast combinations such as #1C1C1C on #CCCCCC or #3C3C3C on #9C9C9C.

Recommended combinations

Deep Foundations

Creates a strong, grounded base, ideal for headers, footers, or structural elements.

#1C1C1C · #3C3C3C · #6C6C6C

Vista Horizon

Offers a lighter, expansive feel, perfect for content areas or backgrounds.

#CCCCCC · #9C9C9C · #6C6C6C

Architectural Contrast

Provides sharp visual definition, excellent for data visualization or strong branding.

#1C1C1C · #CCCCCC · #3C3C3C

CSS variables

:root {
  --steel-bridge-vista-1: #1C1C1C;
  --steel-bridge-vista-2: #3C3C3C;
  --steel-bridge-vista-3: #6C6C6C;
  --steel-bridge-vista-4: #9C9C9C;
  --steel-bridge-vista-5: #CCCCCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steel-bridge-vista": {
        1: "#1C1C1C",
        2: "#3C3C3C",
        3: "#6C6C6C",
        4: "#9C9C9C",
        5: "#CCCCCC",
      }
    }
  }
}

Hex values

Color 1#1C1C1C

Color 2#3C3C3C

Color 3#6C6C6C

Color 4#9C9C9C

Color 5#CCCCCC

Accessibility

Contrast checker

1.5:1Fail

3.2:1AA18

6.2:1AA

10.6:1AAA

1.5:1Fail

2.1:1Fail

4:1AA18

6.9:1AA

3.2:1AA18

2.1:1Fail

1.9:1Fail

3.3:1AA18

6.2:1AA

4:1AA18

1.9:1Fail

1.7:1Fail

10.6:1AAA

6.9:1AA

3.3:1AA18

1.7:1Fail

Similar palettes

More like Steel Bridge Vista