Is this palette for children?

It is aimed at older students and adults. For young learners, the e-learning palette uses higher chroma while still meeting AA.

Why not use gold as a main colour?

Gold and yellow have high lightness, so they cannot be used as text on light backgrounds without darkening to brown. They work well as fills behind dark text, which is how the warning badge uses them.

Can I use this in a learning management system?

Yes, if the system lets you set CSS variables. The export snippets give you variable names and values; check any embedded third-party content separately.

Are APCA values included?

Yes. Each row of the table lists a signed APCA Lc value and the highest published tier it reaches, next to the WCAG 2.x ratio.

OKLCH Studio · Accessible palettes · Industries

Accessible color palette for education (WCAG 2.2 verified)

Updated 2026-10-19

Education sites serve a very mixed audience at once: prospective students comparing courses, current students submitting work against a deadline, parents, and staff who live in the system all day. Many of those pages are long-form reading, from handbooks and syllabi to policy pages, so comfortable, accessible text matters as much as brand colour.

Universities and schools often have accessibility obligations to students with disabilities, and WCAG 2.2 AA is the level most commonly referenced in policies. This palette meets it for every listed pair and raises reading text to AAA. For young children, see the separate e-learning palette, which allows more saturated colour.

Coursework systems also rely on colour for status: submitted, late, graded. These states are verified as text and as badge fills, with label colours chosen for contrast, so a calendar of deadlines remains legible.

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
#F7F6FA
oklch(0.975 0.005 297.7)
Sample text
Surface
#FEFDFF
oklch(0.995 0.003 308.4)
Sample text
Text
#1B1A1E
oklch(0.221 0.008 297.2)
Sample text
Muted text
#58575D
oklch(0.460 0.010 293.7)
Sample text
Primary
#6A4FA9
oklch(0.500 0.139 294.7)
Sample text
Primary foreground
#FCFBFD
oklch(0.989 0.003 308.4)
Sample text
Accent
#7F6700
oklch(0.522 0.107 92.8)
Sample text
Border
#8F8D93
oklch(0.647 0.009 301.3)
Sample text
Focus ring
#5D4099
oklch(0.450 0.140 295.2)
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
#FCFBFD
oklch(0.989 0.003 308.4)
Sample text
Warning
#A06300
oklch(0.5541 0.1212 68.45)
Sample text
Warning fill
#FFBA44
oklch(0.8335 0.1508 76.88)
Sample text
Warning fill label
#0F0F10
oklch(0.169 0.002 286.2)
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
#FCFBFD
oklch(0.989 0.003 308.4)
Sample text
Info
#2274AF
oklch(0.540 0.120 245.0)
Sample text
Info fill
#1377B9
oklch(0.5501 0.1324 245.13)
Sample text
Info fill label
#FCFBFD
oklch(0.989 0.003 308.4)
Sample text

Appointment confirmed

Secondary text sits on the surface colour.

Link in primary · Accent text

Primary buttonSuccessWarningErrorInfo

Dark theme

Background
#161619
oklch(0.202 0.006 285.9)
Sample text
Surface
#212023
oklch(0.246 0.006 301.1)
Sample text
Text
#EFEEF3
oklch(0.951 0.007 295.4)
Sample text
Muted text
#BEBDC3
oklch(0.801 0.008 293.9)
Sample text
Primary
#C4ABFF
oklch(0.794 0.119 297.3)
Sample text
Primary foreground
#0D0D0E
oklch(0.160 0.002 286.2)
Sample text
Accent
#DCC363
oklch(0.819 0.120 95.0)
Sample text
Border
#6C6B70
oklch(0.530 0.008 295.3)
Sample text
Focus ring
#C4ABFF
oklch(0.794 0.119 297.3)
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
#0F0F10
oklch(0.169 0.002 286.2)
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
#0F0F10
oklch(0.169 0.002 286.2)
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
#0F0F10
oklch(0.169 0.002 286.2)
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
#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.

Light theme: 25 pairs
Pair	WCAG ratio	Target	Normal AA / AAA	Large AA / AAA	APCA Lc	APCA tier	Check
Text on background#1b1a1e on #f7f6fa	16.08:1	AAA 7:1	Pass / Pass	Pass / Pass	+99.1	Lc 75: body text	Open in checker
Text on surface#1b1a1e on #fefdff	17.07:1	AAA 7:1	Pass / Pass	Pass / Pass	+103.2	Lc 75: body text	Open in checker
Muted text on background#58575d on #f7f6fa	6.64:1	AA 4.5:1	Pass / Fail	Pass / Pass	+79.8	Lc 75: body text	Open in checker
Muted text on surface#58575d on #fefdff	7.05:1	AA 4.5:1	Pass / Pass	Pass / Pass	+83.9	Lc 75: body text	Open in checker
Primary as link text on background#6a4fa9 on #f7f6fa	5.90:1	AA 4.5:1	Pass / Fail	Pass / Pass	+76.3	Lc 75: body text	Open in checker
Primary as link text on surface#6a4fa9 on #fefdff	6.26:1	AA 4.5:1	Pass / Fail	Pass / Pass	+80.4	Lc 75: body text	Open in checker
Button label on primary#fcfbfd on #6a4fa9	6.16:1	AA 4.5:1	Pass / Fail	Pass / Pass	−84.1	Lc 75: body text	Open in checker
Accent text on background#7f6700 on #f7f6fa	5.07:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.0	Lc 60: larger content text	Open in checker
Accent text on surface#7f6700 on #fefdff	5.38:1	AA 4.5:1	Pass / Fail	Pass / Pass	+76.1	Lc 75: body text	Open in checker
Border on background#8f8d93 on #f7f6fa	3.05:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	+55.1	Lc 45: headlines and large text	Open in checker
Border on surface#8f8d93 on #fefdff	3.23:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	+59.2	Lc 45: headlines and large text	Open in checker
Focus ring on background#5d4099 on #f7f6fa	7.34:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	+82.0	Lc 75: body text	Open in checker
Focus ring on surface#5d4099 on #fefdff	7.78:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	+86.1	Lc 75: body text	Open in checker
Success text on background#008158 on #f7f6fa	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#008158 on #fefdff	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#fcfbfd 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 #f7f6fa	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#a06300 on #fefdff	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#0f0f10 on #ffba44	11.27: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 #f7f6fa	7.22:1	AA 4.5:1	Pass / Pass	Pass / Pass	+80.2	Lc 75: body text	Open in checker
Error text on surface#a21a1b on #fefdff	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#fcfbfd 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 #f7f6fa	4.66:1	AA 4.5:1	Pass / Fail	Pass / Pass	+69.2	Lc 60: larger content text	Open in checker
Info text on surface#2274af on #fefdff	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#fcfbfd 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#efeef3 on #161619	15.64:1	AAA 7:1	Pass / Pass	Pass / Pass	−96.2	Lc 75: body text	Open in checker
Text on surface#efeef3 on #212023	14.04:1	AAA 7:1	Pass / Pass	Pass / Pass	−94.9	Lc 75: body text	Open in checker
Muted text on background#bebdc3 on #161619	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#bebdc3 on #212023	8.68: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#c4abff on #161619	9.12:1	AA 4.5:1	Pass / Pass	Pass / Pass	−63.3	Lc 60: larger content text	Open in checker
Primary as link text on surface#c4abff on #212023	8.19:1	AA 4.5:1	Pass / Pass	Pass / Pass	−62.1	Lc 60: larger content text	Open in checker
Button label on primary#0d0d0e on #c4abff	9.82:1	AA 4.5:1	Pass / Pass	Pass / Pass	+65.4	Lc 60: larger content text	Open in checker
Accent text on background#dcc363 on #161619	10.34:1	AA 4.5:1	Pass / Pass	Pass / Pass	−70.1	Lc 60: larger content text	Open in checker
Accent text on surface#dcc363 on #212023	9.28:1	AA 4.5:1	Pass / Pass	Pass / Pass	−68.8	Lc 60: larger content text	Open in checker
Border on background#6c6b70 on #161619	3.41:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	−24.5	Below Lc 30	Open in checker
Border on surface#6c6b70 on #212023	3.06:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	−23.3	Below Lc 30	Open in checker
Focus ring on background#c4abff on #161619	9.12:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−63.3	Lc 60: larger content text	Open in checker
Focus ring on surface#c4abff on #212023	8.19:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−62.1	Lc 60: larger content text	Open in checker
Success text on background#6ce5b5 on #161619	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 #212023	10.42:1	AA 4.5:1	Pass / Pass	Pass / Pass	−75.7	Lc 75: body text	Open in checker
Success badge label on fill#0f0f10 on #3bcd9a	9.47:1	AA 4.5:1	Pass / Pass	Pass / Pass	+64.6	Lc 60: larger content text	Open in checker
Warning text on background#ffbc56 on #161619	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 #212023	9.71:1	AA 4.5:1	Pass / Pass	Pass / Pass	−71.5	Lc 60: larger content text	Open in checker
Warning badge label on fill#0f0f10 on #e9a11d	8.74: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 #161619	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 #212023	5.62: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#0f0f10 on #ff7a6d	7.53: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 #161619	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 #212023	8.18:1	AA 4.5:1	Pass / Pass	Pass / Pass	−62.1	Lc 60: larger content text	Open in checker
Info badge label on fill#0f0f10 on #61b9ff	9.02: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 violet near OKLCH hue 295. Purple has a long academic association and distinguishes an institution from the blue used by banks and software. At the lightness needed for AA on white it becomes a deep plum-indigo, which looks serious and prints well.

The accent is a gold at hue 95, a classic pairing with violet because the two are nearly complementary and so easy to tell apart. Gold is the hardest hue to keep readable on white, so the solver darkens it to an ochre for text and uses a bright version only in the dark theme. Neutrals carry a faint violet tint.

Learning content often includes diagrams, slides and scanned handouts, where colour choices are baked into images. Where you control the source, reuse the same text and background pairs from this palette in those materials, and add text descriptions, so students who use screen readers or magnifiers get an equivalent version of what the rest of the class sees.

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

Use the primary for course calls to action and navigation, and the accent for small highlights such as deadlines approaching.
Mark late and graded states with a word and an icon, not only a coloured dot, so screen magnifier users and colour-blind students get the same meaning.
In long handbooks, use the full text colour at 17 to 18 px with generous line height, and keep muted text for captions.
Check text laid over campus photography; use a solid surface behind headings instead of relying on the image.
Provide the dark theme for evening study, and keep code and quiz screens consistent with it.

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: #f7f6fa;
  --color-surface: #fefdff;
  --color-text: #1b1a1e;
  --color-text-muted: #58575d;
  --color-primary: #6a4fa9;
  --color-primary-foreground: #fcfbfd;
  --color-accent: #7f6700;
  --color-border: #8f8d93;
  --color-focus-ring: #5d4099;
  --color-success: #008158;
  --color-success-solid: #008457;
  --color-success-solid-foreground: #fcfbfd;
  --color-warning: #a06300;
  --color-warning-solid: #ffba44;
  --color-warning-solid-foreground: #0f0f10;
  --color-error: #a21a1b;
  --color-error-solid: #c8322e;
  --color-error-solid-foreground: #fcfbfd;
  --color-info: #2274af;
  --color-info-solid: #1377b9;
  --color-info-solid-foreground: #fcfbfd;
}
.dark {
  --color-background: #161619;
  --color-surface: #212023;
  --color-text: #efeef3;
  --color-text-muted: #bebdc3;
  --color-primary: #c4abff;
  --color-primary-foreground: #0d0d0e;
  --color-accent: #dcc363;
  --color-border: #6c6b70;
  --color-focus-ring: #c4abff;
  --color-success: #6ce5b5;
  --color-success-solid: #3bcd9a;
  --color-success-solid-foreground: #0f0f10;
  --color-warning: #ffbc56;
  --color-warning-solid: #e9a11d;
  --color-warning-solid-foreground: #0f0f10;
  --color-error: #f66d62;
  --color-error-solid: #ff7a6d;
  --color-error-solid-foreground: #0f0f10;
  --color-info: #71bfff;
  --color-info-solid: #61b9ff;
  --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 297.7);
    --color-surface: oklch(0.995 0.003 308.4);
    --color-text: oklch(0.221 0.008 297.2);
    --color-text-muted: oklch(0.460 0.010 293.7);
    --color-primary: oklch(0.500 0.139 294.7);
    --color-primary-foreground: oklch(0.989 0.003 308.4);
    --color-accent: oklch(0.522 0.107 92.8);
    --color-border: oklch(0.647 0.009 301.3);
    --color-focus-ring: oklch(0.450 0.140 295.2);
    --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.989 0.003 308.4);
    --color-warning: oklch(0.5541 0.1212 68.45);
    --color-warning-solid: oklch(0.8335 0.1508 76.88);
    --color-warning-solid-foreground: oklch(0.169 0.002 286.2);
    --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.989 0.003 308.4);
    --color-info: oklch(0.540 0.120 245.0);
    --color-info-solid: oklch(0.5501 0.1324 245.13);
    --color-info-solid-foreground: oklch(0.989 0.003 308.4);
  }
  .dark {
    --color-background: oklch(0.202 0.006 285.9);
    --color-surface: oklch(0.246 0.006 301.1);
    --color-text: oklch(0.951 0.007 295.4);
    --color-text-muted: oklch(0.801 0.008 293.9);
    --color-primary: oklch(0.794 0.119 297.3);
    --color-primary-foreground: oklch(0.160 0.002 286.2);
    --color-accent: oklch(0.819 0.120 95.0);
    --color-border: oklch(0.530 0.008 295.3);
    --color-focus-ring: oklch(0.794 0.119 297.3);
    --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.169 0.002 286.2);
    --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.169 0.002 286.2);
    --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.169 0.002 286.2);
    --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.169 0.002 286.2);
  }
}

Tailwind CSS v4 @theme

@theme {
  /* light */
  --color-background: oklch(0.975 0.005 297.7); /* #f7f6fa */
  --color-surface: oklch(0.995 0.003 308.4); /* #fefdff */
  --color-text: oklch(0.221 0.008 297.2); /* #1b1a1e */
  --color-text-muted: oklch(0.460 0.010 293.7); /* #58575d */
  --color-primary: oklch(0.500 0.139 294.7); /* #6a4fa9 */
  --color-primary-foreground: oklch(0.989 0.003 308.4); /* #fcfbfd */
  --color-accent: oklch(0.522 0.107 92.8); /* #7f6700 */
  --color-border: oklch(0.647 0.009 301.3); /* #8f8d93 */
  --color-focus-ring: oklch(0.450 0.140 295.2); /* #5d4099 */
  --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.989 0.003 308.4); /* #fcfbfd */
  --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.169 0.002 286.2); /* #0f0f10 */
  --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.989 0.003 308.4); /* #fcfbfd */
  --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.989 0.003 308.4); /* #fcfbfd */
  /* dark: use as dark:bg-background-dark, or remap under a .dark selector */
  --color-background-dark: oklch(0.202 0.006 285.9); /* #161619 */
  --color-surface-dark: oklch(0.246 0.006 301.1); /* #212023 */
  --color-text-dark: oklch(0.951 0.007 295.4); /* #efeef3 */
  --color-text-muted-dark: oklch(0.801 0.008 293.9); /* #bebdc3 */
  --color-primary-dark: oklch(0.794 0.119 297.3); /* #c4abff */
  --color-primary-foreground-dark: oklch(0.160 0.002 286.2); /* #0d0d0e */
  --color-accent-dark: oklch(0.819 0.120 95.0); /* #dcc363 */
  --color-border-dark: oklch(0.530 0.008 295.3); /* #6c6b70 */
  --color-focus-ring-dark: oklch(0.794 0.119 297.3); /* #c4abff */
  --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.169 0.002 286.2); /* #0f0f10 */
  --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.169 0.002 286.2); /* #0f0f10 */
  --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.169 0.002 286.2); /* #0f0f10 */
  --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.169 0.002 286.2); /* #0f0f10 */
}

shadcn/ui variables (:root and .dark)

:root {
  --background: oklch(0.975 0.005 297.7);
  --foreground: oklch(0.221 0.008 297.2);
  --card: oklch(0.995 0.003 308.4);
  --card-foreground: oklch(0.221 0.008 297.2);
  --popover: oklch(0.995 0.003 308.4);
  --popover-foreground: oklch(0.221 0.008 297.2);
  --primary: oklch(0.500 0.139 294.7);
  --primary-foreground: oklch(0.989 0.003 308.4);
  --secondary: oklch(0.995 0.003 308.4);
  --secondary-foreground: oklch(0.221 0.008 297.2);
  --muted: oklch(0.995 0.003 308.4);
  --muted-foreground: oklch(0.460 0.010 293.7);
  --accent: oklch(0.995 0.003 308.4);
  --accent-foreground: oklch(0.221 0.008 297.2);
  --destructive: oklch(0.551 0.187 27.1);
  --destructive-foreground: oklch(0.989 0.003 308.4);
  --border: oklch(0.647 0.009 301.3);
  --input: oklch(0.647 0.009 301.3);
  --ring: oklch(0.450 0.140 295.2);
  --success: oklch(0.5415 0.1211 160.71);
  --success-foreground: oklch(0.989 0.003 308.4);
  --warning: oklch(0.8335 0.1508 76.88);
  --warning-foreground: oklch(0.169 0.002 286.2);
  --info: oklch(0.5501 0.1324 245.13);
  --info-foreground: oklch(0.989 0.003 308.4);
  --brand-accent: oklch(0.522 0.107 92.8);
}

.dark {
  --background: oklch(0.202 0.006 285.9);
  --foreground: oklch(0.951 0.007 295.4);
  --card: oklch(0.246 0.006 301.1);
  --card-foreground: oklch(0.951 0.007 295.4);
  --popover: oklch(0.246 0.006 301.1);
  --popover-foreground: oklch(0.951 0.007 295.4);
  --primary: oklch(0.794 0.119 297.3);
  --primary-foreground: oklch(0.160 0.002 286.2);
  --secondary: oklch(0.246 0.006 301.1);
  --secondary-foreground: oklch(0.951 0.007 295.4);
  --muted: oklch(0.246 0.006 301.1);
  --muted-foreground: oklch(0.801 0.008 293.9);
  --accent: oklch(0.246 0.006 301.1);
  --accent-foreground: oklch(0.951 0.007 295.4);
  --destructive: oklch(0.732 0.165 27.5);
  --destructive-foreground: oklch(0.169 0.002 286.2);
  --border: oklch(0.530 0.008 295.3);
  --input: oklch(0.530 0.008 295.3);
  --ring: oklch(0.794 0.119 297.3);
  --success: oklch(0.759 0.143 165.0);
  --success-foreground: oklch(0.169 0.002 286.2);
  --warning: oklch(0.7605 0.1539 75.30);
  --warning-foreground: oklch(0.169 0.002 286.2);
  --info: oklch(0.760 0.132 244.8);
  --info-foreground: oklch(0.169 0.002 286.2);
  --brand-accent: oklch(0.819 0.120 95.0);
}

Design tokens (DTCG-style JSON)

{
  "color": {
    "light": {
      "background": {
        "$type": "color",
        "$value": "oklch(0.975 0.005 297.7)",
        "$description": "sRGB #f7f6fa"
      },
      "surface": {
        "$type": "color",
        "$value": "oklch(0.995 0.003 308.4)",
        "$description": "sRGB #fefdff"
      },
      "text": {
        "$type": "color",
        "$value": "oklch(0.221 0.008 297.2)",
        "$description": "sRGB #1b1a1e"
      },
      "text-muted": {
        "$type": "color",
        "$value": "oklch(0.460 0.010 293.7)",
        "$description": "sRGB #58575d"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.500 0.139 294.7)",
        "$description": "sRGB #6a4fa9"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.989 0.003 308.4)",
        "$description": "sRGB #fcfbfd"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.522 0.107 92.8)",
        "$description": "sRGB #7f6700"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.647 0.009 301.3)",
        "$description": "sRGB #8f8d93"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.450 0.140 295.2)",
        "$description": "sRGB #5d4099"
      },
      "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.989 0.003 308.4)",
        "$description": "sRGB #fcfbfd"
      },
      "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.169 0.002 286.2)",
        "$description": "sRGB #0f0f10"
      },
      "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.989 0.003 308.4)",
        "$description": "sRGB #fcfbfd"
      },
      "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.989 0.003 308.4)",
        "$description": "sRGB #fcfbfd"
      }
    },
    "dark": {
      "background": {
        "$type": "color",
        "$value": "oklch(0.202 0.006 285.9)",
        "$description": "sRGB #161619"
      },
      "surface": {
        "$type": "color",
        "$value": "oklch(0.246 0.006 301.1)",
        "$description": "sRGB #212023"
      },
      "text": {
        "$type": "color",
        "$value": "oklch(0.951 0.007 295.4)",
        "$description": "sRGB #efeef3"
      },
      "text-muted": {
        "$type": "color",
        "$value": "oklch(0.801 0.008 293.9)",
        "$description": "sRGB #bebdc3"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.794 0.119 297.3)",
        "$description": "sRGB #c4abff"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.160 0.002 286.2)",
        "$description": "sRGB #0d0d0e"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.819 0.120 95.0)",
        "$description": "sRGB #dcc363"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.530 0.008 295.3)",
        "$description": "sRGB #6c6b70"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.794 0.119 297.3)",
        "$description": "sRGB #c4abff"
      },
      "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.169 0.002 286.2)",
        "$description": "sRGB #0f0f10"
      },
      "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.169 0.002 286.2)",
        "$description": "sRGB #0f0f10"
      },
      "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.169 0.002 286.2)",
        "$description": "sRGB #0f0f10"
      },
      "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.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 #6A4FA9 in the OKLCH picker →Build a tonal scale →Check a pair

FAQ

Is this palette for children?: It is aimed at older students and adults. For young learners, the e-learning palette uses higher chroma while still meeting AA.
Why not use gold as a main colour?: Gold and yellow have high lightness, so they cannot be used as text on light backgrounds without darkening to brown. They work well as fills behind dark text, which is how the warning badge uses them.
Can I use this in a learning management system?: Yes, if the system lets you set CSS variables. The export snippets give you variable names and values; check any embedded third-party content separately.
Are APCA values included?: Yes. Each row of the table lists a signed APCA Lc value and the highest published tier it reaches, next to the WCAG 2.x ratio.

← All accessible palettes