What are the hex codes in the Circuit Magenta & Ash palette?

The Circuit Magenta & Ash color palette consists of Ink #12212D, Magenta #CB226A, Ash #9DBAD1, Frost #ECF6FE.

How should I use the Circuit Magenta & Ash palette on a website?

Use Frost #ECF6FE as the background, Ink #12212D for text, Magenta #CB226A for buttons and links, and Ash #9DBAD1 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Ink on Frost at 14.97:1.

Which colors in Circuit Magenta & Ash have enough contrast for text?

The highest-contrast pair is #12212D on #ECF6FE with a ratio of 14.97:1, which passes WCAG AA for normal text.

#12212DInk

#CB226AMagenta

#9DBAD1Ash

#ECF6FEFrost

Circuit Magenta & Ash color palette

Tech Minimal White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Ink	`#12212D`	`rgb(18, 33, 45)`	`hsl(207, 43%, 12%)`	`oklch(24.0% 0.031 244)`
Magenta	`#CB226A`	`rgb(203, 34, 106)`	`hsl(334, 71%, 46%)`	`oklch(55.7% 0.206 2)`
Ash	`#9DBAD1`	`rgb(157, 186, 209)`	`hsl(207, 36%, 72%)`	`oklch(77.5% 0.046 242)`
Frost	`#ECF6FE`	`rgb(236, 246, 254)`	`hsl(207, 90%, 96%)`	`oklch(96.8% 0.015 242)`

Why it works and how to use it

Circuit Magenta & Ash is a split color palette tagged tech, minimal, white. The hues span about 127°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Magenta takes the lead while the rest support. Lightness runs from 12% to 96%. Well suited to a SaaS landing page or dashboard.

Background: Frost (#ECF6FE) is the lightest color, so it belongs on large surfaces.
Text: Ink (#12212D) on #ECF6FE gives 14.97:1, passing WCAG AAA.
Primary: Magenta (#CB226A) is the most saturated mid-tone; use it for buttons and links (4.82:1 against the background, fine for UI elements).
Accent: Ash (#9DBAD1) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Ink on Frost at 14.97:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Circuit Magenta & Ash

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

#12212D

#CB226A

#9DBAD1

#ECF6FE

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
`#12212D` on `#ECF6FE`	Aa	14.97:1	AAA
`#12212D` on `#9DBAD1`	Aa	8.1:1	AAA
`#CB226A` on `#ECF6FE`	Aa	4.82:1	AA
`#12212D` on `#CB226A`	Aa	3.1:1	AA large only
`#CB226A` on `#9DBAD1`	Aa	2.61:1	Fail
`#9DBAD1` on `#ECF6FE`	Aa	1.85:1	Fail

Similar palettes 24 more in this mood