Will a berry colour look like an error?

The hues are far enough apart, and the error colour is also darker and used with icons and text. Even so, avoid putting primary-coloured and error-coloured items next to each other.

Can charities use AAA throughout?

Often not necessary. This palette uses AAA for body text and AA for the rest. If your audience skews older or you serve people with low vision, the high-contrast palette goes further.

How do I handle photos behind headlines?

Use a solid or semi-opaque panel in the surface colour and test the pair. Contrast over a photograph varies across the image, so it cannot be verified as a single ratio.

Is the donate button colour verified?

Yes. The row Button label on primary gives the ratio, the WCAG levels and APCA Lc for the white label on the berry fill.

OKLCH Studio · Accessible palettes · Industries

Accessible color palette for nonprofits (WCAG 2.2 verified)

Updated 2026-10-19

A charity site has one job above the others: to make it easy to give, volunteer or get help. Visitors arrive from emails and social posts on every kind of device, and a good share may have low vision, motor difficulties or limited digital confidence. A palette that is warm and emotive has to stay readable at the moment of asking.

The donation flow is where colour pairs matter most. The donate button, amount selectors, card fields, validation messages and the thank-you confirmation each use a different role here, all verified. Nonprofits are also often public bodies in effect, or receive public funding that comes with WCAG requirements, and WCAG 2.2 AA is the usual reference.

Campaign pages tend to use large photographs with overlaid headlines. The palette cannot guarantee contrast over an image, so the guidance is to put text on a solid surface colour, and the surface and text pair is checked for that purpose.

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
#FBF5F5
oklch(0.975 0.006 17.3)
Sample text
Surface
#FFFDFC
oklch(0.995 0.003 48.7)
Sample text
Text
#1E1919
oklch(0.219 0.008 17.8)
Sample text
Muted text
#5D5656
oklch(0.460 0.009 17.5)
Sample text
Primary
#A13567
oklch(0.500 0.150 355.4)
Sample text
Primary foreground
#FDFBFB
oklch(0.990 0.002 17.2)
Sample text
Accent
#007979
oklch(0.522 0.089 194.8)
Sample text
Border
#938C8C
oklch(0.646 0.008 17.4)
Sample text
Focus ring
#902559
oklch(0.450 0.150 355.3)
Sample text
Success
#008158
oklch(0.5333 0.1163 162.37)
Sample text
Success fill
#008457
oklch(0.5415 0.1211 160.71)
Sample text
Success fill label
#FDFBFB
oklch(0.990 0.002 17.2)
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
#FDFBFB
oklch(0.990 0.002 17.2)
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
#FDFBFB
oklch(0.990 0.002 17.2)
Sample text

Appointment confirmed

Secondary text sits on the surface colour.

Link in primary · Accent text

Primary buttonSuccessWarningErrorInfo

Dark theme

Background
#191515
oklch(0.201 0.006 17.7)
Sample text
Surface
#231F1F
oklch(0.244 0.006 17.6)
Sample text
Text
#F3EDEC
oklch(0.950 0.007 28.8)
Sample text
Muted text
#C3BBBB
oklch(0.799 0.009 17.3)
Sample text
Primary
#FF92C3
oklch(0.789 0.142 352.4)
Sample text
Primary foreground
#0E0D0D
oklch(0.160 0.002 17.3)
Sample text
Accent
#78D7D6
oklch(0.8207 0.0904 194.65)
Sample text
Border
#716969
oklch(0.528 0.010 17.5)
Sample text
Focus ring
#FF92C3
oklch(0.789 0.142 352.4)
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#1e1919 on #fbf5f5	16.12:1	AAA 7:1	Pass / Pass	Pass / Pass	+99.0	Lc 75: body text	Open in checker
Text on surface#1e1919 on #fffdfc	17.13:1	AAA 7:1	Pass / Pass	Pass / Pass	+103.3	Lc 75: body text	Open in checker
Muted text on background#5d5656 on #fbf5f5	6.64:1	AA 4.5:1	Pass / Fail	Pass / Pass	+79.7	Lc 75: body text	Open in checker
Muted text on surface#5d5656 on #fffdfc	7.06:1	AA 4.5:1	Pass / Pass	Pass / Pass	+83.9	Lc 75: body text	Open in checker
Primary as link text on background#a13567 on #fbf5f5	6.04:1	AA 4.5:1	Pass / Fail	Pass / Pass	+76.3	Lc 75: body text	Open in checker
Primary as link text on surface#a13567 on #fffdfc	6.42:1	AA 4.5:1	Pass / Fail	Pass / Pass	+80.5	Lc 75: body text	Open in checker
Button label on primary#fdfbfb on #a13567	6.32:1	AA 4.5:1	Pass / Fail	Pass / Pass	−84.2	Lc 75: body text	Open in checker
Accent text on background#007979 on #fbf5f5	4.85:1	AA 4.5:1	Pass / Fail	Pass / Pass	+70.2	Lc 60: larger content text	Open in checker
Accent text on surface#007979 on #fffdfc	5.16:1	AA 4.5:1	Pass / Fail	Pass / Pass	+74.4	Lc 60: larger content text	Open in checker
Border on background#938c8c on #fbf5f5	3.05:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	+55.2	Lc 45: headlines and large text	Open in checker
Border on surface#938c8c on #fffdfc	3.25: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#902559 on #fbf5f5	7.50:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	+81.7	Lc 75: body text	Open in checker
Focus ring on surface#902559 on #fffdfc	7.98: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 #fbf5f5	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 #fffdfc	4.83:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.4	Lc 60: larger content text	Open in checker
Success badge label on fill#fdfbfb on #008457	4.58:1	AA 4.5:1	Pass / Fail	Pass / Pass	−75.3	Lc 75: body text	Open in checker
Warning text on background#a06300 on #fbf5f5	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 #fffdfc	4.83:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.6	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 #fbf5f5	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 #fffdfc	7.66:1	AA 4.5:1	Pass / Pass	Pass / Pass	+84.3	Lc 75: body text	Open in checker
Error badge label on fill#fdfbfb on #c8322e	5.15:1	AA 4.5:1	Pass / Fail	Pass / Pass	−78.0	Lc 75: body text	Open in checker
Info text on background#2274af on #fbf5f5	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 #fffdfc	4.94:1	AA 4.5:1	Pass / Fail	Pass / Pass	+73.3	Lc 60: larger content text	Open in checker
Info badge label on fill#fdfbfb on #1377b9	4.66:1	AA 4.5:1	Pass / Fail	Pass / Pass	−75.9	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#f3edec on #191515	15.64:1	AAA 7:1	Pass / Pass	Pass / Pass	−96.0	Lc 75: body text	Open in checker
Text on surface#f3edec on #231f1f	14.08:1	AAA 7:1	Pass / Pass	Pass / Pass	−94.8	Lc 75: body text	Open in checker
Muted text on background#c3bbbb on #191515	9.61:1	AA 4.5:1	Pass / Pass	Pass / Pass	−65.8	Lc 60: larger content text	Open in checker
Muted text on surface#c3bbbb on #231f1f	8.65:1	AA 4.5:1	Pass / Pass	Pass / Pass	−64.6	Lc 60: larger content text	Open in checker
Primary as link text on background#ff92c3 on #191515	8.75:1	AA 4.5:1	Pass / Pass	Pass / Pass	−61.3	Lc 60: larger content text	Open in checker
Primary as link text on surface#ff92c3 on #231f1f	7.88:1	AA 4.5:1	Pass / Pass	Pass / Pass	−60.1	Lc 60: larger content text	Open in checker
Button label on primary#0e0d0d on #ff92c3	9.38:1	AA 4.5:1	Pass / Pass	Pass / Pass	+63.5	Lc 60: larger content text	Open in checker
Accent text on background#78d7d6 on #191515	10.77:1	AA 4.5:1	Pass / Pass	Pass / Pass	−72.3	Lc 60: larger content text	Open in checker
Accent text on surface#78d7d6 on #231f1f	9.70:1	AA 4.5:1	Pass / Pass	Pass / Pass	−71.1	Lc 60: larger content text	Open in checker
Border on background#716969 on #191515	3.38:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	−24.2	Below Lc 30	Open in checker
Border on surface#716969 on #231f1f	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#ff92c3 on #191515	8.75:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−61.3	Lc 60: larger content text	Open in checker
Focus ring on surface#ff92c3 on #231f1f	7.88:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−60.1	Lc 60: larger content text	Open in checker
Success text on background#6ce5b5 on #191515	11.65:1	AA 4.5:1	Pass / Pass	Pass / Pass	−77.0	Lc 75: body text	Open in checker
Success text on surface#6ce5b5 on #231f1f	10.49:1	AA 4.5:1	Pass / Pass	Pass / Pass	−75.8	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 #191515	10.85: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 #231f1f	9.77: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 #191515	6.28: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 #231f1f	5.65: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#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 #191515	9.14: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 #231f1f	8.23:1	AA 4.5:1	Pass / Pass	Pass / Pass	−62.2	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.5	26.3	39.2	31.9	Shown only
success / error	28.5	16.2	6.4	33.0	Yes
success / info	17.1	16.2	15.3	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 a raspberry at OKLCH hue 355. It is emotive and distinctive without the alarm of pure red, and it is separated from the error hue near 27 by enough hue distance that donation buttons do not read as warnings. At the lightness needed for white labels at AA, it becomes a deep berry.

The accent is a teal at hue 195, the cool counterweight, used for secondary actions such as Volunteer or Learn more. The neutrals lean warm, with a faint pink-orange tint at hue 20, to keep the page friendly. Body text is held at AAA, since impact stories and policy text are read at length.

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 text on background 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

Use the primary only for the donate or sign-up action so the page has one clear target.
Label amount selectors and show the selected one with a border and a check mark, not just a filled colour.
Place headline text on the surface colour or a solid brand panel rather than directly on photos.
Keep the error colour for payment failures and field errors, and write errors in plain language beside the field.
Check email templates with the same pairs; many supporters open campaign emails in dark mode clients.

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: #fbf5f5;
  --color-surface: #fffdfc;
  --color-text: #1e1919;
  --color-text-muted: #5d5656;
  --color-primary: #a13567;
  --color-primary-foreground: #fdfbfb;
  --color-accent: #007979;
  --color-border: #938c8c;
  --color-focus-ring: #902559;
  --color-success: #008158;
  --color-success-solid: #008457;
  --color-success-solid-foreground: #fdfbfb;
  --color-warning: #a06300;
  --color-warning-solid: #ffba44;
  --color-warning-solid-foreground: #100f0f;
  --color-error: #a21a1b;
  --color-error-solid: #c8322e;
  --color-error-solid-foreground: #fdfbfb;
  --color-info: #2274af;
  --color-info-solid: #1377b9;
  --color-info-solid-foreground: #fdfbfb;
}
.dark {
  --color-background: #191515;
  --color-surface: #231f1f;
  --color-text: #f3edec;
  --color-text-muted: #c3bbbb;
  --color-primary: #ff92c3;
  --color-primary-foreground: #0e0d0d;
  --color-accent: #78d7d6;
  --color-border: #716969;
  --color-focus-ring: #ff92c3;
  --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.975 0.006 17.3);
    --color-surface: oklch(0.995 0.003 48.7);
    --color-text: oklch(0.219 0.008 17.8);
    --color-text-muted: oklch(0.460 0.009 17.5);
    --color-primary: oklch(0.500 0.150 355.4);
    --color-primary-foreground: oklch(0.990 0.002 17.2);
    --color-accent: oklch(0.522 0.089 194.8);
    --color-border: oklch(0.646 0.008 17.4);
    --color-focus-ring: oklch(0.450 0.150 355.3);
    --color-success: oklch(0.5333 0.1163 162.37);
    --color-success-solid: oklch(0.5415 0.1211 160.71);
    --color-success-solid-foreground: oklch(0.990 0.002 17.2);
    --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.990 0.002 17.2);
    --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.990 0.002 17.2);
  }
  .dark {
    --color-background: oklch(0.201 0.006 17.7);
    --color-surface: oklch(0.244 0.006 17.6);
    --color-text: oklch(0.950 0.007 28.8);
    --color-text-muted: oklch(0.799 0.009 17.3);
    --color-primary: oklch(0.789 0.142 352.4);
    --color-primary-foreground: oklch(0.160 0.002 17.3);
    --color-accent: oklch(0.8207 0.0904 194.65);
    --color-border: oklch(0.528 0.010 17.5);
    --color-focus-ring: oklch(0.789 0.142 352.4);
    --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.975 0.006 17.3); /* #fbf5f5 */
  --color-surface: oklch(0.995 0.003 48.7); /* #fffdfc */
  --color-text: oklch(0.219 0.008 17.8); /* #1e1919 */
  --color-text-muted: oklch(0.460 0.009 17.5); /* #5d5656 */
  --color-primary: oklch(0.500 0.150 355.4); /* #a13567 */
  --color-primary-foreground: oklch(0.990 0.002 17.2); /* #fdfbfb */
  --color-accent: oklch(0.522 0.089 194.8); /* #007979 */
  --color-border: oklch(0.646 0.008 17.4); /* #938c8c */
  --color-focus-ring: oklch(0.450 0.150 355.3); /* #902559 */
  --color-success: oklch(0.5333 0.1163 162.37); /* #008158 */
  --color-success-solid: oklch(0.5415 0.1211 160.71); /* #008457 */
  --color-success-solid-foreground: oklch(0.990 0.002 17.2); /* #fdfbfb */
  --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.990 0.002 17.2); /* #fdfbfb */
  --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.990 0.002 17.2); /* #fdfbfb */
  /* dark: use as dark:bg-background-dark, or remap under a .dark selector */
  --color-background-dark: oklch(0.201 0.006 17.7); /* #191515 */
  --color-surface-dark: oklch(0.244 0.006 17.6); /* #231f1f */
  --color-text-dark: oklch(0.950 0.007 28.8); /* #f3edec */
  --color-text-muted-dark: oklch(0.799 0.009 17.3); /* #c3bbbb */
  --color-primary-dark: oklch(0.789 0.142 352.4); /* #ff92c3 */
  --color-primary-foreground-dark: oklch(0.160 0.002 17.3); /* #0e0d0d */
  --color-accent-dark: oklch(0.8207 0.0904 194.65); /* #78d7d6 */
  --color-border-dark: oklch(0.528 0.010 17.5); /* #716969 */
  --color-focus-ring-dark: oklch(0.789 0.142 352.4); /* #ff92c3 */
  --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.975 0.006 17.3);
  --foreground: oklch(0.219 0.008 17.8);
  --card: oklch(0.995 0.003 48.7);
  --card-foreground: oklch(0.219 0.008 17.8);
  --popover: oklch(0.995 0.003 48.7);
  --popover-foreground: oklch(0.219 0.008 17.8);
  --primary: oklch(0.500 0.150 355.4);
  --primary-foreground: oklch(0.990 0.002 17.2);
  --secondary: oklch(0.995 0.003 48.7);
  --secondary-foreground: oklch(0.219 0.008 17.8);
  --muted: oklch(0.995 0.003 48.7);
  --muted-foreground: oklch(0.460 0.009 17.5);
  --accent: oklch(0.995 0.003 48.7);
  --accent-foreground: oklch(0.219 0.008 17.8);
  --destructive: oklch(0.551 0.187 27.1);
  --destructive-foreground: oklch(0.990 0.002 17.2);
  --border: oklch(0.646 0.008 17.4);
  --input: oklch(0.646 0.008 17.4);
  --ring: oklch(0.450 0.150 355.3);
  --success: oklch(0.5415 0.1211 160.71);
  --success-foreground: oklch(0.990 0.002 17.2);
  --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.990 0.002 17.2);
  --brand-accent: oklch(0.522 0.089 194.8);
}

.dark {
  --background: oklch(0.201 0.006 17.7);
  --foreground: oklch(0.950 0.007 28.8);
  --card: oklch(0.244 0.006 17.6);
  --card-foreground: oklch(0.950 0.007 28.8);
  --popover: oklch(0.244 0.006 17.6);
  --popover-foreground: oklch(0.950 0.007 28.8);
  --primary: oklch(0.789 0.142 352.4);
  --primary-foreground: oklch(0.160 0.002 17.3);
  --secondary: oklch(0.244 0.006 17.6);
  --secondary-foreground: oklch(0.950 0.007 28.8);
  --muted: oklch(0.244 0.006 17.6);
  --muted-foreground: oklch(0.799 0.009 17.3);
  --accent: oklch(0.244 0.006 17.6);
  --accent-foreground: oklch(0.950 0.007 28.8);
  --destructive: oklch(0.732 0.165 27.5);
  --destructive-foreground: oklch(0.170 0.002 17.3);
  --border: oklch(0.528 0.010 17.5);
  --input: oklch(0.528 0.010 17.5);
  --ring: oklch(0.789 0.142 352.4);
  --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.8207 0.0904 194.65);
}

Design tokens (DTCG-style JSON)

{
  "color": {
    "light": {
      "background": {
        "$type": "color",
        "$value": "oklch(0.975 0.006 17.3)",
        "$description": "sRGB #fbf5f5"
      },
      "surface": {
        "$type": "color",
        "$value": "oklch(0.995 0.003 48.7)",
        "$description": "sRGB #fffdfc"
      },
      "text": {
        "$type": "color",
        "$value": "oklch(0.219 0.008 17.8)",
        "$description": "sRGB #1e1919"
      },
      "text-muted": {
        "$type": "color",
        "$value": "oklch(0.460 0.009 17.5)",
        "$description": "sRGB #5d5656"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.500 0.150 355.4)",
        "$description": "sRGB #a13567"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.990 0.002 17.2)",
        "$description": "sRGB #fdfbfb"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.522 0.089 194.8)",
        "$description": "sRGB #007979"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.646 0.008 17.4)",
        "$description": "sRGB #938c8c"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.450 0.150 355.3)",
        "$description": "sRGB #902559"
      },
      "success": {
        "$type": "color",
        "$value": "oklch(0.5333 0.1163 162.37)",
        "$description": "sRGB #008158"
      },
      "success-solid": {
        "$type": "color",
        "$value": "oklch(0.5415 0.1211 160.71)",
        "$description": "sRGB #008457"
      },
      "success-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.990 0.002 17.2)",
        "$description": "sRGB #fdfbfb"
      },
      "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.990 0.002 17.2)",
        "$description": "sRGB #fdfbfb"
      },
      "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.990 0.002 17.2)",
        "$description": "sRGB #fdfbfb"
      }
    },
    "dark": {
      "background": {
        "$type": "color",
        "$value": "oklch(0.201 0.006 17.7)",
        "$description": "sRGB #191515"
      },
      "surface": {
        "$type": "color",
        "$value": "oklch(0.244 0.006 17.6)",
        "$description": "sRGB #231f1f"
      },
      "text": {
        "$type": "color",
        "$value": "oklch(0.950 0.007 28.8)",
        "$description": "sRGB #f3edec"
      },
      "text-muted": {
        "$type": "color",
        "$value": "oklch(0.799 0.009 17.3)",
        "$description": "sRGB #c3bbbb"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.789 0.142 352.4)",
        "$description": "sRGB #ff92c3"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.160 0.002 17.3)",
        "$description": "sRGB #0e0d0d"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.8207 0.0904 194.65)",
        "$description": "sRGB #78d7d6"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.528 0.010 17.5)",
        "$description": "sRGB #716969"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.789 0.142 352.4)",
        "$description": "sRGB #ff92c3"
      },
      "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 #A13567 in the OKLCH picker →Build a tonal scale →Check a pair

FAQ

Will a berry colour look like an error?: The hues are far enough apart, and the error colour is also darker and used with icons and text. Even so, avoid putting primary-coloured and error-coloured items next to each other.
Can charities use AAA throughout?: Often not necessary. This palette uses AAA for body text and AA for the rest. If your audience skews older or you serve people with low vision, the high-contrast palette goes further.
How do I handle photos behind headlines?: Use a solid or semi-opaque panel in the surface colour and test the pair. Contrast over a photograph varies across the image, so it cannot be verified as a single ratio.
Is the donate button colour verified?: Yes. The row Button label on primary gives the ratio, the WCAG levels and APCA Lc for the white label on the berry fill.

← All accessible palettes