What are the hex codes in the Brick Studio palette?

The Brick Studio color palette consists of Linen #F5F0EC, Fog #E0CFC6, Chestnut #A3432F, Espresso #3B1F19.

How should I use the Brick Studio palette on a website?

Use Linen #F5F0EC as the background, Espresso #3B1F19 for text, Chestnut #A3432F for buttons and links, and Fog #E0CFC6 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Linen on Espresso at 13.29:1.

Which colors in Brick Studio have enough contrast for text?

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

#F5F0ECLinen

#E0CFC6Fog

#A3432FChestnut

#3B1F19Espresso

Brick Studio color palette

Vintage Minimal White Gray Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Linen	`#F5F0EC`	`rgb(245, 240, 236)`	`hsl(27, 31%, 94%)`	`oklch(95.8% 0.008 61)`
Fog	`#E0CFC6`	`rgb(224, 207, 198)`	`hsl(21, 30%, 83%)`	`oklch(86.6% 0.023 50)`
Chestnut	`#A3432F`	`rgb(163, 67, 47)`	`hsl(10, 55%, 41%)`	`oklch(50.8% 0.132 33)`
Espresso	`#3B1F19`	`rgb(59, 31, 25)`	`hsl(11, 40%, 16%)`	`oklch(27.5% 0.045 33)`

Why it works and how to use it

Brick Studio is a monochromatic color palette tagged vintage, minimal, white. All four colors sit within 17° of hue, so the scheme reads as one color explored across light and dark. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.

With 4 chromatic colors, Chestnut takes the lead while the rest support. Lightness runs from 16% to 94%. Well suited to websites, presentations and branding.

Background: Linen (#F5F0EC) is the lightest color, so it belongs on large surfaces.
Text: Espresso (#3B1F19) on #F5F0EC gives 13.29:1, passing WCAG AAA.
Primary: Chestnut (#A3432F) is the most saturated mid-tone; use it for buttons and links (5.46:1 against the background, fine for UI elements).
Accent: Fog (#E0CFC6) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Linen on Espresso at 13.29:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Brick Studio

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

#F5F0EC

#E0CFC6

#A3432F

#3B1F19

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
`#F5F0EC` on `#3B1F19`	Aa	13.29:1	AAA
`#E0CFC6` on `#3B1F19`	Aa	9.96:1	AAA
`#F5F0EC` on `#A3432F`	Aa	5.46:1	AA
`#E0CFC6` on `#A3432F`	Aa	4.09:1	AA large only
`#A3432F` on `#3B1F19`	Aa	2.44:1	Fail
`#F5F0EC` on `#E0CFC6`	Aa	1.33:1	Fail

Similar palettes 24 more in this mood