OKLCH Studio · Accessible palettes · Special needs
Colorblind-friendly colour palette for interfaces
Updated 2026-10-19
When people search for a colourblind-friendly palette they often mean two things: avoid red-green clashes in the interface, and make sure information is not carried by colour alone. This page handles the first with data and the second with advice. For charts, see the separate chart palettes.
The interface palette is built on blue and orange, which differ on the blue-yellow axis that most colour-vision deficiencies keep, and on lightness. The success and error fills are also tested: they are simulated for protanopia, deuteranopia and tritanopia, and the smallest difference between them must reach a stricter threshold than in other palettes.
Every pair is also verified for WCAG contrast. Colour-vision deficiency does not change contrast ratios, but it does remove the safety net of hue, so lightness contrast has to carry more of the weight. That is another reason the text and fills here are solved for it explicitly.
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
#F4F7FA
oklch(0.975 0.005 247.9)
Sample text
- Surface
#FCFEFF
oklch(0.996 0.003 228.8)
Sample text
- Text
#191B1D
oklch(0.221 0.005 248.1)
Sample text
- Muted text
#55585C
oklch(0.459 0.008 255.5)
Sample text
- Primary
#2063B0
oklch(0.500 0.139 254.8)
Sample text
- Primary foreground
#FBFCFD
oklch(0.991 0.002 247.8)
Sample text
- Accent
#AE4300
oklch(0.522 0.153 43.5)
Sample text
- Border
#8B8E93
oklch(0.646 0.008 260.7)
Sample text
- Focus ring
#0C54A0
oklch(0.450 0.140 254.9)
Sample text
- Success
#007F74
oklch(0.536 0.095 184.3)
Sample text
- Success fill
#008276
oklch(0.545 0.097 183.6)
Sample text
- Success fill label
#FBFCFD
oklch(0.991 0.002 247.8)
Sample text
- Warning
#9E6400
oklch(0.553 0.120 70.3)
Sample text
- Warning fill
#FFBD29
oklch(0.8375 0.1637 81.45)
Sample text
- Warning fill label
#0F0F10
oklch(0.169 0.002 286.2)
Sample text
- Error
#A90000
oklch(0.461 0.189 29.2)
Sample text
- Error fill
#D02112
oklch(0.551 0.209 30.0)
Sample text
- Error fill label
#FBFCFD
oklch(0.991 0.002 247.8)
Sample text
- Info
#496BBA
oklch(0.541 0.130 264.9)
Sample text
- Info fill
#486CC4
oklch(0.549 0.143 265.3)
Sample text
- Info fill label
#FBFCFD
oklch(0.991 0.002 247.8)
Sample text
Appointment confirmed
Secondary text sits on the surface colour.
Link in primary · Accent text
Dark theme
- Background
#151618
oklch(0.200 0.004 264.5)
Sample text
- Surface
#1F2123
oklch(0.246 0.005 248.0)
Sample text
- Text
#ECEFF2
oklch(0.951 0.005 247.9)
Sample text
- Muted text
#BABEC3
oklch(0.800 0.008 253.9)
Sample text
- Primary
#7DC1FF
oklch(0.790 0.113 247.2)
Sample text
- Primary foreground
#0D0D0E
oklch(0.160 0.002 286.2)
Sample text
- Accent
#FFA348
oklch(0.792 0.150 62.0)
Sample text
- Border
#686C70
oklch(0.529 0.008 248.0)
Sample text
- Focus ring
#7DC1FF
oklch(0.790 0.113 247.2)
Sample text
- Success
#6AE2D4
oklch(0.840 0.110 185.1)
Sample text
- Success fill
#38CABB
oklch(0.7606 0.1214 184.79)
Sample text
- Success fill label
#0F0F10
oklch(0.169 0.002 286.2)
Sample text
- Warning
#FDBE45
oklch(0.839 0.150 80.0)
Sample text
- Warning fill
#E7A300
oklch(0.7613 0.1583 78.64)
Sample text
- Warning fill label
#0F0F10
oklch(0.169 0.002 286.2)
Sample text
- Error
#FE6652
oklch(0.700 0.189 30.1)
Sample text
- Error fill
#FF715B
oklch(0.717 0.178 30.8)
Sample text
- Error fill label
#0F0F10
oklch(0.169 0.002 286.2)
Sample text
- Info
#8EB5FF
oklch(0.774 0.115 262.7)
Sample text
- Info fill
#84AEFF
oklch(0.753 0.126 262.8)
Sample text
- Info fill label
#0F0F10
oklch(0.169 0.002 286.2)
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#191b1d on #f4f7fa | 16.06:1 | AAA 7:1 | Pass / Pass | Pass / Pass | +99.1 | Lc 75: body text | Open in checker |
| Text on surface#191b1d on #fcfeff | 17.07:1 | AAA 7:1 | Pass / Pass | Pass / Pass | +103.3 | Lc 75: body text | Open in checker |
| Muted text on background#55585c on #f4f7fa | 6.65:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +79.8 | Lc 75: body text | Open in checker |
| Muted text on surface#55585c on #fcfeff | 7.06:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | +84.0 | Lc 75: body text | Open in checker |
| Primary as link text on background#2063b0 on #f4f7fa | 5.62:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +74.7 | Lc 60: larger content text | Open in checker |
| Primary as link text on surface#2063b0 on #fcfeff | 5.97:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +79.0 | Lc 75: body text | Open in checker |
| Button label on primary#fbfcfd on #2063b0 | 5.88:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | −82.9 | Lc 75: body text | Open in checker |
| Accent text on background#ae4300 on #f4f7fa | 5.42:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +73.2 | Lc 60: larger content text | Open in checker |
| Accent text on surface#ae4300 on #fcfeff | 5.76:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +77.4 | Lc 75: body text | Open in checker |
| Border on background#8b8e93 on #f4f7fa | 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#8b8e93 on #fcfeff | 3.24:1 | 3:1 (WCAG 1.4.11) | Fail / Fail | Pass / Fail | +59.4 | Lc 45: headlines and large text | Open in checker |
| Focus ring on background#0c54a0 on #f4f7fa | 6.99:1 | 3:1 (WCAG 1.4.11) | Pass / Fail | Pass / Pass | +80.5 | Lc 75: body text | Open in checker |
| Focus ring on surface#0c54a0 on #fcfeff | 7.43:1 | 3:1 (WCAG 1.4.11) | Pass / Pass | Pass / Pass | +84.7 | Lc 75: body text | Open in checker |
| Success text on background#007f74 on #f4f7fa | 4.55:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +68.3 | Lc 60: larger content text | Open in checker |
| Success text on surface#007f74 on #fcfeff | 4.84:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +72.5 | Lc 60: larger content text | Open in checker |
| Success badge label on fill#fbfcfd on #008276 | 4.58:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | −75.5 | Lc 75: body text | Open in checker |
| Warning text on background#9e6400 on #f4f7fa | 4.56:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +68.6 | Lc 60: larger content text | Open in checker |
| Warning text on surface#9e6400 on #fcfeff | 4.85:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +72.9 | Lc 60: larger content text | Open in checker |
| Warning badge label on fill#0f0f10 on #ffbd29 | 11.46:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | +74.1 | Lc 60: larger content text | Open in checker |
| Error text on background#a90000 on #f4f7fa | 7.26:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | +79.4 | Lc 75: body text | Open in checker |
| Error text on surface#a90000 on #fcfeff | 7.72:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | +83.6 | Lc 75: body text | Open in checker |
| Error badge label on fill#fbfcfd on #d02112 | 5.23:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | −78.1 | Lc 75: body text | Open in checker |
| Info text on background#496bba on #f4f7fa | 4.76:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +70.1 | Lc 60: larger content text | Open in checker |
| Info text on surface#496bba on #fcfeff | 5.06:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | +74.3 | Lc 60: larger content text | Open in checker |
| Info badge label on fill#fbfcfd on #486cc4 | 4.84:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | −77.5 | 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#eceff2 on #151618 | 15.68:1 | AAA 7:1 | Pass / Pass | Pass / Pass | −96.2 | Lc 75: body text | Open in checker |
| Text on surface#eceff2 on #1f2123 | 13.99:1 | AAA 7:1 | Pass / Pass | Pass / Pass | −94.9 | Lc 75: body text | Open in checker |
| Muted text on background#babec3 on #151618 | 9.69:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −66.3 | Lc 60: larger content text | Open in checker |
| Muted text on surface#babec3 on #1f2123 | 8.64: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#7dc1ff on #151618 | 9.43:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −65.0 | Lc 60: larger content text | Open in checker |
| Primary as link text on surface#7dc1ff on #1f2123 | 8.41:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −63.7 | Lc 60: larger content text | Open in checker |
| Button label on primary#0d0d0e on #7dc1ff | 10.12:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | +67.0 | Lc 60: larger content text | Open in checker |
| Accent text on background#ffa348 on #151618 | 9.12:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −63.5 | Lc 60: larger content text | Open in checker |
| Accent text on surface#ffa348 on #1f2123 | 8.14:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −62.1 | Lc 60: larger content text | Open in checker |
| Border on background#686c70 on #151618 | 3.42:1 | 3:1 (WCAG 1.4.11) | Fail / Fail | Pass / Fail | −24.5 | Below Lc 30 | Open in checker |
| Border on surface#686c70 on #1f2123 | 3.05:1 | 3:1 (WCAG 1.4.11) | Fail / Fail | Pass / Fail | −23.2 | Below Lc 30 | Open in checker |
| Focus ring on background#7dc1ff on #151618 | 9.43:1 | 3:1 (WCAG 1.4.11) | Pass / Pass | Pass / Pass | −65.0 | Lc 60: larger content text | Open in checker |
| Focus ring on surface#7dc1ff on #1f2123 | 8.41:1 | 3:1 (WCAG 1.4.11) | Pass / Pass | Pass / Pass | −63.7 | Lc 60: larger content text | Open in checker |
| Success text on background#6ae2d4 on #151618 | 11.58:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −76.7 | Lc 75: body text | Open in checker |
| Success text on surface#6ae2d4 on #1f2123 | 10.33:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −75.3 | Lc 75: body text | Open in checker |
| Success badge label on fill#0f0f10 on #38cabb | 9.42:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | +64.3 | Lc 60: larger content text | Open in checker |
| Warning text on background#fdbe45 on #151618 | 10.88:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −73.0 | Lc 60: larger content text | Open in checker |
| Warning text on surface#fdbe45 on #1f2123 | 9.71:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −71.6 | Lc 60: larger content text | Open in checker |
| Warning badge label on fill#0f0f10 on #e7a300 | 8.79:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | +60.9 | Lc 60: larger content text | Open in checker |
| Error text on background#fe6652 on #151618 | 6.23:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | −46.4 | Lc 45: headlines and large text | Open in checker |
| Error text on surface#fe6652 on #1f2123 | 5.56:1 | AA 4.5:1 | Pass / Fail | Pass / Pass | −45.1 | Lc 45: headlines and large text | Open in checker |
| Error badge label on fill#0f0f10 on #ff715b | 7.08:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | +51.8 | Lc 45: headlines and large text | Open in checker |
| Info text on background#8eb5ff on #151618 | 8.79:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −61.4 | Lc 60: larger content text | Open in checker |
| Info text on surface#8eb5ff on #1f2123 | 7.84:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | −60.0 | Lc 60: larger content text | Open in checker |
| Info badge label on fill#0f0f10 on #84aeff | 8.64:1 | AA 4.5:1 | Pass / Pass | Pass / Pass | +59.9 | Lc 45: headlines and large 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 8 Δ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 8 |
|---|---|---|---|---|---|
| success / warning | 35.8 | 29.3 | 42.3 | 31.2 | Shown only |
| success / error | 29.9 | 23.2 | 13.4 | 35.4 | Yes |
| success / info | 16.1 | 13.5 | 11.6 | 5.1 | Shown only |
| warning / error | 33.2 | 47.9 | 41.5 | 21.9 | Shown only |
| warning / info | 42.1 | 37.3 | 44.1 | 32.0 | Shown only |
| error / info | 31.3 | 30.8 | 24.8 | 34.1 | Shown only |
Fills as simulated:Normal visionProtanopiaDeuteranopiaTritanopia
| Pair | Normal vision | Protanopia | Deuteranopia | Tritanopia | Held to 8 |
|---|---|---|---|---|---|
| success / warning | 22.5 | 16.5 | 21.2 | 28.1 | Shown only |
| success / error | 29.5 | 19.5 | 13.1 | 33.2 | Yes |
| success / info | 15.6 | 11.2 | 9.2 | 7.1 | Shown only |
| warning / error | 14.4 | 15.3 | 12.0 | 7.0 | Shown only |
| warning / info | 28.4 | 26.8 | 29.0 | 23.2 | Shown only |
| error / info | 27.6 | 24.4 | 22.2 | 27.5 | Shown only |
Fills as simulated:Normal visionProtanopiaDeuteranopiaTritanopia
Why these colours
The primary is blue at OKLCH hue 255 and the accent an orange at hue 55 and chroma 0.17. For most deficiency types the pair stays far apart. For status, success is moved to a cyan-teal at hue 185 and error to a red-orange at 30, and the generator keeps the error fill darker than the success fill, for a lightness gap that survives simulation.
The smallest difference between success and error under all three simulations must be at least 8 ΔE-OK, higher than the default of 6. The table also lists the other status pairs, which are not held to a threshold; where they are low, such as warning against success under some simulations, the advice is to add an icon and a word.
A practical test is to take a screenshot of each screen, convert it to grayscale, and ask whether every state is still understandable. If the answer is yes for selected items, errors, links and charts, then the design does not depend on hue alone, which is the real goal behind a colourblind-friendly palette, and the colours then become a reinforcement instead of a requirement.
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 99% of the requested chroma; hue was held throughout.
How to use it
- Add an icon and a text label to every status, so colour is a reinforcement, not the only cue.
- Use underlines for links and a shape change for selected states, such as a check mark.
- Avoid placing red and green next to each other, and avoid orange and green for critical states.
- In forms, mark errors with text and an icon, and keep the colour for emphasis.
- Test with a simulator and with real users; simulations are models, not a replacement for people.
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: #f4f7fa;
--color-surface: #fcfeff;
--color-text: #191b1d;
--color-text-muted: #55585c;
--color-primary: #2063b0;
--color-primary-foreground: #fbfcfd;
--color-accent: #ae4300;
--color-border: #8b8e93;
--color-focus-ring: #0c54a0;
--color-success: #007f74;
--color-success-solid: #008276;
--color-success-solid-foreground: #fbfcfd;
--color-warning: #9e6400;
--color-warning-solid: #ffbd29;
--color-warning-solid-foreground: #0f0f10;
--color-error: #a90000;
--color-error-solid: #d02112;
--color-error-solid-foreground: #fbfcfd;
--color-info: #496bba;
--color-info-solid: #486cc4;
--color-info-solid-foreground: #fbfcfd;
}
.dark {
--color-background: #151618;
--color-surface: #1f2123;
--color-text: #eceff2;
--color-text-muted: #babec3;
--color-primary: #7dc1ff;
--color-primary-foreground: #0d0d0e;
--color-accent: #ffa348;
--color-border: #686c70;
--color-focus-ring: #7dc1ff;
--color-success: #6ae2d4;
--color-success-solid: #38cabb;
--color-success-solid-foreground: #0f0f10;
--color-warning: #fdbe45;
--color-warning-solid: #e7a300;
--color-warning-solid-foreground: #0f0f10;
--color-error: #fe6652;
--color-error-solid: #ff715b;
--color-error-solid-foreground: #0f0f10;
--color-info: #8eb5ff;
--color-info-solid: #84aeff;
--color-info-solid-foreground: #0f0f10;
}
/* 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.005 247.9);
--color-surface: oklch(0.996 0.003 228.8);
--color-text: oklch(0.221 0.005 248.1);
--color-text-muted: oklch(0.459 0.008 255.5);
--color-primary: oklch(0.500 0.139 254.8);
--color-primary-foreground: oklch(0.991 0.002 247.8);
--color-accent: oklch(0.522 0.153 43.5);
--color-border: oklch(0.646 0.008 260.7);
--color-focus-ring: oklch(0.450 0.140 254.9);
--color-success: oklch(0.536 0.095 184.3);
--color-success-solid: oklch(0.545 0.097 183.6);
--color-success-solid-foreground: oklch(0.991 0.002 247.8);
--color-warning: oklch(0.553 0.120 70.3);
--color-warning-solid: oklch(0.8375 0.1637 81.45);
--color-warning-solid-foreground: oklch(0.169 0.002 286.2);
--color-error: oklch(0.461 0.189 29.2);
--color-error-solid: oklch(0.551 0.209 30.0);
--color-error-solid-foreground: oklch(0.991 0.002 247.8);
--color-info: oklch(0.541 0.130 264.9);
--color-info-solid: oklch(0.549 0.143 265.3);
--color-info-solid-foreground: oklch(0.991 0.002 247.8);
}
.dark {
--color-background: oklch(0.200 0.004 264.5);
--color-surface: oklch(0.246 0.005 248.0);
--color-text: oklch(0.951 0.005 247.9);
--color-text-muted: oklch(0.800 0.008 253.9);
--color-primary: oklch(0.790 0.113 247.2);
--color-primary-foreground: oklch(0.160 0.002 286.2);
--color-accent: oklch(0.792 0.150 62.0);
--color-border: oklch(0.529 0.008 248.0);
--color-focus-ring: oklch(0.790 0.113 247.2);
--color-success: oklch(0.840 0.110 185.1);
--color-success-solid: oklch(0.7606 0.1214 184.79);
--color-success-solid-foreground: oklch(0.169 0.002 286.2);
--color-warning: oklch(0.839 0.150 80.0);
--color-warning-solid: oklch(0.7613 0.1583 78.64);
--color-warning-solid-foreground: oklch(0.169 0.002 286.2);
--color-error: oklch(0.700 0.189 30.1);
--color-error-solid: oklch(0.717 0.178 30.8);
--color-error-solid-foreground: oklch(0.169 0.002 286.2);
--color-info: oklch(0.774 0.115 262.7);
--color-info-solid: oklch(0.753 0.126 262.8);
--color-info-solid-foreground: oklch(0.169 0.002 286.2);
}
}Tailwind CSS v4 @theme
@theme {
/* light */
--color-background: oklch(0.975 0.005 247.9); /* #f4f7fa */
--color-surface: oklch(0.996 0.003 228.8); /* #fcfeff */
--color-text: oklch(0.221 0.005 248.1); /* #191b1d */
--color-text-muted: oklch(0.459 0.008 255.5); /* #55585c */
--color-primary: oklch(0.500 0.139 254.8); /* #2063b0 */
--color-primary-foreground: oklch(0.991 0.002 247.8); /* #fbfcfd */
--color-accent: oklch(0.522 0.153 43.5); /* #ae4300 */
--color-border: oklch(0.646 0.008 260.7); /* #8b8e93 */
--color-focus-ring: oklch(0.450 0.140 254.9); /* #0c54a0 */
--color-success: oklch(0.536 0.095 184.3); /* #007f74 */
--color-success-solid: oklch(0.545 0.097 183.6); /* #008276 */
--color-success-solid-foreground: oklch(0.991 0.002 247.8); /* #fbfcfd */
--color-warning: oklch(0.553 0.120 70.3); /* #9e6400 */
--color-warning-solid: oklch(0.8375 0.1637 81.45); /* #ffbd29 */
--color-warning-solid-foreground: oklch(0.169 0.002 286.2); /* #0f0f10 */
--color-error: oklch(0.461 0.189 29.2); /* #a90000 */
--color-error-solid: oklch(0.551 0.209 30.0); /* #d02112 */
--color-error-solid-foreground: oklch(0.991 0.002 247.8); /* #fbfcfd */
--color-info: oklch(0.541 0.130 264.9); /* #496bba */
--color-info-solid: oklch(0.549 0.143 265.3); /* #486cc4 */
--color-info-solid-foreground: oklch(0.991 0.002 247.8); /* #fbfcfd */
/* dark: use as dark:bg-background-dark, or remap under a .dark selector */
--color-background-dark: oklch(0.200 0.004 264.5); /* #151618 */
--color-surface-dark: oklch(0.246 0.005 248.0); /* #1f2123 */
--color-text-dark: oklch(0.951 0.005 247.9); /* #eceff2 */
--color-text-muted-dark: oklch(0.800 0.008 253.9); /* #babec3 */
--color-primary-dark: oklch(0.790 0.113 247.2); /* #7dc1ff */
--color-primary-foreground-dark: oklch(0.160 0.002 286.2); /* #0d0d0e */
--color-accent-dark: oklch(0.792 0.150 62.0); /* #ffa348 */
--color-border-dark: oklch(0.529 0.008 248.0); /* #686c70 */
--color-focus-ring-dark: oklch(0.790 0.113 247.2); /* #7dc1ff */
--color-success-dark: oklch(0.840 0.110 185.1); /* #6ae2d4 */
--color-success-solid-dark: oklch(0.7606 0.1214 184.79); /* #38cabb */
--color-success-solid-foreground-dark: oklch(0.169 0.002 286.2); /* #0f0f10 */
--color-warning-dark: oklch(0.839 0.150 80.0); /* #fdbe45 */
--color-warning-solid-dark: oklch(0.7613 0.1583 78.64); /* #e7a300 */
--color-warning-solid-foreground-dark: oklch(0.169 0.002 286.2); /* #0f0f10 */
--color-error-dark: oklch(0.700 0.189 30.1); /* #fe6652 */
--color-error-solid-dark: oklch(0.717 0.178 30.8); /* #ff715b */
--color-error-solid-foreground-dark: oklch(0.169 0.002 286.2); /* #0f0f10 */
--color-info-dark: oklch(0.774 0.115 262.7); /* #8eb5ff */
--color-info-solid-dark: oklch(0.753 0.126 262.8); /* #84aeff */
--color-info-solid-foreground-dark: oklch(0.169 0.002 286.2); /* #0f0f10 */
}shadcn/ui variables (:root and .dark)
:root {
--background: oklch(0.975 0.005 247.9);
--foreground: oklch(0.221 0.005 248.1);
--card: oklch(0.996 0.003 228.8);
--card-foreground: oklch(0.221 0.005 248.1);
--popover: oklch(0.996 0.003 228.8);
--popover-foreground: oklch(0.221 0.005 248.1);
--primary: oklch(0.500 0.139 254.8);
--primary-foreground: oklch(0.991 0.002 247.8);
--secondary: oklch(0.996 0.003 228.8);
--secondary-foreground: oklch(0.221 0.005 248.1);
--muted: oklch(0.996 0.003 228.8);
--muted-foreground: oklch(0.459 0.008 255.5);
--accent: oklch(0.996 0.003 228.8);
--accent-foreground: oklch(0.221 0.005 248.1);
--destructive: oklch(0.551 0.209 30.0);
--destructive-foreground: oklch(0.991 0.002 247.8);
--border: oklch(0.646 0.008 260.7);
--input: oklch(0.646 0.008 260.7);
--ring: oklch(0.450 0.140 254.9);
--success: oklch(0.545 0.097 183.6);
--success-foreground: oklch(0.991 0.002 247.8);
--warning: oklch(0.8375 0.1637 81.45);
--warning-foreground: oklch(0.169 0.002 286.2);
--info: oklch(0.549 0.143 265.3);
--info-foreground: oklch(0.991 0.002 247.8);
--brand-accent: oklch(0.522 0.153 43.5);
}
.dark {
--background: oklch(0.200 0.004 264.5);
--foreground: oklch(0.951 0.005 247.9);
--card: oklch(0.246 0.005 248.0);
--card-foreground: oklch(0.951 0.005 247.9);
--popover: oklch(0.246 0.005 248.0);
--popover-foreground: oklch(0.951 0.005 247.9);
--primary: oklch(0.790 0.113 247.2);
--primary-foreground: oklch(0.160 0.002 286.2);
--secondary: oklch(0.246 0.005 248.0);
--secondary-foreground: oklch(0.951 0.005 247.9);
--muted: oklch(0.246 0.005 248.0);
--muted-foreground: oklch(0.800 0.008 253.9);
--accent: oklch(0.246 0.005 248.0);
--accent-foreground: oklch(0.951 0.005 247.9);
--destructive: oklch(0.717 0.178 30.8);
--destructive-foreground: oklch(0.169 0.002 286.2);
--border: oklch(0.529 0.008 248.0);
--input: oklch(0.529 0.008 248.0);
--ring: oklch(0.790 0.113 247.2);
--success: oklch(0.7606 0.1214 184.79);
--success-foreground: oklch(0.169 0.002 286.2);
--warning: oklch(0.7613 0.1583 78.64);
--warning-foreground: oklch(0.169 0.002 286.2);
--info: oklch(0.753 0.126 262.8);
--info-foreground: oklch(0.169 0.002 286.2);
--brand-accent: oklch(0.792 0.150 62.0);
}Design tokens (DTCG-style JSON)
{
"color": {
"light": {
"background": {
"$type": "color",
"$value": "oklch(0.975 0.005 247.9)",
"$description": "sRGB #f4f7fa"
},
"surface": {
"$type": "color",
"$value": "oklch(0.996 0.003 228.8)",
"$description": "sRGB #fcfeff"
},
"text": {
"$type": "color",
"$value": "oklch(0.221 0.005 248.1)",
"$description": "sRGB #191b1d"
},
"text-muted": {
"$type": "color",
"$value": "oklch(0.459 0.008 255.5)",
"$description": "sRGB #55585c"
},
"primary": {
"$type": "color",
"$value": "oklch(0.500 0.139 254.8)",
"$description": "sRGB #2063b0"
},
"primary-foreground": {
"$type": "color",
"$value": "oklch(0.991 0.002 247.8)",
"$description": "sRGB #fbfcfd"
},
"accent": {
"$type": "color",
"$value": "oklch(0.522 0.153 43.5)",
"$description": "sRGB #ae4300"
},
"border": {
"$type": "color",
"$value": "oklch(0.646 0.008 260.7)",
"$description": "sRGB #8b8e93"
},
"focus-ring": {
"$type": "color",
"$value": "oklch(0.450 0.140 254.9)",
"$description": "sRGB #0c54a0"
},
"success": {
"$type": "color",
"$value": "oklch(0.536 0.095 184.3)",
"$description": "sRGB #007f74"
},
"success-solid": {
"$type": "color",
"$value": "oklch(0.545 0.097 183.6)",
"$description": "sRGB #008276"
},
"success-solid-foreground": {
"$type": "color",
"$value": "oklch(0.991 0.002 247.8)",
"$description": "sRGB #fbfcfd"
},
"warning": {
"$type": "color",
"$value": "oklch(0.553 0.120 70.3)",
"$description": "sRGB #9e6400"
},
"warning-solid": {
"$type": "color",
"$value": "oklch(0.8375 0.1637 81.45)",
"$description": "sRGB #ffbd29"
},
"warning-solid-foreground": {
"$type": "color",
"$value": "oklch(0.169 0.002 286.2)",
"$description": "sRGB #0f0f10"
},
"error": {
"$type": "color",
"$value": "oklch(0.461 0.189 29.2)",
"$description": "sRGB #a90000"
},
"error-solid": {
"$type": "color",
"$value": "oklch(0.551 0.209 30.0)",
"$description": "sRGB #d02112"
},
"error-solid-foreground": {
"$type": "color",
"$value": "oklch(0.991 0.002 247.8)",
"$description": "sRGB #fbfcfd"
},
"info": {
"$type": "color",
"$value": "oklch(0.541 0.130 264.9)",
"$description": "sRGB #496bba"
},
"info-solid": {
"$type": "color",
"$value": "oklch(0.549 0.143 265.3)",
"$description": "sRGB #486cc4"
},
"info-solid-foreground": {
"$type": "color",
"$value": "oklch(0.991 0.002 247.8)",
"$description": "sRGB #fbfcfd"
}
},
"dark": {
"background": {
"$type": "color",
"$value": "oklch(0.200 0.004 264.5)",
"$description": "sRGB #151618"
},
"surface": {
"$type": "color",
"$value": "oklch(0.246 0.005 248.0)",
"$description": "sRGB #1f2123"
},
"text": {
"$type": "color",
"$value": "oklch(0.951 0.005 247.9)",
"$description": "sRGB #eceff2"
},
"text-muted": {
"$type": "color",
"$value": "oklch(0.800 0.008 253.9)",
"$description": "sRGB #babec3"
},
"primary": {
"$type": "color",
"$value": "oklch(0.790 0.113 247.2)",
"$description": "sRGB #7dc1ff"
},
"primary-foreground": {
"$type": "color",
"$value": "oklch(0.160 0.002 286.2)",
"$description": "sRGB #0d0d0e"
},
"accent": {
"$type": "color",
"$value": "oklch(0.792 0.150 62.0)",
"$description": "sRGB #ffa348"
},
"border": {
"$type": "color",
"$value": "oklch(0.529 0.008 248.0)",
"$description": "sRGB #686c70"
},
"focus-ring": {
"$type": "color",
"$value": "oklch(0.790 0.113 247.2)",
"$description": "sRGB #7dc1ff"
},
"success": {
"$type": "color",
"$value": "oklch(0.840 0.110 185.1)",
"$description": "sRGB #6ae2d4"
},
"success-solid": {
"$type": "color",
"$value": "oklch(0.7606 0.1214 184.79)",
"$description": "sRGB #38cabb"
},
"success-solid-foreground": {
"$type": "color",
"$value": "oklch(0.169 0.002 286.2)",
"$description": "sRGB #0f0f10"
},
"warning": {
"$type": "color",
"$value": "oklch(0.839 0.150 80.0)",
"$description": "sRGB #fdbe45"
},
"warning-solid": {
"$type": "color",
"$value": "oklch(0.7613 0.1583 78.64)",
"$description": "sRGB #e7a300"
},
"warning-solid-foreground": {
"$type": "color",
"$value": "oklch(0.169 0.002 286.2)",
"$description": "sRGB #0f0f10"
},
"error": {
"$type": "color",
"$value": "oklch(0.700 0.189 30.1)",
"$description": "sRGB #fe6652"
},
"error-solid": {
"$type": "color",
"$value": "oklch(0.717 0.178 30.8)",
"$description": "sRGB #ff715b"
},
"error-solid-foreground": {
"$type": "color",
"$value": "oklch(0.169 0.002 286.2)",
"$description": "sRGB #0f0f10"
},
"info": {
"$type": "color",
"$value": "oklch(0.774 0.115 262.7)",
"$description": "sRGB #8eb5ff"
},
"info-solid": {
"$type": "color",
"$value": "oklch(0.753 0.126 262.8)",
"$description": "sRGB #84aeff"
},
"info-solid-foreground": {
"$type": "color",
"$value": "oklch(0.169 0.002 286.2)",
"$description": "sRGB #0f0f10"
}
}
}
}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 #2063B0 in the OKLCH picker →Build a tonal scale →Check a pair
FAQ
- Is blue and orange always safe?
- It is robust for red-green deficiencies. Tritanopia, which is rare, affects blue-yellow perception, so lightness difference and labels still matter. The table shows the tritanopia figures.
- Can colour-blind users see contrast differences?
- Yes, lightness contrast is largely unaffected, which is why WCAG ratios remain valid. What is lost is hue discrimination.
- Where can I preview a pair?
- The colour blindness page previews a text and background pair under protanopia, deuteranopia, tritanopia and achromatopsia.
- Is this also a charts palette?
- No. For chart series use the colorblind-friendly charts palette, which is optimised for many categories.