OKLCH Studio · Accessible palettes · Industries
Accessible color palette for energy and utilities (WCAG 2.2 verified)
Updated 2026-10-19
People visit an energy or water provider's site for practical reasons: to pay a bill, read a meter, report a fault or find out why the power is off. Outage notices are the most urgent of these. They are often read on a phone with a low battery, in the dark, by someone anxious, so the alert must be the clearest thing on the screen.
Utilities also serve the whole population, including many older customers and people with disabilities who may depend on power for medical equipment. Regulators and public-sector rules often expect accessible customer channels, and WCAG 2.2 AA is the usual reference. This palette meets AA for every pair, holds body text at AAA and is not legal advice.
Usage graphs, tariff tables and bill breakdowns use colour heavily. Use this palette for the interface and the data visualization palette for the series in charts.
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
Light theme
- Background
#F4F8F6
oklch(0.976 0.005 165.0)
Sample text
- Surface
#FBFFFD
oklch(0.996 0.005 165.0)
Sample text
- Text
#181B1A
oklch(0.219 0.005 173.9)
Sample text
- Muted text
#555957
oklch(0.460 0.006 164.8)
Sample text
- Primary
#0B764D
oklch(0.501 0.110 160.0)
Sample text
- Primary foreground
#FBFCFB
oklch(0.990 0.002 145.6)
Sample text
- Accent
#0070A6
oklch(0.5199 0.1193 240.09)
Sample text
- Border
#8A8F8C
oklch(0.645 0.007 160.0)
Sample text
- Focus ring
#00673F
oklch(0.4527 0.1053 158.32)
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
Dark theme
- Background
#141715
oklch(0.201 0.006 156.6)
Sample text
- Surface
#1E2120
oklch(0.244 0.005 174.0)
Sample text
- Text
#EBF0ED
oklch(0.951 0.007 160.1)
Sample text
- Muted text
#BABFBC
oklch(0.800 0.007 160.0)
Sample text
- Primary
#7AD4A5
oklch(0.801 0.111 159.7)
Sample text
- Primary foreground
#0D0D0D
oklch(0.159 0.000 0.0)
Sample text
- Accent
#76CEFF
oklch(0.815 0.110 234.7)
Sample text
- Border
#686D6A
oklch(0.529 0.008 159.9)
Sample text
- Focus ring
#7AD4A5
oklch(0.801 0.111 159.7)
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#181b1a on #f4f8f6 | 16.19:1 | AAA 7:1 | Pass / Pass | Pass / Pass | +99.4 | Lc 75: body text | Open in checker |
| Text on surface#181b1a on #fbfffd | 17.20:1 | AAA 7:1 | Pass / Pass | Pass / Pass | +103.6 | Lc 75: body text | Open in checker |
| Muted text on background#555957 on #f4f8f6 | 6.63:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +79.9 | Lc 75: body text | Open in checker |
| Muted text on surface#555957 on #fbfffd | 7.05:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | +84.1 | Lc 75: body text | Open in checker |
| Primary as link text on background#0b764d on #f4f8f6 | 5.28:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +73.0 | Lc 60: larger content text | Open in checker |
| Primary as link text on surface#0b764d on #fbfffd | 5.60:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +77.2 | Lc 75: body text | Open in checker |
| Button label on primary#fbfcfb on #0b764d | 5.49:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | −80.9 | Lc 75: body text | Open in checker |
| Accent text on background#0070a6 on #f4f8f6 | 5.06:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +71.7 | Lc 60: larger content text | Open in checker |
| Accent text on surface#0070a6 on #fbfffd | 5.38:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +75.9 | Lc 75: body text | Open in checker |
| Border on background#8a8f8c on #f4f8f6 | 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#8a8f8c on #fbfffd | 3.25: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#00673f on #f4f8f6 | 6.50:1 | 3:1 (WCAG 1.4.11) | Pass / Fail | Pass / Pass | +78.8 | Lc 75: body text | Open in checker |
| Focus ring on surface#00673f on #fbfffd | 6.91:1 | 3:1 (WCAG 1.4.11) | Pass / Fail | Pass / Pass | +83.0 | Lc 75: body text | Open in checker |
| Success text on background#008158 on #f4f8f6 | 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 #fbfffd | 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#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 #f4f8f6 | 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 #fbfffd | 4.84:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +72.9 | 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 #f4f8f6 | 7.26:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | +80.5 | Lc 75: body text | Open in checker |
| Error text on surface#a21a1b on #fbfffd | 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#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 #f4f8f6 | 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 #fbfffd | 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#ebf0ed on #141715 | 15.66:1 | AAA 7:1 | Pass / Pass | Pass / Pass | −96.3 | Lc 75: body text | Open in checker |
| Text on surface#ebf0ed on #1e2120 | 14.08:1 | AAA 7:1 | Pass / Pass | Pass / Pass | −95.1 | Lc 75: body text | Open in checker |
| Muted text on background#babfbc on #141715 | 9.68:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −66.4 | Lc 60: larger content text | Open in checker |
| Muted text on surface#babfbc on #1e2120 | 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#7ad4a5 on #141715 | 10.13:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −69.0 | Lc 60: larger content text | Open in checker |
| Primary as link text on surface#7ad4a5 on #1e2120 | 9.11:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −67.8 | Lc 60: larger content text | Open in checker |
| Button label on primary#0d0d0d on #7ad4a5 | 10.90:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | +70.8 | Lc 60: larger content text | Open in checker |
| Accent text on background#76ceff on #141715 | 10.35:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −70.2 | Lc 60: larger content text | Open in checker |
| Accent text on surface#76ceff on #1e2120 | 9.30:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −69.0 | Lc 60: larger content text | Open in checker |
| Border on background#686d6a on #141715 | 3.42:1 | 3:1 (WCAG 1.4.11) | Fail / Fail | Pass / Fail | −24.6 | Below Lc 30 | Open in checker |
| Border on surface#686d6a on #1e2120 | 3.07:1 | 3:1 (WCAG 1.4.11) | Fail / Fail | Pass / Fail | −23.4 | Below Lc 30 | Open in checker |
| Focus ring on background#7ad4a5 on #141715 | 10.13:1 | 3:1 (WCAG 1.4.11) | Pass / Pass | Pass / Pass | −69.0 | Lc 60: larger content text | Open in checker |
| Focus ring on surface#7ad4a5 on #1e2120 | 9.11:1 | 3:1 (WCAG 1.4.11) | Pass / Pass | Pass / Pass | −67.8 | 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 #1e2120 | 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#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 #1e2120 | 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#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 #1e2120 | 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 #1e2120 | 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 teal-green at OKLCH hue 160 and chroma 0.11, a colour that reads as resource, nature and calm, with enough blue in it to separate from plain success green. The accent is a blue at hue 240 for links and secondary actions. Together they form an analogous pair that is easy to read.
Status roles carry most of the weight on utility sites. Outage and fault states use the error and warning colours, each verified as text and as a labelled badge, and the dark theme is verified for night-time use. Because the success and error fills are checked under simulated colour-vision deficiency, a green Restored badge is not mistaken for a red Outage badge.
Because utility sites are visited more heavily during emergencies, such as storms or planned shutdowns, the pages that carry alerts should be light, fast and high contrast. A palette that holds up at the lowest screen brightness, with plain surfaces behind alert text, is more valuable at those moments than any brand flourish or illustrated banner.
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
- Put outage banners at the top of the page in the error or warning badge pair, with an icon and text such as Power outage in your area.
- Show meter readings and bill totals in the full text colour at a large size.
- Colour usage graph series from the dedicated chart palette, and label lines directly or with patterns.
- Avoid using the primary teal for both success and brand in the same view; use the success badge for confirmed states.
- Test the dark theme on a phone at the lowest brightness setting, which is how many people read alerts at night.
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: #f4f8f6;
--color-surface: #fbfffd;
--color-text: #181b1a;
--color-text-muted: #555957;
--color-primary: #0b764d;
--color-primary-foreground: #fbfcfb;
--color-accent: #0070a6;
--color-border: #8a8f8c;
--color-focus-ring: #00673f;
--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: #1e2120;
--color-text: #ebf0ed;
--color-text-muted: #babfbc;
--color-primary: #7ad4a5;
--color-primary-foreground: #0d0d0d;
--color-accent: #76ceff;
--color-border: #686d6a;
--color-focus-ring: #7ad4a5;
--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.976 0.005 165.0);
--color-surface: oklch(0.996 0.005 165.0);
--color-text: oklch(0.219 0.005 173.9);
--color-text-muted: oklch(0.460 0.006 164.8);
--color-primary: oklch(0.501 0.110 160.0);
--color-primary-foreground: oklch(0.990 0.002 145.6);
--color-accent: oklch(0.5199 0.1193 240.09);
--color-border: oklch(0.645 0.007 160.0);
--color-focus-ring: oklch(0.4527 0.1053 158.32);
--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.005 174.0);
--color-text: oklch(0.951 0.007 160.1);
--color-text-muted: oklch(0.800 0.007 160.0);
--color-primary: oklch(0.801 0.111 159.7);
--color-primary-foreground: oklch(0.159 0.000 0.0);
--color-accent: oklch(0.815 0.110 234.7);
--color-border: oklch(0.529 0.008 159.9);
--color-focus-ring: oklch(0.801 0.111 159.7);
--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.976 0.005 165.0); /* #f4f8f6 */
--color-surface: oklch(0.996 0.005 165.0); /* #fbfffd */
--color-text: oklch(0.219 0.005 173.9); /* #181b1a */
--color-text-muted: oklch(0.460 0.006 164.8); /* #555957 */
--color-primary: oklch(0.501 0.110 160.0); /* #0b764d */
--color-primary-foreground: oklch(0.990 0.002 145.6); /* #fbfcfb */
--color-accent: oklch(0.5199 0.1193 240.09); /* #0070a6 */
--color-border: oklch(0.645 0.007 160.0); /* #8a8f8c */
--color-focus-ring: oklch(0.4527 0.1053 158.32); /* #00673f */
--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.005 174.0); /* #1e2120 */
--color-text-dark: oklch(0.951 0.007 160.1); /* #ebf0ed */
--color-text-muted-dark: oklch(0.800 0.007 160.0); /* #babfbc */
--color-primary-dark: oklch(0.801 0.111 159.7); /* #7ad4a5 */
--color-primary-foreground-dark: oklch(0.159 0.000 0.0); /* #0d0d0d */
--color-accent-dark: oklch(0.815 0.110 234.7); /* #76ceff */
--color-border-dark: oklch(0.529 0.008 159.9); /* #686d6a */
--color-focus-ring-dark: oklch(0.801 0.111 159.7); /* #7ad4a5 */
--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.976 0.005 165.0);
--foreground: oklch(0.219 0.005 173.9);
--card: oklch(0.996 0.005 165.0);
--card-foreground: oklch(0.219 0.005 173.9);
--popover: oklch(0.996 0.005 165.0);
--popover-foreground: oklch(0.219 0.005 173.9);
--primary: oklch(0.501 0.110 160.0);
--primary-foreground: oklch(0.990 0.002 145.6);
--secondary: oklch(0.996 0.005 165.0);
--secondary-foreground: oklch(0.219 0.005 173.9);
--muted: oklch(0.996 0.005 165.0);
--muted-foreground: oklch(0.460 0.006 164.8);
--accent: oklch(0.996 0.005 165.0);
--accent-foreground: oklch(0.219 0.005 173.9);
--destructive: oklch(0.551 0.187 27.1);
--destructive-foreground: oklch(0.990 0.002 145.6);
--border: oklch(0.645 0.007 160.0);
--input: oklch(0.645 0.007 160.0);
--ring: oklch(0.4527 0.1053 158.32);
--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.5199 0.1193 240.09);
}
.dark {
--background: oklch(0.201 0.006 156.6);
--foreground: oklch(0.951 0.007 160.1);
--card: oklch(0.244 0.005 174.0);
--card-foreground: oklch(0.951 0.007 160.1);
--popover: oklch(0.244 0.005 174.0);
--popover-foreground: oklch(0.951 0.007 160.1);
--primary: oklch(0.801 0.111 159.7);
--primary-foreground: oklch(0.159 0.000 0.0);
--secondary: oklch(0.244 0.005 174.0);
--secondary-foreground: oklch(0.951 0.007 160.1);
--muted: oklch(0.244 0.005 174.0);
--muted-foreground: oklch(0.800 0.007 160.0);
--accent: oklch(0.244 0.005 174.0);
--accent-foreground: oklch(0.951 0.007 160.1);
--destructive: oklch(0.732 0.165 27.5);
--destructive-foreground: oklch(0.171 0.003 145.5);
--border: oklch(0.529 0.008 159.9);
--input: oklch(0.529 0.008 159.9);
--ring: oklch(0.801 0.111 159.7);
--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.815 0.110 234.7);
}Design tokens (DTCG-style JSON)
{
"color": {
"light": {
"background": {
"$type": "color",
"$value": "oklch(0.976 0.005 165.0)",
"$description": "sRGB #f4f8f6"
},
"surface": {
"$type": "color",
"$value": "oklch(0.996 0.005 165.0)",
"$description": "sRGB #fbfffd"
},
"text": {
"$type": "color",
"$value": "oklch(0.219 0.005 173.9)",
"$description": "sRGB #181b1a"
},
"text-muted": {
"$type": "color",
"$value": "oklch(0.460 0.006 164.8)",
"$description": "sRGB #555957"
},
"primary": {
"$type": "color",
"$value": "oklch(0.501 0.110 160.0)",
"$description": "sRGB #0b764d"
},
"primary-foreground": {
"$type": "color",
"$value": "oklch(0.990 0.002 145.6)",
"$description": "sRGB #fbfcfb"
},
"accent": {
"$type": "color",
"$value": "oklch(0.5199 0.1193 240.09)",
"$description": "sRGB #0070a6"
},
"border": {
"$type": "color",
"$value": "oklch(0.645 0.007 160.0)",
"$description": "sRGB #8a8f8c"
},
"focus-ring": {
"$type": "color",
"$value": "oklch(0.4527 0.1053 158.32)",
"$description": "sRGB #00673f"
},
"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.005 174.0)",
"$description": "sRGB #1e2120"
},
"text": {
"$type": "color",
"$value": "oklch(0.951 0.007 160.1)",
"$description": "sRGB #ebf0ed"
},
"text-muted": {
"$type": "color",
"$value": "oklch(0.800 0.007 160.0)",
"$description": "sRGB #babfbc"
},
"primary": {
"$type": "color",
"$value": "oklch(0.801 0.111 159.7)",
"$description": "sRGB #7ad4a5"
},
"primary-foreground": {
"$type": "color",
"$value": "oklch(0.159 0.000 0.0)",
"$description": "sRGB #0d0d0d"
},
"accent": {
"$type": "color",
"$value": "oklch(0.815 0.110 234.7)",
"$description": "sRGB #76ceff"
},
"border": {
"$type": "color",
"$value": "oklch(0.529 0.008 159.9)",
"$description": "sRGB #686d6a"
},
"focus-ring": {
"$type": "color",
"$value": "oklch(0.801 0.111 159.7)",
"$description": "sRGB #7ad4a5"
},
"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 #0B764D in the OKLCH picker →Build a tonal scale →Check a pair
FAQ
- Why is the primary teal-green rather than a standard green?
- A teal-green separates from the plain green used for success, so brand elements do not read as status. It also leans toward blue, which is easier to tell from red for many colour-blind users.
- Are outage colours distinguishable for colour blindness?
- The success and error fills are tested under protanopia, deuteranopia and tritanopia simulations. The table shows the smallest difference. Always include words.
- Can I use these colours in a bill PDF?
- Yes. The exports give hex values for tools without oklch() support.
- Where should graphs get their colours?
- From the colorblind-friendly charts palette, which is built for categorical series.