What are the hex codes in the Silver Frost palette?

The Silver Frost color palette consists of Iron #3B3F47, Pewter #8C93A0, Fog #D5DAE3, Smoke #F7F8FA.

How should I use the Silver Frost palette on a website?

Use Smoke #F7F8FA as the background, Iron #3B3F47 for text, Fog #D5DAE3 for buttons and links, and Pewter #8C93A0 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Iron on Smoke at 9.94:1.

Which colors in Silver Frost have enough contrast for text?

The highest-contrast pair is #3B3F47 on #F7F8FA with a ratio of 9.94:1, which passes WCAG AA for normal text.

#3B3F47Iron

#8C93A0Pewter

#D5DAE3Fog

#F7F8FASmoke

Silver Frost color palette

Winter Monochrome Minimal Gray White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Iron	`#3B3F47`	`rgb(59, 63, 71)`	`hsl(220, 9%, 25%)`	`oklch(36.7% 0.015 264)`
Pewter	`#8C93A0`	`rgb(140, 147, 160)`	`hsl(219, 10%, 59%)`	`oklch(66.2% 0.021 263)`
Fog	`#D5DAE3`	`rgb(213, 218, 227)`	`hsl(219, 20%, 86%)`	`oklch(88.7% 0.013 262)`
Smoke	`#F7F8FA`	`rgb(247, 248, 250)`	`hsl(220, 23%, 97%)`	`oklch(97.9% 0.003 265)`

Why it works and how to use it

Silver Frost is a muted neutral-based color palette tagged winter, monochrome, minimal. Smoke is the only saturated color here, so it does all the talking against a neutral base. Every color is softened, so it works well as a background system for text-heavy layouts. The overall temperature is cool.

It works because the lightness range is wide (25% to 97%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.

Background: Smoke (#F7F8FA) is the lightest color, so it belongs on large surfaces.
Text: Iron (#3B3F47) on #F7F8FA gives 9.94:1, passing WCAG AAA.
Primary: Fog (#D5DAE3) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Pewter (#8C93A0) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Iron on Smoke at 9.94:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Silver Frost

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#3B3F47

#8C93A0

#D5DAE3

#F7F8FA

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#3B3F47` on `#F7F8FA`	Aa	9.94:1	AAA
`#3B3F47` on `#D5DAE3`	Aa	7.53:1	AAA
`#3B3F47` on `#8C93A0`	Aa	3.42:1	AA large only
`#8C93A0` on `#F7F8FA`	Aa	2.91:1	Fail
`#8C93A0` on `#D5DAE3`	Aa	2.2:1	Fail
`#D5DAE3` on `#F7F8FA`	Aa	1.32:1	Fail

Similar palettes 24 more in this mood