Why not navy, the usual legal colour?

Navy is used by many firms and by the banking palette. Oxblood and brass give a different, equally traditional feel. Swap the hue if your brand needs it; the lightness will be re-solved.

Does a law firm have to meet WCAG?

That depends on jurisdiction, the type of organisation and any contracts. WCAG AA is a widely used reference, but this page does not advise on obligations.

Is the brass accent usable as text?

In the light theme the accent text value is a darkened brass that meets 4.5:1 on the page and card colours, listed in the table. A bright brass is only suitable as a decorative fill.

How do I test a client portal?

Check each role pair here, then test your actual screens with the contrast checker and a keyboard-only pass for focus visibility.

OKLCH Studio · Accessible palettes · Industries

Accessible color palette for legal (WCAG 2.2 verified)

Updated 2026-10-19

A law firm website works as a credential and as a reference library. Prospective clients check whether a firm looks credible, and then read long practice-area pages, articles and attorney biographies. Readers include people in distress, such as someone facing a dispute or a charge, so clarity matters more than flair.

Legal sites also face the irony of being held to the standard they advise on. Accessibility complaints do get made about law firm and court websites, and WCAG 2.2 AA is the level most commonly referenced. This palette meets AA for all listed pairs and holds body text at AAA, which suits the long paragraphs of legal explanation. This page is not legal advice.

Documents are central: PDFs of agreements, forms, and downloadable guides. Colour in those documents should follow the same text and background pairs, because contrast problems often appear first in print and exported files.

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
#F8F6F4
oklch(0.974 0.003 67.8)
Sample text
Surface
#FFFEFB
oklch(0.997 0.004 91.4)
Sample text
Text
#1C1A18
oklch(0.219 0.005 67.6)
Sample text
Muted text
#5A5754
oklch(0.459 0.006 67.7)
Sample text
Primary
#8F4D50
oklch(0.500 0.089 17.9)
Sample text
Primary foreground
#FCFCFB
oklch(0.991 0.001 106.4)
Sample text
Accent
#846324
oklch(0.521 0.090 80.4)
Sample text
Border
#918D8A
oklch(0.646 0.007 59.6)
Sample text
Focus ring
#803F42
oklch(0.451 0.090 18.4)
Sample text
Success
#008158
oklch(0.5333 0.1163 162.37)
Sample text
Success fill
#008558
oklch(0.545 0.122 160.9)
Sample text
Success fill label
#FCFCFB
oklch(0.991 0.001 106.4)
Sample text
Warning
#A06300
oklch(0.5541 0.1212 68.45)
Sample text
Warning fill
#FFBA44
oklch(0.8335 0.1508 76.88)
Sample text
Warning fill label
#100F0F
oklch(0.170 0.002 17.3)
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
#FCFCFB
oklch(0.991 0.001 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
#FCFCFB
oklch(0.991 0.001 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
#22201E
oklch(0.245 0.005 67.6)
Sample text
Text
#F1EEEB
oklch(0.951 0.005 67.8)
Sample text
Muted text
#C0BDBA
oklch(0.800 0.005 67.7)
Sample text
Primary
#F2A6A8
oklch(0.799 0.090 17.5)
Sample text
Primary foreground
#0E0D0C
oklch(0.160 0.003 67.6)
Sample text
Accent
#E3BE80
oklch(0.820 0.090 79.9)
Sample text
Border
#6D6B67
oklch(0.528 0.007 84.6)
Sample text
Focus ring
#F2A6A8
oklch(0.799 0.090 17.5)
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
#100F0F
oklch(0.170 0.002 17.3)
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
#100F0F
oklch(0.170 0.002 17.3)
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
#100F0F
oklch(0.170 0.002 17.3)
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
#100F0F
oklch(0.170 0.002 17.3)
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#1c1a18 on #f8f6f4	16.09:1	AAA 7:1	Pass / Pass	Pass / Pass	+99.0	Lc 75: body text	Open in checker
Text on surface#1c1a18 on #fffefb	17.20:1	AAA 7:1	Pass / Pass	Pass / Pass	+103.6	Lc 75: body text	Open in checker
Muted text on background#5a5754 on #f8f6f4	6.65:1	AA 4.5:1	Pass / Fail	Pass / Pass	+79.7	Lc 75: body text	Open in checker
Muted text on surface#5a5754 on #fffefb	7.11:1	AA 4.5:1	Pass / Pass	Pass / Pass	+84.3	Lc 75: body text	Open in checker
Primary as link text on background#8f4d50 on #f8f6f4	5.82:1	AA 4.5:1	Pass / Fail	Pass / Pass	+75.8	Lc 75: body text	Open in checker
Primary as link text on surface#8f4d50 on #fffefb	6.22:1	AA 4.5:1	Pass / Fail	Pass / Pass	+80.4	Lc 75: body text	Open in checker
Button label on primary#fcfcfb on #8f4d50	6.11:1	AA 4.5:1	Pass / Fail	Pass / Pass	−84.1	Lc 75: body text	Open in checker
Accent text on background#846324 on #f8f6f4	5.13:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.3	Lc 60: larger content text	Open in checker
Accent text on surface#846324 on #fffefb	5.49:1	AA 4.5:1	Pass / Fail	Pass / Pass	+76.9	Lc 75: body text	Open in checker
Border on background#918d8a on #f8f6f4	3.05:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	+55.1	Lc 45: headlines and large text	Open in checker
Border on surface#918d8a on #fffefb	3.26:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	+59.7	Lc 45: headlines and large text	Open in checker
Focus ring on background#803f42 on #f8f6f4	7.19:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	+81.4	Lc 75: body text	Open in checker
Focus ring on surface#803f42 on #fffefb	7.68:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	+86.0	Lc 75: body text	Open in checker
Success text on background#008158 on #f8f6f4	4.55:1	AA 4.5:1	Pass / Fail	Pass / Pass	+68.2	Lc 60: larger content text	Open in checker
Success text on surface#008158 on #fffefb	4.86:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.8	Lc 60: larger content text	Open in checker
Success badge label on fill#fcfcfb on #008558	4.55:1	AA 4.5:1	Pass / Fail	Pass / Pass	−75.2	Lc 75: body text	Open in checker
Warning text on background#a06300 on #f8f6f4	4.55:1	AA 4.5:1	Pass / Fail	Pass / Pass	+68.4	Lc 60: larger content text	Open in checker
Warning text on surface#a06300 on #fffefb	4.86:1	AA 4.5:1	Pass / Fail	Pass / Pass	+73.0	Lc 60: larger content text	Open in checker
Warning badge label on fill#100f0f 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 #f8f6f4	7.21:1	AA 4.5:1	Pass / Pass	Pass / Pass	+80.1	Lc 75: body text	Open in checker
Error text on surface#a21a1b on #fffefb	7.71:1	AA 4.5:1	Pass / Pass	Pass / Pass	+84.7	Lc 75: body text	Open in checker
Error badge label on fill#fcfcfb on #c8322e	5.17:1	AA 4.5:1	Pass / Fail	Pass / Pass	−78.4	Lc 75: body text	Open in checker
Info text on background#2274af on #f8f6f4	4.65:1	AA 4.5:1	Pass / Fail	Pass / Pass	+69.1	Lc 60: larger content text	Open in checker
Info text on surface#2274af on #fffefb	4.97:1	AA 4.5:1	Pass / Fail	Pass / Pass	+73.7	Lc 60: larger content text	Open in checker
Info badge label on fill#fcfcfb 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#f1eeeb on #171614	15.64:1	AAA 7:1	Pass / Pass	Pass / Pass	−96.1	Lc 75: body text	Open in checker
Text on surface#f1eeeb on #22201e	14.04:1	AAA 7:1	Pass / Pass	Pass / Pass	−94.9	Lc 75: body text	Open in checker
Muted text on background#c0bdba on #171614	9.66:1	AA 4.5:1	Pass / Pass	Pass / Pass	−66.2	Lc 60: larger content text	Open in checker
Muted text on surface#c0bdba on #22201e	8.68:1	AA 4.5:1	Pass / Pass	Pass / Pass	−65.0	Lc 60: larger content text	Open in checker
Primary as link text on background#f2a6a8 on #171614	9.29:1	AA 4.5:1	Pass / Pass	Pass / Pass	−64.3	Lc 60: larger content text	Open in checker
Primary as link text on surface#f2a6a8 on #22201e	8.34:1	AA 4.5:1	Pass / Pass	Pass / Pass	−63.0	Lc 60: larger content text	Open in checker
Button label on primary#0e0d0c on #f2a6a8	9.98:1	AA 4.5:1	Pass / Pass	Pass / Pass	+66.3	Lc 60: larger content text	Open in checker
Accent text on background#e3be80 on #171614	10.28:1	AA 4.5:1	Pass / Pass	Pass / Pass	−69.7	Lc 60: larger content text	Open in checker
Accent text on surface#e3be80 on #22201e	9.23:1	AA 4.5:1	Pass / Pass	Pass / Pass	−68.4	Lc 60: larger content text	Open in checker
Border on background#6d6b67 on #171614	3.40:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	−24.3	Below Lc 30	Open in checker
Border on surface#6d6b67 on #22201e	3.05:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	−23.1	Below Lc 30	Open in checker
Focus ring on background#f2a6a8 on #171614	9.29:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−64.3	Lc 60: larger content text	Open in checker
Focus ring on surface#f2a6a8 on #22201e	8.34:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−63.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 #22201e	10.44:1	AA 4.5:1	Pass / Pass	Pass / Pass	−75.7	Lc 75: body text	Open in checker
Success badge label on fill#100f0f 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 #22201e	9.72:1	AA 4.5:1	Pass / Pass	Pass / Pass	−71.5	Lc 60: larger content text	Open in checker
Warning badge label on fill#100f0f 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 #22201e	5.63:1	AA 4.5:1	Pass / Fail	Pass / Pass	−45.2	Lc 45: headlines and large text	Open in checker
Error badge label on fill#100f0f 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 #22201e	8.19:1	AA 4.5:1	Pass / Pass	Pass / Pass	−62.1	Lc 60: larger content text	Open in checker
Info badge label on fill#100f0f 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	39.0	31.7	Shown only
success / error	28.5	16.6	6.5	33.0	Yes
success / info	17.1	16.2	15.2	3.2	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 oxblood, a deep red-brown at OKLCH hue 18 with low chroma. It reads as traditional and weighty, like leather-bound volumes, and its low chroma keeps it far from error red in feel. At the lightness needed for AA with white labels it looks like dark claret.

The accent is a muted brass at hue 80 for rules, small headings and selected states. Neutrals are stone, with a faint warm tint at hue 70. Because the palette is restrained, the status colours do most of the visible work in forms such as contact or intake, and each is verified as text and as a labelled badge.

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 99% of the requested chroma; hue was held throughout.

How to use it

Set long articles in the full text colour at a comfortable size, and use the muted colour only for dates, bylines and footnotes.
Do not use the oxblood for both links and error messages on the same page without icons; readers may confuse them.
Make intake forms plain: visible labels, the focus ring on every field, and error text in the error colour with an explanation.
Use brass for decoration and emphasis rules, but not as small text unless you use the verified accent text value.
Tag PDFs and check their colours against the same pairs, since agreements are often read on phones.

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: #f8f6f4;
  --color-surface: #fffefb;
  --color-text: #1c1a18;
  --color-text-muted: #5a5754;
  --color-primary: #8f4d50;
  --color-primary-foreground: #fcfcfb;
  --color-accent: #846324;
  --color-border: #918d8a;
  --color-focus-ring: #803f42;
  --color-success: #008158;
  --color-success-solid: #008558;
  --color-success-solid-foreground: #fcfcfb;
  --color-warning: #a06300;
  --color-warning-solid: #ffba44;
  --color-warning-solid-foreground: #100f0f;
  --color-error: #a21a1b;
  --color-error-solid: #c8322e;
  --color-error-solid-foreground: #fcfcfb;
  --color-info: #2274af;
  --color-info-solid: #1377b9;
  --color-info-solid-foreground: #fcfcfb;
}
.dark {
  --color-background: #171614;
  --color-surface: #22201e;
  --color-text: #f1eeeb;
  --color-text-muted: #c0bdba;
  --color-primary: #f2a6a8;
  --color-primary-foreground: #0e0d0c;
  --color-accent: #e3be80;
  --color-border: #6d6b67;
  --color-focus-ring: #f2a6a8;
  --color-success: #6ce5b5;
  --color-success-solid: #3bcd9a;
  --color-success-solid-foreground: #100f0f;
  --color-warning: #ffbc56;
  --color-warning-solid: #e9a11d;
  --color-warning-solid-foreground: #100f0f;
  --color-error: #f66d62;
  --color-error-solid: #ff7a6d;
  --color-error-solid-foreground: #100f0f;
  --color-info: #71bfff;
  --color-info-solid: #61b9ff;
  --color-info-solid-foreground: #100f0f;
}

/* oklch() where supported: the same colours, unclipped values of the hex above. */
@supports (color: oklch(0 0 0)) {
  :root {
    --color-background: oklch(0.974 0.003 67.8);
    --color-surface: oklch(0.997 0.004 91.4);
    --color-text: oklch(0.219 0.005 67.6);
    --color-text-muted: oklch(0.459 0.006 67.7);
    --color-primary: oklch(0.500 0.089 17.9);
    --color-primary-foreground: oklch(0.991 0.001 106.4);
    --color-accent: oklch(0.521 0.090 80.4);
    --color-border: oklch(0.646 0.007 59.6);
    --color-focus-ring: oklch(0.451 0.090 18.4);
    --color-success: oklch(0.5333 0.1163 162.37);
    --color-success-solid: oklch(0.545 0.122 160.9);
    --color-success-solid-foreground: oklch(0.991 0.001 106.4);
    --color-warning: oklch(0.5541 0.1212 68.45);
    --color-warning-solid: oklch(0.8335 0.1508 76.88);
    --color-warning-solid-foreground: oklch(0.170 0.002 17.3);
    --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.001 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.001 106.4);
  }
  .dark {
    --color-background: oklch(0.201 0.004 84.6);
    --color-surface: oklch(0.245 0.005 67.6);
    --color-text: oklch(0.951 0.005 67.8);
    --color-text-muted: oklch(0.800 0.005 67.7);
    --color-primary: oklch(0.799 0.090 17.5);
    --color-primary-foreground: oklch(0.160 0.003 67.6);
    --color-accent: oklch(0.820 0.090 79.9);
    --color-border: oklch(0.528 0.007 84.6);
    --color-focus-ring: oklch(0.799 0.090 17.5);
    --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.170 0.002 17.3);
    --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.170 0.002 17.3);
    --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.170 0.002 17.3);
    --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.170 0.002 17.3);
  }
}

Tailwind CSS v4 @theme

@theme {
  /* light */
  --color-background: oklch(0.974 0.003 67.8); /* #f8f6f4 */
  --color-surface: oklch(0.997 0.004 91.4); /* #fffefb */
  --color-text: oklch(0.219 0.005 67.6); /* #1c1a18 */
  --color-text-muted: oklch(0.459 0.006 67.7); /* #5a5754 */
  --color-primary: oklch(0.500 0.089 17.9); /* #8f4d50 */
  --color-primary-foreground: oklch(0.991 0.001 106.4); /* #fcfcfb */
  --color-accent: oklch(0.521 0.090 80.4); /* #846324 */
  --color-border: oklch(0.646 0.007 59.6); /* #918d8a */
  --color-focus-ring: oklch(0.451 0.090 18.4); /* #803f42 */
  --color-success: oklch(0.5333 0.1163 162.37); /* #008158 */
  --color-success-solid: oklch(0.545 0.122 160.9); /* #008558 */
  --color-success-solid-foreground: oklch(0.991 0.001 106.4); /* #fcfcfb */
  --color-warning: oklch(0.5541 0.1212 68.45); /* #a06300 */
  --color-warning-solid: oklch(0.8335 0.1508 76.88); /* #ffba44 */
  --color-warning-solid-foreground: oklch(0.170 0.002 17.3); /* #100f0f */
  --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.001 106.4); /* #fcfcfb */
  --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.001 106.4); /* #fcfcfb */
  /* 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.245 0.005 67.6); /* #22201e */
  --color-text-dark: oklch(0.951 0.005 67.8); /* #f1eeeb */
  --color-text-muted-dark: oklch(0.800 0.005 67.7); /* #c0bdba */
  --color-primary-dark: oklch(0.799 0.090 17.5); /* #f2a6a8 */
  --color-primary-foreground-dark: oklch(0.160 0.003 67.6); /* #0e0d0c */
  --color-accent-dark: oklch(0.820 0.090 79.9); /* #e3be80 */
  --color-border-dark: oklch(0.528 0.007 84.6); /* #6d6b67 */
  --color-focus-ring-dark: oklch(0.799 0.090 17.5); /* #f2a6a8 */
  --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.170 0.002 17.3); /* #100f0f */
  --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.170 0.002 17.3); /* #100f0f */
  --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.170 0.002 17.3); /* #100f0f */
  --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.170 0.002 17.3); /* #100f0f */
}

shadcn/ui variables (:root and .dark)

:root {
  --background: oklch(0.974 0.003 67.8);
  --foreground: oklch(0.219 0.005 67.6);
  --card: oklch(0.997 0.004 91.4);
  --card-foreground: oklch(0.219 0.005 67.6);
  --popover: oklch(0.997 0.004 91.4);
  --popover-foreground: oklch(0.219 0.005 67.6);
  --primary: oklch(0.500 0.089 17.9);
  --primary-foreground: oklch(0.991 0.001 106.4);
  --secondary: oklch(0.997 0.004 91.4);
  --secondary-foreground: oklch(0.219 0.005 67.6);
  --muted: oklch(0.997 0.004 91.4);
  --muted-foreground: oklch(0.459 0.006 67.7);
  --accent: oklch(0.997 0.004 91.4);
  --accent-foreground: oklch(0.219 0.005 67.6);
  --destructive: oklch(0.551 0.187 27.1);
  --destructive-foreground: oklch(0.991 0.001 106.4);
  --border: oklch(0.646 0.007 59.6);
  --input: oklch(0.646 0.007 59.6);
  --ring: oklch(0.451 0.090 18.4);
  --success: oklch(0.545 0.122 160.9);
  --success-foreground: oklch(0.991 0.001 106.4);
  --warning: oklch(0.8335 0.1508 76.88);
  --warning-foreground: oklch(0.170 0.002 17.3);
  --info: oklch(0.5501 0.1324 245.13);
  --info-foreground: oklch(0.991 0.001 106.4);
  --brand-accent: oklch(0.521 0.090 80.4);
}

.dark {
  --background: oklch(0.201 0.004 84.6);
  --foreground: oklch(0.951 0.005 67.8);
  --card: oklch(0.245 0.005 67.6);
  --card-foreground: oklch(0.951 0.005 67.8);
  --popover: oklch(0.245 0.005 67.6);
  --popover-foreground: oklch(0.951 0.005 67.8);
  --primary: oklch(0.799 0.090 17.5);
  --primary-foreground: oklch(0.160 0.003 67.6);
  --secondary: oklch(0.245 0.005 67.6);
  --secondary-foreground: oklch(0.951 0.005 67.8);
  --muted: oklch(0.245 0.005 67.6);
  --muted-foreground: oklch(0.800 0.005 67.7);
  --accent: oklch(0.245 0.005 67.6);
  --accent-foreground: oklch(0.951 0.005 67.8);
  --destructive: oklch(0.732 0.165 27.5);
  --destructive-foreground: oklch(0.170 0.002 17.3);
  --border: oklch(0.528 0.007 84.6);
  --input: oklch(0.528 0.007 84.6);
  --ring: oklch(0.799 0.090 17.5);
  --success: oklch(0.759 0.143 165.0);
  --success-foreground: oklch(0.170 0.002 17.3);
  --warning: oklch(0.7605 0.1539 75.30);
  --warning-foreground: oklch(0.170 0.002 17.3);
  --info: oklch(0.760 0.132 244.8);
  --info-foreground: oklch(0.170 0.002 17.3);
  --brand-accent: oklch(0.820 0.090 79.9);
}

Design tokens (DTCG-style JSON)

{
  "color": {
    "light": {
      "background": {
        "$type": "color",
        "$value": "oklch(0.974 0.003 67.8)",
        "$description": "sRGB #f8f6f4"
      },
      "surface": {
        "$type": "color",
        "$value": "oklch(0.997 0.004 91.4)",
        "$description": "sRGB #fffefb"
      },
      "text": {
        "$type": "color",
        "$value": "oklch(0.219 0.005 67.6)",
        "$description": "sRGB #1c1a18"
      },
      "text-muted": {
        "$type": "color",
        "$value": "oklch(0.459 0.006 67.7)",
        "$description": "sRGB #5a5754"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.500 0.089 17.9)",
        "$description": "sRGB #8f4d50"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.991 0.001 106.4)",
        "$description": "sRGB #fcfcfb"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.521 0.090 80.4)",
        "$description": "sRGB #846324"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.646 0.007 59.6)",
        "$description": "sRGB #918d8a"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.451 0.090 18.4)",
        "$description": "sRGB #803f42"
      },
      "success": {
        "$type": "color",
        "$value": "oklch(0.5333 0.1163 162.37)",
        "$description": "sRGB #008158"
      },
      "success-solid": {
        "$type": "color",
        "$value": "oklch(0.545 0.122 160.9)",
        "$description": "sRGB #008558"
      },
      "success-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.991 0.001 106.4)",
        "$description": "sRGB #fcfcfb"
      },
      "warning": {
        "$type": "color",
        "$value": "oklch(0.5541 0.1212 68.45)",
        "$description": "sRGB #a06300"
      },
      "warning-solid": {
        "$type": "color",
        "$value": "oklch(0.8335 0.1508 76.88)",
        "$description": "sRGB #ffba44"
      },
      "warning-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.170 0.002 17.3)",
        "$description": "sRGB #100f0f"
      },
      "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.001 106.4)",
        "$description": "sRGB #fcfcfb"
      },
      "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.001 106.4)",
        "$description": "sRGB #fcfcfb"
      }
    },
    "dark": {
      "background": {
        "$type": "color",
        "$value": "oklch(0.201 0.004 84.6)",
        "$description": "sRGB #171614"
      },
      "surface": {
        "$type": "color",
        "$value": "oklch(0.245 0.005 67.6)",
        "$description": "sRGB #22201e"
      },
      "text": {
        "$type": "color",
        "$value": "oklch(0.951 0.005 67.8)",
        "$description": "sRGB #f1eeeb"
      },
      "text-muted": {
        "$type": "color",
        "$value": "oklch(0.800 0.005 67.7)",
        "$description": "sRGB #c0bdba"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.799 0.090 17.5)",
        "$description": "sRGB #f2a6a8"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.160 0.003 67.6)",
        "$description": "sRGB #0e0d0c"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.820 0.090 79.9)",
        "$description": "sRGB #e3be80"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.528 0.007 84.6)",
        "$description": "sRGB #6d6b67"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.799 0.090 17.5)",
        "$description": "sRGB #f2a6a8"
      },
      "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.170 0.002 17.3)",
        "$description": "sRGB #100f0f"
      },
      "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.170 0.002 17.3)",
        "$description": "sRGB #100f0f"
      },
      "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.170 0.002 17.3)",
        "$description": "sRGB #100f0f"
      },
      "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.170 0.002 17.3)",
        "$description": "sRGB #100f0f"
      }
    }
  }
}

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 #8F4D50 in the OKLCH picker →Build a tonal scale →Check a pair

FAQ

Why not navy, the usual legal colour?: Navy is used by many firms and by the banking palette. Oxblood and brass give a different, equally traditional feel. Swap the hue if your brand needs it; the lightness will be re-solved.
Does a law firm have to meet WCAG?: That depends on jurisdiction, the type of organisation and any contracts. WCAG AA is a widely used reference, but this page does not advise on obligations.
Is the brass accent usable as text?: In the light theme the accent text value is a darkened brass that meets 4.5:1 on the page and card colours, listed in the table. A bright brass is only suitable as a decorative fill.
How do I test a client portal?: Check each role pair here, then test your actual screens with the contrast checker and a keyboard-only pass for focus visibility.

← All accessible palettes