OKLCH Studio · Accessible palettes · Industries
Accessible color palette for insurance (WCAG 2.2 verified)
Updated 2026-10-19
Insurance sites are visited at stressful moments: after an accident, when a bill arrives, or when a policy is about to lapse. The user needs to read dense terms, compare quotes and complete long forms. A palette for that audience should lower tension, not add to it, and it must keep long passages of text easy on the eyes.
The content is full of definitions, exclusions and numbers in tables. Body text is therefore set at WCAG AAA (7:1), and the muted text used for hints and footnotes is held at AA. Quote comparisons and claim status trackers lean on colour, so the status roles are verified as text and as filled badges with their own label colours.
WCAG 2.2 AA is the level most often referenced in accessibility policies and audits, and this palette meets it for every pair listed. Nothing here is legal advice; it is a colour foundation you can verify and extend.
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
#F4F8F5
oklch(0.975 0.006 153.8)
Sample text
- Surface
#FBFFFC
oklch(0.996 0.006 153.8)
Sample text
- Text
#181C19
oklch(0.221 0.008 153.2)
Sample text
- Muted text
#555955
oklch(0.459 0.008 145.4)
Sample text
- Primary
#2F7346
oklch(0.4993 0.0996 152.15)
Sample text
- Primary foreground
#FBFCFB
oklch(0.990 0.002 145.6)
Sample text
- Accent
#A54A28
oklch(0.521 0.130 40.1)
Sample text
- Border
#8A8F8B
oklch(0.645 0.008 151.8)
Sample text
- Focus ring
#1F6538
oklch(0.451 0.101 151.7)
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
#FBFCFB
oklch(0.990 0.002 145.6)
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
#0F100F
oklch(0.171 0.003 145.5)
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
#FBFCFB
oklch(0.990 0.002 145.6)
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
#FBFCFB
oklch(0.990 0.002 145.6)
Sample text
Appointment confirmed
Secondary text sits on the surface colour.
Link in primary · Accent text
Primary buttonSuccessWarningErrorInfo
Dark theme
- Background
#141715
oklch(0.201 0.006 156.6)
Sample text
- Surface
#1E211F
oklch(0.244 0.006 156.8)
Sample text
- Text
#EBF0EC
oklch(0.950 0.008 151.9)
Sample text
- Muted text
#BABFBB
oklch(0.800 0.008 151.9)
Sample text
- Primary
#8CD19E
oklch(0.801 0.100 151.8)
Sample text
- Primary foreground
#0D0E0D
oklch(0.162 0.003 145.5)
Sample text
- Accent
#FFA682
oklch(0.805 0.117 42.7)
Sample text
- Border
#676D68
oklch(0.528 0.011 150.5)
Sample text
- Focus ring
#8CD19E
oklch(0.801 0.100 151.8)
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
#0F100F
oklch(0.171 0.003 145.5)
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
#0F100F
oklch(0.171 0.003 145.5)
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
#0F100F
oklch(0.171 0.003 145.5)
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
#0F100F
oklch(0.171 0.003 145.5)
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.
| Pair | WCAG ratio | Target | Normal AA / AAA | Large AA / AAA | APCA Lc | APCA tier | Check |
|---|---|---|---|---|---|---|---|
| Text on background#181c19 on #f4f8f5 | 16.07:1 | AAA 7:1 | Pass / Pass | Pass / Pass | +99.3 | Lc 75: body text | Open in checker |
| Text on surface#181c19 on #fbfffc | 17.07:1 | AAA 7:1 | Pass / Pass | Pass / Pass | +103.5 | Lc 75: body text | Open in checker |
| Muted text on background#555955 on #f4f8f5 | 6.64:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +79.9 | Lc 75: body text | Open in checker |
| Muted text on surface#555955 on #fbfffc | 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#2f7346 on #f4f8f5 | 5.35:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +73.6 | Lc 60: larger content text | Open in checker |
| Primary as link text on surface#2f7346 on #fbfffc | 5.68:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +77.8 | Lc 75: body text | Open in checker |
| Button label on primary#fbfcfb on #2f7346 | 5.57:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | −81.5 | Lc 75: body text | Open in checker |
| Accent text on background#a54a28 on #f4f8f5 | 5.42:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +73.7 | Lc 60: larger content text | Open in checker |
| Accent text on surface#a54a28 on #fbfffc | 5.76:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +77.9 | Lc 75: body text | Open in checker |
| Border on background#8a8f8b on #f4f8f5 | 3.06:1 | 3:1 (WCAG 1.4.11) | Fail / Fail | Pass / Fail | +55.5 | Lc 45: headlines and large text | Open in checker |
| Border on surface#8a8f8b on #fbfffc | 3.26:1 | 3:1 (WCAG 1.4.11) | Fail / Fail | Pass / Fail | +59.6 | Lc 45: headlines and large text | Open in checker |
| Focus ring on background#1f6538 on #f4f8f5 | 6.58:1 | 3:1 (WCAG 1.4.11) | Pass / Fail | Pass / Pass | +79.3 | Lc 75: body text | Open in checker |
| Focus ring on surface#1f6538 on #fbfffc | 6.99:1 | 3:1 (WCAG 1.4.11) | Pass / Fail | Pass / Pass | +83.5 | Lc 75: body text | Open in checker |
| Success text on background#008158 on #f4f8f5 | 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 #fbfffc | 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#fbfcfb on #008457 | 4.60:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | −75.5 | Lc 75: body text | Open in checker |
| Warning text on background#a16300 on #f4f8f5 | 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 #fbfffc | 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#0f100f on #ffba44 | 11.22:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | +73.1 | Lc 60: larger content text | Open in checker |
| Error text on background#a21a1b on #f4f8f5 | 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 #fbfffc | 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#fbfcfb on #c8322e | 5.16:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | −78.2 | Lc 75: body text | Open in checker |
| Info text on background#2274af on #f4f8f5 | 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 #fbfffc | 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#fbfcfb on #1377b9 | 4.67:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | −76.1 | Lc 75: body text | Open in checker |
| Pair | WCAG ratio | Target | Normal AA / AAA | Large AA / AAA | APCA Lc | APCA tier | Check |
|---|---|---|---|---|---|---|---|
| Text on background#ebf0ec on #141715 | 15.65:1 | AAA 7:1 | Pass / Pass | Pass / Pass | −96.2 | Lc 75: body text | Open in checker |
| Text on surface#ebf0ec on #1e211f | 14.08:1 | AAA 7:1 | Pass / Pass | Pass / Pass | −95.0 | Lc 75: body text | Open in checker |
| Muted text on background#babfbb on #141715 | 9.67:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −66.3 | Lc 60: larger content text | Open in checker |
| Muted text on surface#babfbb on #1e211f | 8.70:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −65.1 | Lc 60: larger content text | Open in checker |
| Primary as link text on background#8cd19e on #141715 | 10.08:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −68.7 | Lc 60: larger content text | Open in checker |
| Primary as link text on surface#8cd19e on #1e211f | 9.07:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −67.5 | Lc 60: larger content text | Open in checker |
| Button label on primary#0d0e0d on #8cd19e | 10.80:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | +70.4 | Lc 60: larger content text | Open in checker |
| Accent text on background#ffa682 on #141715 | 9.48:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −65.5 | Lc 60: larger content text | Open in checker |
| Accent text on surface#ffa682 on #1e211f | 8.53:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −64.3 | Lc 60: larger content text | Open in checker |
| Border on background#676d68 on #141715 | 3.40:1 | 3:1 (WCAG 1.4.11) | Fail / Fail | Pass / Fail | −24.4 | Below Lc 30 | Open in checker |
| Border on surface#676d68 on #1e211f | 3.06:1 | 3:1 (WCAG 1.4.11) | Fail / Fail | Pass / Fail | −23.2 | Below Lc 30 | Open in checker |
| Focus ring on background#8cd19e on #141715 | 10.08:1 | 3:1 (WCAG 1.4.11) | Pass / Pass | Pass / Pass | −68.7 | Lc 60: larger content text | Open in checker |
| Focus ring on surface#8cd19e on #1e211f | 9.07:1 | 3:1 (WCAG 1.4.11) | Pass / Pass | Pass / Pass | −67.5 | Lc 60: larger content text | Open in checker |
| Success text on background#6ce5b5 on #141715 | 11.61:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −77.0 | Lc 75: body text | Open in checker |
| Success text on surface#6ce5b5 on #1e211f | 10.45:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −75.7 | Lc 75: body text | Open in checker |
| Success badge label on fill#0f100f on #3bcd9a | 9.42: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 #141715 | 10.81: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 #1e211f | 9.73:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −71.5 | Lc 60: larger content text | Open in checker |
| Warning badge label on fill#0f100f on #e9a11d | 8.69: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 #141715 | 6.26: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 #1e211f | 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#0f100f on #ff7a6d | 7.49: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 #141715 | 9.11: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 #1e211f | 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#0f100f on #61b9ff | 8.98: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.
| 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
| 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 green near OKLCH hue 152 with moderate chroma. Green suggests safety and recovery, and it is far enough from the red used for errors that claim states read clearly. The darker green needed for AA text on white is a forest tone, which suits an insurer better than a bright lime would.
The accent is a warm orange at hue 40, used for call-to-action highlights such as Get a quote. Orange also separates well from the green for viewers with red-green colour-vision deficiency because the pair differs strongly in lightness. All lightness values were solved against the page and card colours with hue and chroma held.
The generator solved 50 pairs (25 light, 25 dark), and all of them meet their target on the raw WCAG ratio. The tightest is warning 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 full text colour for premiums, excess amounts, dates and coverage limits. Keep muted text for explanatory hints.
- Show claim stages as a labelled stepper with icons, using the success badge for complete and the info badge for in progress, never colour alone.
- Keep error and warning messages next to the field they concern, and write what to do to fix them.
- Do not use the success green for the Get a quote button; reserve green for confirmation so people learn what it means.
- Check any PDF or email template with the same pairs, because policy documents are often read outside the browser.
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: #f4f8f5;
--color-surface: #fbfffc;
--color-text: #181c19;
--color-text-muted: #555955;
--color-primary: #2f7346;
--color-primary-foreground: #fbfcfb;
--color-accent: #a54a28;
--color-border: #8a8f8b;
--color-focus-ring: #1f6538;
--color-success: #008158;
--color-success-solid: #008457;
--color-success-solid-foreground: #fbfcfb;
--color-warning: #a16300;
--color-warning-solid: #ffba44;
--color-warning-solid-foreground: #0f100f;
--color-error: #a21a1b;
--color-error-solid: #c8322e;
--color-error-solid-foreground: #fbfcfb;
--color-info: #2274af;
--color-info-solid: #1377b9;
--color-info-solid-foreground: #fbfcfb;
}
.dark {
--color-background: #141715;
--color-surface: #1e211f;
--color-text: #ebf0ec;
--color-text-muted: #babfbb;
--color-primary: #8cd19e;
--color-primary-foreground: #0d0e0d;
--color-accent: #ffa682;
--color-border: #676d68;
--color-focus-ring: #8cd19e;
--color-success: #6ce5b5;
--color-success-solid: #3bcd9a;
--color-success-solid-foreground: #0f100f;
--color-warning: #ffbc56;
--color-warning-solid: #e9a11d;
--color-warning-solid-foreground: #0f100f;
--color-error: #f66d62;
--color-error-solid: #ff7a6d;
--color-error-solid-foreground: #0f100f;
--color-info: #71bfff;
--color-info-solid: #61b9ff;
--color-info-solid-foreground: #0f100f;
}
/* 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 153.8);
--color-surface: oklch(0.996 0.006 153.8);
--color-text: oklch(0.221 0.008 153.2);
--color-text-muted: oklch(0.459 0.008 145.4);
--color-primary: oklch(0.4993 0.0996 152.15);
--color-primary-foreground: oklch(0.990 0.002 145.6);
--color-accent: oklch(0.521 0.130 40.1);
--color-border: oklch(0.645 0.008 151.8);
--color-focus-ring: oklch(0.451 0.101 151.7);
--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 145.6);
--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.171 0.003 145.5);
--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 145.6);
--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 145.6);
}
.dark {
--color-background: oklch(0.201 0.006 156.6);
--color-surface: oklch(0.244 0.006 156.8);
--color-text: oklch(0.950 0.008 151.9);
--color-text-muted: oklch(0.800 0.008 151.9);
--color-primary: oklch(0.801 0.100 151.8);
--color-primary-foreground: oklch(0.162 0.003 145.5);
--color-accent: oklch(0.805 0.117 42.7);
--color-border: oklch(0.528 0.011 150.5);
--color-focus-ring: oklch(0.801 0.100 151.8);
--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.171 0.003 145.5);
--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.171 0.003 145.5);
--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.171 0.003 145.5);
--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.171 0.003 145.5);
}
}Tailwind CSS v4 @theme
@theme {
/* light */
--color-background: oklch(0.975 0.006 153.8); /* #f4f8f5 */
--color-surface: oklch(0.996 0.006 153.8); /* #fbfffc */
--color-text: oklch(0.221 0.008 153.2); /* #181c19 */
--color-text-muted: oklch(0.459 0.008 145.4); /* #555955 */
--color-primary: oklch(0.4993 0.0996 152.15); /* #2f7346 */
--color-primary-foreground: oklch(0.990 0.002 145.6); /* #fbfcfb */
--color-accent: oklch(0.521 0.130 40.1); /* #a54a28 */
--color-border: oklch(0.645 0.008 151.8); /* #8a8f8b */
--color-focus-ring: oklch(0.451 0.101 151.7); /* #1f6538 */
--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 145.6); /* #fbfcfb */
--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.171 0.003 145.5); /* #0f100f */
--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 145.6); /* #fbfcfb */
--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 145.6); /* #fbfcfb */
/* dark: use as dark:bg-background-dark, or remap under a .dark selector */
--color-background-dark: oklch(0.201 0.006 156.6); /* #141715 */
--color-surface-dark: oklch(0.244 0.006 156.8); /* #1e211f */
--color-text-dark: oklch(0.950 0.008 151.9); /* #ebf0ec */
--color-text-muted-dark: oklch(0.800 0.008 151.9); /* #babfbb */
--color-primary-dark: oklch(0.801 0.100 151.8); /* #8cd19e */
--color-primary-foreground-dark: oklch(0.162 0.003 145.5); /* #0d0e0d */
--color-accent-dark: oklch(0.805 0.117 42.7); /* #ffa682 */
--color-border-dark: oklch(0.528 0.011 150.5); /* #676d68 */
--color-focus-ring-dark: oklch(0.801 0.100 151.8); /* #8cd19e */
--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.171 0.003 145.5); /* #0f100f */
--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.171 0.003 145.5); /* #0f100f */
--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.171 0.003 145.5); /* #0f100f */
--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.171 0.003 145.5); /* #0f100f */
}shadcn/ui variables (:root and .dark)
:root {
--background: oklch(0.975 0.006 153.8);
--foreground: oklch(0.221 0.008 153.2);
--card: oklch(0.996 0.006 153.8);
--card-foreground: oklch(0.221 0.008 153.2);
--popover: oklch(0.996 0.006 153.8);
--popover-foreground: oklch(0.221 0.008 153.2);
--primary: oklch(0.4993 0.0996 152.15);
--primary-foreground: oklch(0.990 0.002 145.6);
--secondary: oklch(0.996 0.006 153.8);
--secondary-foreground: oklch(0.221 0.008 153.2);
--muted: oklch(0.996 0.006 153.8);
--muted-foreground: oklch(0.459 0.008 145.4);
--accent: oklch(0.996 0.006 153.8);
--accent-foreground: oklch(0.221 0.008 153.2);
--destructive: oklch(0.551 0.187 27.1);
--destructive-foreground: oklch(0.990 0.002 145.6);
--border: oklch(0.645 0.008 151.8);
--input: oklch(0.645 0.008 151.8);
--ring: oklch(0.451 0.101 151.7);
--success: oklch(0.5415 0.1211 160.71);
--success-foreground: oklch(0.990 0.002 145.6);
--warning: oklch(0.8335 0.1508 76.88);
--warning-foreground: oklch(0.171 0.003 145.5);
--info: oklch(0.5501 0.1324 245.13);
--info-foreground: oklch(0.990 0.002 145.6);
--brand-accent: oklch(0.521 0.130 40.1);
}
.dark {
--background: oklch(0.201 0.006 156.6);
--foreground: oklch(0.950 0.008 151.9);
--card: oklch(0.244 0.006 156.8);
--card-foreground: oklch(0.950 0.008 151.9);
--popover: oklch(0.244 0.006 156.8);
--popover-foreground: oklch(0.950 0.008 151.9);
--primary: oklch(0.801 0.100 151.8);
--primary-foreground: oklch(0.162 0.003 145.5);
--secondary: oklch(0.244 0.006 156.8);
--secondary-foreground: oklch(0.950 0.008 151.9);
--muted: oklch(0.244 0.006 156.8);
--muted-foreground: oklch(0.800 0.008 151.9);
--accent: oklch(0.244 0.006 156.8);
--accent-foreground: oklch(0.950 0.008 151.9);
--destructive: oklch(0.732 0.165 27.5);
--destructive-foreground: oklch(0.171 0.003 145.5);
--border: oklch(0.528 0.011 150.5);
--input: oklch(0.528 0.011 150.5);
--ring: oklch(0.801 0.100 151.8);
--success: oklch(0.759 0.143 165.0);
--success-foreground: oklch(0.171 0.003 145.5);
--warning: oklch(0.7605 0.1539 75.30);
--warning-foreground: oklch(0.171 0.003 145.5);
--info: oklch(0.760 0.132 244.8);
--info-foreground: oklch(0.171 0.003 145.5);
--brand-accent: oklch(0.805 0.117 42.7);
}Design tokens (DTCG-style JSON)
{
"color": {
"light": {
"background": {
"$type": "color",
"$value": "oklch(0.975 0.006 153.8)",
"$description": "sRGB #f4f8f5"
},
"surface": {
"$type": "color",
"$value": "oklch(0.996 0.006 153.8)",
"$description": "sRGB #fbfffc"
},
"text": {
"$type": "color",
"$value": "oklch(0.221 0.008 153.2)",
"$description": "sRGB #181c19"
},
"text-muted": {
"$type": "color",
"$value": "oklch(0.459 0.008 145.4)",
"$description": "sRGB #555955"
},
"primary": {
"$type": "color",
"$value": "oklch(0.4993 0.0996 152.15)",
"$description": "sRGB #2f7346"
},
"primary-foreground": {
"$type": "color",
"$value": "oklch(0.990 0.002 145.6)",
"$description": "sRGB #fbfcfb"
},
"accent": {
"$type": "color",
"$value": "oklch(0.521 0.130 40.1)",
"$description": "sRGB #a54a28"
},
"border": {
"$type": "color",
"$value": "oklch(0.645 0.008 151.8)",
"$description": "sRGB #8a8f8b"
},
"focus-ring": {
"$type": "color",
"$value": "oklch(0.451 0.101 151.7)",
"$description": "sRGB #1f6538"
},
"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 145.6)",
"$description": "sRGB #fbfcfb"
},
"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.171 0.003 145.5)",
"$description": "sRGB #0f100f"
},
"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 145.6)",
"$description": "sRGB #fbfcfb"
},
"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 145.6)",
"$description": "sRGB #fbfcfb"
}
},
"dark": {
"background": {
"$type": "color",
"$value": "oklch(0.201 0.006 156.6)",
"$description": "sRGB #141715"
},
"surface": {
"$type": "color",
"$value": "oklch(0.244 0.006 156.8)",
"$description": "sRGB #1e211f"
},
"text": {
"$type": "color",
"$value": "oklch(0.950 0.008 151.9)",
"$description": "sRGB #ebf0ec"
},
"text-muted": {
"$type": "color",
"$value": "oklch(0.800 0.008 151.9)",
"$description": "sRGB #babfbb"
},
"primary": {
"$type": "color",
"$value": "oklch(0.801 0.100 151.8)",
"$description": "sRGB #8cd19e"
},
"primary-foreground": {
"$type": "color",
"$value": "oklch(0.162 0.003 145.5)",
"$description": "sRGB #0d0e0d"
},
"accent": {
"$type": "color",
"$value": "oklch(0.805 0.117 42.7)",
"$description": "sRGB #ffa682"
},
"border": {
"$type": "color",
"$value": "oklch(0.528 0.011 150.5)",
"$description": "sRGB #676d68"
},
"focus-ring": {
"$type": "color",
"$value": "oklch(0.801 0.100 151.8)",
"$description": "sRGB #8cd19e"
},
"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.171 0.003 145.5)",
"$description": "sRGB #0f100f"
},
"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.171 0.003 145.5)",
"$description": "sRGB #0f100f"
},
"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.171 0.003 145.5)",
"$description": "sRGB #0f100f"
},
"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.171 0.003 145.5)",
"$description": "sRGB #0f100f"
}
}
}
}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 #2F7346 in the OKLCH picker →Build a tonal scale →Check a pair
FAQ
- Why green for insurance?
- Green conveys safety and reassurance in many markets and keeps a calm tone. It is a design choice, not a rule, and you can swap the hue and let the generator-style Fix solve lightness again.
- Are the status colours usable for claim tracking?
- Yes, as text on page and card colours and as badges with labelled foreground colours. The success and error fills are also checked under simulated colour-vision deficiency.
- What does AAA body text change in practice?
- Text is darker than the AA minimum, which helps long reading and older eyes. The visual difference is small, so most brands barely notice it, while readers benefit.
- Where can I see the contrast of one pair in detail?
- Every row of the contrast table links to the contrast checker with both colours filled in, showing WCAG ratios and APCA Lc.