Can I put text over listing photos?

Only on a solid or sufficiently opaque panel. Contrast over a photograph changes across the image, so no single ratio can be verified; the panel's surface colour and text pair is verified here.

Are map colours covered?

Map tiles are third-party, so they are not part of this palette. For choropleth-style maps use the sequential palette, checked against its background.

Why a copper primary?

It stays distinct from the blue most competitors use and works with natural materials in photos. It is a design choice; the contrast table shows the cost, namely a darker rust for text.

How do I check a brand colour from my agency?

Enter it with your page background in the contrast checker. If it fails, Fix will adjust lightness only.

OKLCH Studio · Accessible palettes · Industries

Accessible color palette for real estate (WCAG 2.2 verified)

Updated 2026-10-19

Property sites are image-led, and that is the main accessibility risk. Listing photos set the mood, but prices, addresses, bedrooms, open-house times and the contact button have to be readable without help from the photograph. When a price badge floats over a bright sky, it can easily fall below readable contrast.

The other recurring pattern is the filter and search interface: price sliders, toggle chips, map markers and result counts. Each of these uses colour to show state, selected or not, so the border and focus roles matter. This palette has verified roles for the selected chip, the focus ring and the borders, at 3:1 for non-text components under WCAG 1.4.11.

WCAG 2.2 AA is the baseline most often referenced for consumer sites, and in some regions housing services fall under accessibility rules. This palette holds text at AAA and every interactive colour at AA; it is not legal advice.

How to build a palette like this by hand is explained in the accessible colour palette guide; this page is the finished, verified result.

The palette: light and dark

Hex values are the sRGB result after gamut mapping. The oklch() values are those of the final hex, so converting either gives the same colour.

Appointment confirmed

Secondary text sits on the surface colour.

Link in primary · Accent text

Primary buttonSuccessWarningErrorInfo

Light theme

Background
#F8F7F3
oklch(0.976 0.005 95.1)
Sample text
Surface
#FFFEFA
oklch(0.997 0.005 95.1)
Sample text
Text
#1B1B17
oklch(0.221 0.008 107.0)
Sample text
Muted text
#595853
oklch(0.460 0.008 97.5)
Sample text
Primary
#8E5224
oklch(0.500 0.100 55.2)
Sample text
Primary foreground
#FCFCFA
oklch(0.991 0.003 106.4)
Sample text
Accent
#1D777B
oklch(0.5210 0.0804 199.47)
Sample text
Border
#908E89
oklch(0.647 0.008 88.7)
Sample text
Focus ring
#7F4413
oklch(0.4510 0.1005 55.08)
Sample text
Success
#008158
oklch(0.5333 0.1163 162.37)
Sample text
Success fill
#008557
oklch(0.5443 0.1224 160.36)
Sample text
Success fill label
#FCFCFA
oklch(0.991 0.003 106.4)
Sample text
Warning
#A16300
oklch(0.555 0.122 67.9)
Sample text
Warning fill
#FFBA44
oklch(0.8335 0.1508 76.88)
Sample text
Warning fill label
#100F0E
oklch(0.169 0.003 67.6)
Sample text
Error
#A21A1B
oklch(0.4603 0.1706 26.95)
Sample text
Error fill
#C8322E
oklch(0.551 0.187 27.1)
Sample text
Error fill label
#FCFCFA
oklch(0.991 0.003 106.4)
Sample text
Info
#2274AF
oklch(0.540 0.120 245.0)
Sample text
Info fill
#1377B9
oklch(0.5501 0.1324 245.13)
Sample text
Info fill label
#FCFCFA
oklch(0.991 0.003 106.4)
Sample text

Appointment confirmed

Secondary text sits on the surface colour.

Link in primary · Accent text

Primary buttonSuccessWarningErrorInfo

Dark theme

Background
#171614
oklch(0.201 0.004 84.6)
Sample text
Surface
#21201E
oklch(0.244 0.004 84.6)
Sample text
Text
#F0EEEA
oklch(0.950 0.006 84.6)
Sample text
Muted text
#BFBEB8
oklch(0.801 0.008 98.9)
Sample text
Primary
#F0AD7F
oklch(0.801 0.100 55.3)
Sample text
Primary foreground
#0D0D0C
oklch(0.159 0.002 106.6)
Sample text
Accent
#83D4D8
oklch(0.820 0.080 199.8)
Sample text
Border
#6C6B67
oklch(0.527 0.006 95.2)
Sample text
Focus ring
#F0AD7F
oklch(0.801 0.100 55.3)
Sample text
Success
#6CE5B5
oklch(0.839 0.130 164.9)
Sample text
Success fill
#3BCD9A
oklch(0.759 0.143 165.0)
Sample text
Success fill label
#100F0E
oklch(0.169 0.003 67.6)
Sample text
Warning
#FFBC56
oklch(0.839 0.140 75.1)
Sample text
Warning fill
#E9A11D
oklch(0.7605 0.1539 75.30)
Sample text
Warning fill label
#100F0E
oklch(0.169 0.003 67.6)
Sample text
Error
#F66D62
oklch(0.700 0.171 27.0)
Sample text
Error fill
#FF7A6D
oklch(0.732 0.165 27.5)
Sample text
Error fill label
#100F0E
oklch(0.169 0.003 67.6)
Sample text
Info
#71BFFF
oklch(0.780 0.120 245.0)
Sample text
Info fill
#61B9FF
oklch(0.760 0.132 244.8)
Sample text
Info fill label
#100F0E
oklch(0.169 0.003 67.6)
Sample text

Contrast table: every verified pair

Pass or fail uses the raw WCAG 2.x ratio; the ratio shown is floored to two decimals so a near miss is never rounded up. APCA Lc is signed: positive is dark on light, negative is light on dark. Each row opens the pair in the checker.

Light theme: 25 pairs
Pair	WCAG ratio	Target	Normal AA / AAA	Large AA / AAA	APCA Lc	APCA tier	Check
Text on background#1b1b17 on #f8f7f3	16.11:1	AAA 7:1	Pass / Pass	Pass / Pass	+99.3	Lc 75: body text	Open in checker
Text on surface#1b1b17 on #fffefa	17.11:1	AAA 7:1	Pass / Pass	Pass / Pass	+103.5	Lc 75: body text	Open in checker
Muted text on background#595853 on #f8f7f3	6.65:1	AA 4.5:1	Pass / Fail	Pass / Pass	+79.9	Lc 75: body text	Open in checker
Muted text on surface#595853 on #fffefa	7.06:1	AA 4.5:1	Pass / Pass	Pass / Pass	+84.1	Lc 75: body text	Open in checker
Primary as link text on background#8e5224 on #f8f7f3	5.79:1	AA 4.5:1	Pass / Fail	Pass / Pass	+75.8	Lc 75: body text	Open in checker
Primary as link text on surface#8e5224 on #fffefa	6.15:1	AA 4.5:1	Pass / Fail	Pass / Pass	+80.0	Lc 75: body text	Open in checker
Button label on primary#fcfcfa on #8e5224	6.04:1	AA 4.5:1	Pass / Fail	Pass / Pass	−83.7	Lc 75: body text	Open in checker
Accent text on background#1d777b on #f8f7f3	4.92:1	AA 4.5:1	Pass / Fail	Pass / Pass	+71.1	Lc 60: larger content text	Open in checker
Accent text on surface#1d777b on #fffefa	5.23:1	AA 4.5:1	Pass / Fail	Pass / Pass	+75.3	Lc 75: body text	Open in checker
Border on background#908e89 on #f8f7f3	3.05:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	+55.3	Lc 45: headlines and large text	Open in checker
Border on surface#908e89 on #fffefa	3.24:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	+59.4	Lc 45: headlines and large text	Open in checker
Focus ring on background#7f4413 on #f8f7f3	7.15:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	+81.4	Lc 75: body text	Open in checker
Focus ring on surface#7f4413 on #fffefa	7.59:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	+85.6	Lc 75: body text	Open in checker
Success text on background#008158 on #f8f7f3	4.57:1	AA 4.5:1	Pass / Fail	Pass / Pass	+68.6	Lc 60: larger content text	Open in checker
Success text on surface#008158 on #fffefa	4.86:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.7	Lc 60: larger content text	Open in checker
Success badge label on fill#fcfcfa on #008557	4.55:1	AA 4.5:1	Pass / Fail	Pass / Pass	−75.2	Lc 75: body text	Open in checker
Warning text on background#a16300 on #f8f7f3	4.55:1	AA 4.5:1	Pass / Fail	Pass / Pass	+68.7	Lc 60: larger content text	Open in checker
Warning text on surface#a16300 on #fffefa	4.83:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.8	Lc 60: larger content text	Open in checker
Warning badge label on fill#100f0e on #ffba44	11.26:1	AA 4.5:1	Pass / Pass	Pass / Pass	+73.2	Lc 60: larger content text	Open in checker
Error text on background#a21a1b on #f8f7f3	7.25:1	AA 4.5:1	Pass / Pass	Pass / Pass	+80.5	Lc 75: body text	Open in checker
Error text on surface#a21a1b on #fffefa	7.70:1	AA 4.5:1	Pass / Pass	Pass / Pass	+84.6	Lc 75: body text	Open in checker
Error badge label on fill#fcfcfa on #c8322e	5.17:1	AA 4.5:1	Pass / Fail	Pass / Pass	−78.3	Lc 75: body text	Open in checker
Info text on background#2274af on #f8f7f3	4.68:1	AA 4.5:1	Pass / Fail	Pass / Pass	+69.5	Lc 60: larger content text	Open in checker
Info text on surface#2274af on #fffefa	4.97:1	AA 4.5:1	Pass / Fail	Pass / Pass	+73.6	Lc 60: larger content text	Open in checker
Info badge label on fill#fcfcfa on #1377b9	4.68:1	AA 4.5:1	Pass / Fail	Pass / Pass	−76.2	Lc 75: body text	Open in checker

Dark theme: 25 pairs
Pair	WCAG ratio	Target	Normal AA / AAA	Large AA / AAA	APCA Lc	APCA tier	Check
Text on background#f0eeea on #171614	15.60:1	AAA 7:1	Pass / Pass	Pass / Pass	−95.9	Lc 75: body text	Open in checker
Text on surface#f0eeea on #21201e	14.04:1	AAA 7:1	Pass / Pass	Pass / Pass	−94.7	Lc 75: body text	Open in checker
Muted text on background#bfbeb8 on #171614	9.70:1	AA 4.5:1	Pass / Pass	Pass / Pass	−66.4	Lc 60: larger content text	Open in checker
Muted text on surface#bfbeb8 on #21201e	8.73:1	AA 4.5:1	Pass / Pass	Pass / Pass	−65.2	Lc 60: larger content text	Open in checker
Primary as link text on background#f0ad7f on #171614	9.46:1	AA 4.5:1	Pass / Pass	Pass / Pass	−65.2	Lc 60: larger content text	Open in checker
Primary as link text on surface#f0ad7f on #21201e	8.51:1	AA 4.5:1	Pass / Pass	Pass / Pass	−64.0	Lc 60: larger content text	Open in checker
Button label on primary#0d0d0c on #f0ad7f	10.17:1	AA 4.5:1	Pass / Pass	Pass / Pass	+67.2	Lc 60: larger content text	Open in checker
Accent text on background#83d4d8 on #171614	10.65:1	AA 4.5:1	Pass / Pass	Pass / Pass	−71.7	Lc 60: larger content text	Open in checker
Accent text on surface#83d4d8 on #21201e	9.59:1	AA 4.5:1	Pass / Pass	Pass / Pass	−70.5	Lc 60: larger content text	Open in checker
Border on background#6c6b67 on #171614	3.38:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	−24.2	Below Lc 30	Open in checker
Border on surface#6c6b67 on #21201e	3.05:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	−23.0	Below Lc 30	Open in checker
Focus ring on background#f0ad7f on #171614	9.46:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−65.2	Lc 60: larger content text	Open in checker
Focus ring on surface#f0ad7f on #21201e	8.51:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−64.0	Lc 60: larger content text	Open in checker
Success text on background#6ce5b5 on #171614	11.63:1	AA 4.5:1	Pass / Pass	Pass / Pass	−77.0	Lc 75: body text	Open in checker
Success text on surface#6ce5b5 on #21201e	10.47:1	AA 4.5:1	Pass / Pass	Pass / Pass	−75.8	Lc 75: body text	Open in checker
Success badge label on fill#100f0e on #3bcd9a	9.46:1	AA 4.5:1	Pass / Pass	Pass / Pass	+64.5	Lc 60: larger content text	Open in checker
Warning text on background#ffbc56 on #171614	10.83:1	AA 4.5:1	Pass / Pass	Pass / Pass	−72.7	Lc 60: larger content text	Open in checker
Warning text on surface#ffbc56 on #21201e	9.75:1	AA 4.5:1	Pass / Pass	Pass / Pass	−71.5	Lc 60: larger content text	Open in checker
Warning badge label on fill#100f0e on #e9a11d	8.73:1	AA 4.5:1	Pass / Pass	Pass / Pass	+60.6	Lc 60: larger content text	Open in checker
Error text on background#f66d62 on #171614	6.27:1	AA 4.5:1	Pass / Fail	Pass / Pass	−46.5	Lc 45: headlines and large text	Open in checker
Error text on surface#f66d62 on #21201e	5.64:1	AA 4.5:1	Pass / Fail	Pass / Pass	−45.3	Lc 45: headlines and large text	Open in checker
Error badge label on fill#100f0e on #ff7a6d	7.52:1	AA 4.5:1	Pass / Pass	Pass / Pass	+54.2	Lc 45: headlines and large text	Open in checker
Info text on background#71bfff on #171614	9.12:1	AA 4.5:1	Pass / Pass	Pass / Pass	−63.4	Lc 60: larger content text	Open in checker
Info text on surface#71bfff on #21201e	8.21:1	AA 4.5:1	Pass / Pass	Pass / Pass	−62.2	Lc 60: larger content text	Open in checker
Info badge label on fill#100f0e on #61b9ff	9.01:1	AA 4.5:1	Pass / Pass	Pass / Pass	+62.0	Lc 60: larger content text	Open in checker

Status colours and colour blindness

The four status fills were simulated for protanopia, deuteranopia and tritanopia (Machado et al., 2009). Success against error, the pair most often confused, must stay at least 6 ΔE-OK ×100 apart under every simulation. The other pairs are shown for information, so keep an icon and a word on every status.

Light theme, status fills
Pair	Normal vision	Protanopia	Deuteranopia	Tritanopia	Held to 6
success / warning	34.2	26.0	38.9	31.8	Shown only
success / error	28.6	16.6	6.3	33.0	Yes
success / info	17.2	16.3	15.4	3.3	Shown only
warning / error	31.8	42.0	37.4	22.6	Shown only
warning / info	40.0	34.2	44.5	31.2	Shown only
error / info	30.3	24.1	21.6	33.0	Shown only

Fills as simulated:Normal visionProtanopiaDeuteranopiaTritanopia

Dark theme, status fills
Pair	Normal vision	Protanopia	Deuteranopia	Tritanopia	Held to 6
success / warning	20.9	11.8	15.5	27.5	Shown only
success / error	28.8	15.3	6.4	31.3	Yes
success / info	17.7	15.2	14.3	3.8	Shown only
warning / error	13.3	13.2	10.5	5.5	Shown only
warning / info	28.5	26.0	28.7	26.2	Shown only
error / info	28.3	21.8	20.8	29.7	Shown only

Fills as simulated:Normal visionProtanopiaDeuteranopiaTritanopia

Why these colours

The primary is a copper at OKLCH hue 55 and chroma 0.10. Warm metallic tones suggest craft, brick and timber, and they let photos of homes stay the brightest thing on the page. At the AA lightness needed for text it turns into a deep rust brown, which pairs well with white button labels.

The accent is a teal at hue 200, the opposite side of the wheel from copper, used for map pins, saved-search markers and the selected filter chip. The neutrals are a stone grey with a slight warm tint. Using one warm and one cool hue also keeps the interface legible for most colour-vision deficiencies, because the pair differs in lightness as well as hue.

The generator solved 50 pairs (25 light, 25 dark), and all of them meet their target on the raw WCAG ratio. The tightest is success badge label on fill in the light theme at 4.55:1 against a target of 4.5:1. After gamut mapping to sRGB the light primary keeps 100% of the requested chroma; hue was held throughout.

How to use it

Put price and address on a solid surface-coloured label, not directly on the photo.
Show selected filters with a border, a check icon and the accent colour, not by fill colour alone.
Give map markers a shape or number as well as a colour, and keep them 3:1 against the map tiles you use; test with real tiles.
Use the success badge for Just listed or Open today, and the warning badge for Price reduced, always with text.
Keep the contact button in the primary colour with its verified label colour on every listing page.

Export

Generated from the verified values above, never typed by hand. Light and dark are both included.

CSS custom properties (hex, then oklch())

/* sRGB hex first: every browser. */
:root {
  --color-background: #f8f7f3;
  --color-surface: #fffefa;
  --color-text: #1b1b17;
  --color-text-muted: #595853;
  --color-primary: #8e5224;
  --color-primary-foreground: #fcfcfa;
  --color-accent: #1d777b;
  --color-border: #908e89;
  --color-focus-ring: #7f4413;
  --color-success: #008158;
  --color-success-solid: #008557;
  --color-success-solid-foreground: #fcfcfa;
  --color-warning: #a16300;
  --color-warning-solid: #ffba44;
  --color-warning-solid-foreground: #100f0e;
  --color-error: #a21a1b;
  --color-error-solid: #c8322e;
  --color-error-solid-foreground: #fcfcfa;
  --color-info: #2274af;
  --color-info-solid: #1377b9;
  --color-info-solid-foreground: #fcfcfa;
}
.dark {
  --color-background: #171614;
  --color-surface: #21201e;
  --color-text: #f0eeea;
  --color-text-muted: #bfbeb8;
  --color-primary: #f0ad7f;
  --color-primary-foreground: #0d0d0c;
  --color-accent: #83d4d8;
  --color-border: #6c6b67;
  --color-focus-ring: #f0ad7f;
  --color-success: #6ce5b5;
  --color-success-solid: #3bcd9a;
  --color-success-solid-foreground: #100f0e;
  --color-warning: #ffbc56;
  --color-warning-solid: #e9a11d;
  --color-warning-solid-foreground: #100f0e;
  --color-error: #f66d62;
  --color-error-solid: #ff7a6d;
  --color-error-solid-foreground: #100f0e;
  --color-info: #71bfff;
  --color-info-solid: #61b9ff;
  --color-info-solid-foreground: #100f0e;
}

/* oklch() where supported: the same colours, unclipped values of the hex above. */
@supports (color: oklch(0 0 0)) {
  :root {
    --color-background: oklch(0.976 0.005 95.1);
    --color-surface: oklch(0.997 0.005 95.1);
    --color-text: oklch(0.221 0.008 107.0);
    --color-text-muted: oklch(0.460 0.008 97.5);
    --color-primary: oklch(0.500 0.100 55.2);
    --color-primary-foreground: oklch(0.991 0.003 106.4);
    --color-accent: oklch(0.5210 0.0804 199.47);
    --color-border: oklch(0.647 0.008 88.7);
    --color-focus-ring: oklch(0.4510 0.1005 55.08);
    --color-success: oklch(0.5333 0.1163 162.37);
    --color-success-solid: oklch(0.5443 0.1224 160.36);
    --color-success-solid-foreground: oklch(0.991 0.003 106.4);
    --color-warning: oklch(0.555 0.122 67.9);
    --color-warning-solid: oklch(0.8335 0.1508 76.88);
    --color-warning-solid-foreground: oklch(0.169 0.003 67.6);
    --color-error: oklch(0.4603 0.1706 26.95);
    --color-error-solid: oklch(0.551 0.187 27.1);
    --color-error-solid-foreground: oklch(0.991 0.003 106.4);
    --color-info: oklch(0.540 0.120 245.0);
    --color-info-solid: oklch(0.5501 0.1324 245.13);
    --color-info-solid-foreground: oklch(0.991 0.003 106.4);
  }
  .dark {
    --color-background: oklch(0.201 0.004 84.6);
    --color-surface: oklch(0.244 0.004 84.6);
    --color-text: oklch(0.950 0.006 84.6);
    --color-text-muted: oklch(0.801 0.008 98.9);
    --color-primary: oklch(0.801 0.100 55.3);
    --color-primary-foreground: oklch(0.159 0.002 106.6);
    --color-accent: oklch(0.820 0.080 199.8);
    --color-border: oklch(0.527 0.006 95.2);
    --color-focus-ring: oklch(0.801 0.100 55.3);
    --color-success: oklch(0.839 0.130 164.9);
    --color-success-solid: oklch(0.759 0.143 165.0);
    --color-success-solid-foreground: oklch(0.169 0.003 67.6);
    --color-warning: oklch(0.839 0.140 75.1);
    --color-warning-solid: oklch(0.7605 0.1539 75.30);
    --color-warning-solid-foreground: oklch(0.169 0.003 67.6);
    --color-error: oklch(0.700 0.171 27.0);
    --color-error-solid: oklch(0.732 0.165 27.5);
    --color-error-solid-foreground: oklch(0.169 0.003 67.6);
    --color-info: oklch(0.780 0.120 245.0);
    --color-info-solid: oklch(0.760 0.132 244.8);
    --color-info-solid-foreground: oklch(0.169 0.003 67.6);
  }
}

Tailwind CSS v4 @theme

@theme {
  /* light */
  --color-background: oklch(0.976 0.005 95.1); /* #f8f7f3 */
  --color-surface: oklch(0.997 0.005 95.1); /* #fffefa */
  --color-text: oklch(0.221 0.008 107.0); /* #1b1b17 */
  --color-text-muted: oklch(0.460 0.008 97.5); /* #595853 */
  --color-primary: oklch(0.500 0.100 55.2); /* #8e5224 */
  --color-primary-foreground: oklch(0.991 0.003 106.4); /* #fcfcfa */
  --color-accent: oklch(0.5210 0.0804 199.47); /* #1d777b */
  --color-border: oklch(0.647 0.008 88.7); /* #908e89 */
  --color-focus-ring: oklch(0.4510 0.1005 55.08); /* #7f4413 */
  --color-success: oklch(0.5333 0.1163 162.37); /* #008158 */
  --color-success-solid: oklch(0.5443 0.1224 160.36); /* #008557 */
  --color-success-solid-foreground: oklch(0.991 0.003 106.4); /* #fcfcfa */
  --color-warning: oklch(0.555 0.122 67.9); /* #a16300 */
  --color-warning-solid: oklch(0.8335 0.1508 76.88); /* #ffba44 */
  --color-warning-solid-foreground: oklch(0.169 0.003 67.6); /* #100f0e */
  --color-error: oklch(0.4603 0.1706 26.95); /* #a21a1b */
  --color-error-solid: oklch(0.551 0.187 27.1); /* #c8322e */
  --color-error-solid-foreground: oklch(0.991 0.003 106.4); /* #fcfcfa */
  --color-info: oklch(0.540 0.120 245.0); /* #2274af */
  --color-info-solid: oklch(0.5501 0.1324 245.13); /* #1377b9 */
  --color-info-solid-foreground: oklch(0.991 0.003 106.4); /* #fcfcfa */
  /* dark: use as dark:bg-background-dark, or remap under a .dark selector */
  --color-background-dark: oklch(0.201 0.004 84.6); /* #171614 */
  --color-surface-dark: oklch(0.244 0.004 84.6); /* #21201e */
  --color-text-dark: oklch(0.950 0.006 84.6); /* #f0eeea */
  --color-text-muted-dark: oklch(0.801 0.008 98.9); /* #bfbeb8 */
  --color-primary-dark: oklch(0.801 0.100 55.3); /* #f0ad7f */
  --color-primary-foreground-dark: oklch(0.159 0.002 106.6); /* #0d0d0c */
  --color-accent-dark: oklch(0.820 0.080 199.8); /* #83d4d8 */
  --color-border-dark: oklch(0.527 0.006 95.2); /* #6c6b67 */
  --color-focus-ring-dark: oklch(0.801 0.100 55.3); /* #f0ad7f */
  --color-success-dark: oklch(0.839 0.130 164.9); /* #6ce5b5 */
  --color-success-solid-dark: oklch(0.759 0.143 165.0); /* #3bcd9a */
  --color-success-solid-foreground-dark: oklch(0.169 0.003 67.6); /* #100f0e */
  --color-warning-dark: oklch(0.839 0.140 75.1); /* #ffbc56 */
  --color-warning-solid-dark: oklch(0.7605 0.1539 75.30); /* #e9a11d */
  --color-warning-solid-foreground-dark: oklch(0.169 0.003 67.6); /* #100f0e */
  --color-error-dark: oklch(0.700 0.171 27.0); /* #f66d62 */
  --color-error-solid-dark: oklch(0.732 0.165 27.5); /* #ff7a6d */
  --color-error-solid-foreground-dark: oklch(0.169 0.003 67.6); /* #100f0e */
  --color-info-dark: oklch(0.780 0.120 245.0); /* #71bfff */
  --color-info-solid-dark: oklch(0.760 0.132 244.8); /* #61b9ff */
  --color-info-solid-foreground-dark: oklch(0.169 0.003 67.6); /* #100f0e */
}

shadcn/ui variables (:root and .dark)

:root {
  --background: oklch(0.976 0.005 95.1);
  --foreground: oklch(0.221 0.008 107.0);
  --card: oklch(0.997 0.005 95.1);
  --card-foreground: oklch(0.221 0.008 107.0);
  --popover: oklch(0.997 0.005 95.1);
  --popover-foreground: oklch(0.221 0.008 107.0);
  --primary: oklch(0.500 0.100 55.2);
  --primary-foreground: oklch(0.991 0.003 106.4);
  --secondary: oklch(0.997 0.005 95.1);
  --secondary-foreground: oklch(0.221 0.008 107.0);
  --muted: oklch(0.997 0.005 95.1);
  --muted-foreground: oklch(0.460 0.008 97.5);
  --accent: oklch(0.997 0.005 95.1);
  --accent-foreground: oklch(0.221 0.008 107.0);
  --destructive: oklch(0.551 0.187 27.1);
  --destructive-foreground: oklch(0.991 0.003 106.4);
  --border: oklch(0.647 0.008 88.7);
  --input: oklch(0.647 0.008 88.7);
  --ring: oklch(0.4510 0.1005 55.08);
  --success: oklch(0.5443 0.1224 160.36);
  --success-foreground: oklch(0.991 0.003 106.4);
  --warning: oklch(0.8335 0.1508 76.88);
  --warning-foreground: oklch(0.169 0.003 67.6);
  --info: oklch(0.5501 0.1324 245.13);
  --info-foreground: oklch(0.991 0.003 106.4);
  --brand-accent: oklch(0.5210 0.0804 199.47);
}

.dark {
  --background: oklch(0.201 0.004 84.6);
  --foreground: oklch(0.950 0.006 84.6);
  --card: oklch(0.244 0.004 84.6);
  --card-foreground: oklch(0.950 0.006 84.6);
  --popover: oklch(0.244 0.004 84.6);
  --popover-foreground: oklch(0.950 0.006 84.6);
  --primary: oklch(0.801 0.100 55.3);
  --primary-foreground: oklch(0.159 0.002 106.6);
  --secondary: oklch(0.244 0.004 84.6);
  --secondary-foreground: oklch(0.950 0.006 84.6);
  --muted: oklch(0.244 0.004 84.6);
  --muted-foreground: oklch(0.801 0.008 98.9);
  --accent: oklch(0.244 0.004 84.6);
  --accent-foreground: oklch(0.950 0.006 84.6);
  --destructive: oklch(0.732 0.165 27.5);
  --destructive-foreground: oklch(0.169 0.003 67.6);
  --border: oklch(0.527 0.006 95.2);
  --input: oklch(0.527 0.006 95.2);
  --ring: oklch(0.801 0.100 55.3);
  --success: oklch(0.759 0.143 165.0);
  --success-foreground: oklch(0.169 0.003 67.6);
  --warning: oklch(0.7605 0.1539 75.30);
  --warning-foreground: oklch(0.169 0.003 67.6);
  --info: oklch(0.760 0.132 244.8);
  --info-foreground: oklch(0.169 0.003 67.6);
  --brand-accent: oklch(0.820 0.080 199.8);
}

Design tokens (DTCG-style JSON)

{
  "color": {
    "light": {
      "background": {
        "$type": "color",
        "$value": "oklch(0.976 0.005 95.1)",
        "$description": "sRGB #f8f7f3"
      },
      "surface": {
        "$type": "color",
        "$value": "oklch(0.997 0.005 95.1)",
        "$description": "sRGB #fffefa"
      },
      "text": {
        "$type": "color",
        "$value": "oklch(0.221 0.008 107.0)",
        "$description": "sRGB #1b1b17"
      },
      "text-muted": {
        "$type": "color",
        "$value": "oklch(0.460 0.008 97.5)",
        "$description": "sRGB #595853"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.500 0.100 55.2)",
        "$description": "sRGB #8e5224"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.991 0.003 106.4)",
        "$description": "sRGB #fcfcfa"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.5210 0.0804 199.47)",
        "$description": "sRGB #1d777b"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.647 0.008 88.7)",
        "$description": "sRGB #908e89"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.4510 0.1005 55.08)",
        "$description": "sRGB #7f4413"
      },
      "success": {
        "$type": "color",
        "$value": "oklch(0.5333 0.1163 162.37)",
        "$description": "sRGB #008158"
      },
      "success-solid": {
        "$type": "color",
        "$value": "oklch(0.5443 0.1224 160.36)",
        "$description": "sRGB #008557"
      },
      "success-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.991 0.003 106.4)",
        "$description": "sRGB #fcfcfa"
      },
      "warning": {
        "$type": "color",
        "$value": "oklch(0.555 0.122 67.9)",
        "$description": "sRGB #a16300"
      },
      "warning-solid": {
        "$type": "color",
        "$value": "oklch(0.8335 0.1508 76.88)",
        "$description": "sRGB #ffba44"
      },
      "warning-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.169 0.003 67.6)",
        "$description": "sRGB #100f0e"
      },
      "error": {
        "$type": "color",
        "$value": "oklch(0.4603 0.1706 26.95)",
        "$description": "sRGB #a21a1b"
      },
      "error-solid": {
        "$type": "color",
        "$value": "oklch(0.551 0.187 27.1)",
        "$description": "sRGB #c8322e"
      },
      "error-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.991 0.003 106.4)",
        "$description": "sRGB #fcfcfa"
      },
      "info": {
        "$type": "color",
        "$value": "oklch(0.540 0.120 245.0)",
        "$description": "sRGB #2274af"
      },
      "info-solid": {
        "$type": "color",
        "$value": "oklch(0.5501 0.1324 245.13)",
        "$description": "sRGB #1377b9"
      },
      "info-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.991 0.003 106.4)",
        "$description": "sRGB #fcfcfa"
      }
    },
    "dark": {
      "background": {
        "$type": "color",
        "$value": "oklch(0.201 0.004 84.6)",
        "$description": "sRGB #171614"
      },
      "surface": {
        "$type": "color",
        "$value": "oklch(0.244 0.004 84.6)",
        "$description": "sRGB #21201e"
      },
      "text": {
        "$type": "color",
        "$value": "oklch(0.950 0.006 84.6)",
        "$description": "sRGB #f0eeea"
      },
      "text-muted": {
        "$type": "color",
        "$value": "oklch(0.801 0.008 98.9)",
        "$description": "sRGB #bfbeb8"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.801 0.100 55.3)",
        "$description": "sRGB #f0ad7f"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.159 0.002 106.6)",
        "$description": "sRGB #0d0d0c"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.820 0.080 199.8)",
        "$description": "sRGB #83d4d8"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.527 0.006 95.2)",
        "$description": "sRGB #6c6b67"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.801 0.100 55.3)",
        "$description": "sRGB #f0ad7f"
      },
      "success": {
        "$type": "color",
        "$value": "oklch(0.839 0.130 164.9)",
        "$description": "sRGB #6ce5b5"
      },
      "success-solid": {
        "$type": "color",
        "$value": "oklch(0.759 0.143 165.0)",
        "$description": "sRGB #3bcd9a"
      },
      "success-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.169 0.003 67.6)",
        "$description": "sRGB #100f0e"
      },
      "warning": {
        "$type": "color",
        "$value": "oklch(0.839 0.140 75.1)",
        "$description": "sRGB #ffbc56"
      },
      "warning-solid": {
        "$type": "color",
        "$value": "oklch(0.7605 0.1539 75.30)",
        "$description": "sRGB #e9a11d"
      },
      "warning-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.169 0.003 67.6)",
        "$description": "sRGB #100f0e"
      },
      "error": {
        "$type": "color",
        "$value": "oklch(0.700 0.171 27.0)",
        "$description": "sRGB #f66d62"
      },
      "error-solid": {
        "$type": "color",
        "$value": "oklch(0.732 0.165 27.5)",
        "$description": "sRGB #ff7a6d"
      },
      "error-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.169 0.003 67.6)",
        "$description": "sRGB #100f0e"
      },
      "info": {
        "$type": "color",
        "$value": "oklch(0.780 0.120 245.0)",
        "$description": "sRGB #71bfff"
      },
      "info-solid": {
        "$type": "color",
        "$value": "oklch(0.760 0.132 244.8)",
        "$description": "sRGB #61b9ff"
      },
      "info-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.169 0.003 67.6)",
        "$description": "sRGB #100f0e"
      }
    }
  }
}

Open in the studio

Take the primary colour into the picker, build a tonal scale from it, or check any pair of your own.

Open #8E5224 in the OKLCH picker →Build a tonal scale →Check a pair

FAQ

Can I put text over listing photos?: Only on a solid or sufficiently opaque panel. Contrast over a photograph changes across the image, so no single ratio can be verified; the panel's surface colour and text pair is verified here.
Are map colours covered?: Map tiles are third-party, so they are not part of this palette. For choropleth-style maps use the sequential palette, checked against its background.
Why a copper primary?: It stays distinct from the blue most competitors use and works with natural materials in photos. It is a design choice; the contrast table shows the cost, namely a darker rust for text.
How do I check a brand colour from my agency?: Enter it with your page background in the contrast checker. If it fails, Fix will adjust lightness only.

← All accessible palettes