What colors are in the Cold Steel palette?

The Cold Steel palette has 5 colors: #181C21, #333B44, #61707E, #26B6D6, #EDF1F3.

Where can I use this palette?

It's a Neutral palette — well suited to dashboards, minimal ui, corporate sites, dark-mode surfaces.

Is the Cold Steel palette accessible?

Its darkest and lightest colors have a contrast ratio of 15.06:1. 4 color pairs in it meet WCAG AA for text.

How do I use this palette in CSS?

Copy the CSS custom properties (:root variables) from the Export section, or grab any single hex with one click.

Can I export the Cold Steel palette?

Yes — export to CSS, SCSS, Tailwind config or JSON, or copy all hex codes at once.

Text #181C21 Graphite Secondary #333B44 Onyx Accent #61707E Dim Gray Primary #26B6D6 Picton Blue Surface #EDF1F3 Cool White

Cold Steel

Minimal Hardware & B2B 5 colors

Blue-grey steel with a single sharp cyan. Cool, industrial, unsentimental — the accent is the only degree of warmth the system allows itself.

Open in generator All palettes

Text Graphite — #181C21

Secondary Onyx — #333B44

Accent Dim Gray — #61707E

Primary Picton Blue — #26B6D6

Surface Cool White — #EDF1F3

Contrast matrix

Text on Surface 15.06 AAA

Primary on Surface 2.11 Fail

Text on Secondary 1.51 Fail

Surface on Primary 2.11 Fail

Accent on Text 3.36 AA Large

Ratios are WCAG 2 contrast between the roles as assigned above. AA needs 4.5:1 for body text, 3:1 for large text.

Export tokens

:root {
  --text: #181C21;
  --secondary: #333B44;
  --accent: #61707E;
  --primary: #26B6D6;
  --surface: #EDF1F3;
}

$cold-steel-text: #181C21;
$cold-steel-secondary: #333B44;
$cold-steel-accent: #61707E;
$cold-steel-primary: #26B6D6;
$cold-steel-surface: #EDF1F3;

// tailwind.config.js — theme.extend.colors
colors: {
  'cold-steel': {
    'text': '#181C21',
    'secondary': '#333B44',
    'accent': '#61707E',
    'primary': '#26B6D6',
    'surface': '#EDF1F3',
  },
}

{
    "cold-steel": {
        "text": {
            "value": "#181C21",
            "type": "color"
        },
        "secondary": {
            "value": "#333B44",
            "type": "color"
        },
        "accent": {
            "value": "#61707E",
            "type": "color"
        },
        "primary": {
            "value": "#26B6D6",
            "type": "color"
        },
        "surface": {
            "value": "#EDF1F3",
            "type": "color"
        }
    }
}

{
    "text": "#181C21",
    "secondary": "#333B44",
    "accent": "#61707E",
    "primary": "#26B6D6",
    "surface": "#EDF1F3"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#181C21
#333B44
#61707E
#26B6D6
#EDF1F3

Download for Procreate

How the roles work

SurfaceThe lightest color — page and card backgrounds.

TextThe darkest color — body text and high-contrast UI.

PrimaryThe most chromatic middle — buttons, links, the one color that pushes.

AccentThe second most chromatic — badges, highlights, states.

SecondaryEverything else — fills, borders, supporting surfaces.

Cold Steel

Contrast matrix

Export tokens

How the roles work

Related palettes