Why is the primary colour AAA when buttons only need 3:1?

Primary here also works as link text and as a button fill with a label. The label and link text need 4.5:1 at AA, and this palette lifts that to 7:1. It is a conservative choice for a sector where mistakes cost money.

Can I swap the gold for my brand colour?

Yes. Choose your hue and run the pair through the contrast checker; the Fix keeps the hue and moves lightness until the pair passes, which is how the gold here was derived.

Does a banking site need WCAG AAA?

AAA across a whole site is rarely required and often impractical. This palette uses AAA where it is cheap, for text and primary, and AA elsewhere. Which level you must meet depends on your jurisdiction and contracts.

Is there a version for dark mode?

Yes. Every role has a dark theme value, verified separately, shown in the second swatch grid and included in all export snippets.

OKLCH Studio · Accessible palettes · Industries

Accessible color palette for banking (WCAG 2.2 verified)

Updated 2026-10-19

A bank website is often the least forgiving place to be confused. Customers read statements, set up payments, answer security questions and sign agreements, and many of them are older or using assistive technology. The visual tone should be steady and serious, and every instruction has to be readable without effort.

This palette treats that as a design constraint. Text and the primary navy are both verified at WCAG AAA (7:1) against the page and card colours, so links and primary buttons stay strong even in glare. Muted text is held at AA. WCAG 2.2 AA is the level usually cited by audits and procurement; the stricter primary leaves headroom for tinted surfaces and print.

Banking journeys contain forms with validation and security steps. Error messages must be readable and not rely on colour, and the focus ring must be visible when someone navigates by keyboard through a long login or payment flow. Those roles are in the table below, each with its own check.

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
#F5F7F9
oklch(0.975 0.003 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
#55585B
oklch(0.459 0.006 248.0)
Sample text
Primary
#265783
oklch(0.445 0.090 248.4)
Sample text
Primary foreground
#FBFCFD
oklch(0.991 0.002 247.8)
Sample text
Accent
#704D00
oklch(0.447 0.093 78.6)
Sample text
Border
#8B8E92
oklch(0.645 0.007 255.5)
Sample text
Focus ring
#275985
oklch(0.451 0.090 247.9)
Sample text
Success
#008158
oklch(0.5333 0.1163 162.37)
Sample text
Success fill
#008557
oklch(0.5443 0.1224 160.36)
Sample text
Success fill label
#FBFCFD
oklch(0.991 0.002 247.8)
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
#FBFCFD
oklch(0.991 0.002 247.8)
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
#FBFCFD
oklch(0.991 0.002 247.8)
Sample text

Appointment confirmed

Secondary text sits on the surface colour.

Link in primary · Accent text

Primary buttonSuccessWarningErrorInfo

Dark theme

Background
#151618
oklch(0.200 0.004 264.5)
Sample text
Surface
#1F2122
oklch(0.246 0.004 228.9)
Sample text
Text
#ECEFF2
oklch(0.951 0.005 247.9)
Sample text
Muted text
#BBBEC1
oklch(0.800 0.005 247.9)
Sample text
Primary
#8FC3F5
oklch(0.799 0.090 248.0)
Sample text
Primary foreground
#0D0D0E
oklch(0.160 0.002 286.2)
Sample text
Accent
#E5BF6D
oklch(0.821 0.110 85.1)
Sample text
Border
#686C6F
oklch(0.529 0.007 239.9)
Sample text
Focus ring
#8FC3F5
oklch(0.799 0.090 248.0)
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#191b1d on #f5f7f9	16.08:1	AAA 7:1	Pass / Pass	Pass / Pass	+99.2	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#55585b on #f5f7f9	6.66:1	AA 4.5:1	Pass / Fail	Pass / Pass	+79.9	Lc 75: body text	Open in checker
Muted text on surface#55585b on #fcfeff	7.07:1	AA 4.5:1	Pass / Pass	Pass / Pass	+84.1	Lc 75: body text	Open in checker
Primary as link text on background#265783 on #f5f7f9	7.05:1	AAA 7:1	Pass / Pass	Pass / Pass	+81.1	Lc 75: body text	Open in checker
Primary as link text on surface#265783 on #fcfeff	7.48:1	AAA 7:1	Pass / Pass	Pass / Pass	+85.3	Lc 75: body text	Open in checker
Button label on primary#fbfcfd on #265783	7.37:1	AAA 7:1	Pass / Pass	Pass / Pass	−88.8	Lc 75: body text	Open in checker
Accent text on background#704d00 on #f5f7f9	7.10:1	AAA 7:1	Pass / Pass	Pass / Pass	+81.3	Lc 75: body text	Open in checker
Accent text on surface#704d00 on #fcfeff	7.54:1	AAA 7:1	Pass / Pass	Pass / Pass	+85.5	Lc 75: body text	Open in checker
Border on background#8b8e92 on #f5f7f9	3.06:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	+55.3	Lc 45: headlines and large text	Open in checker
Border on surface#8b8e92 on #fcfeff	3.25:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	+59.5	Lc 45: headlines and large text	Open in checker
Focus ring on background#275985 on #f5f7f9	6.85:1	3:1 (WCAG 1.4.11)	Pass / Fail	Pass / Pass	+80.4	Lc 75: body text	Open in checker
Focus ring on surface#275985 on #fcfeff	7.27:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	+84.5	Lc 75: body text	Open in checker
Success text on background#008158 on #f5f7f9	4.56:1	AA 4.5:1	Pass / Fail	Pass / Pass	+68.4	Lc 60: larger content text	Open in checker
Success text on surface#008158 on #fcfeff	4.84:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.6	Lc 60: larger content text	Open in checker
Success badge label on fill#fbfcfd on #008557	4.55:1	AA 4.5:1	Pass / Fail	Pass / Pass	−75.2	Lc 75: body text	Open in checker
Warning text on background#a06300 on #f5f7f9	4.56:1	AA 4.5:1	Pass / Fail	Pass / Pass	+68.7	Lc 60: larger content text	Open in checker
Warning text on surface#a06300 on #fcfeff	4.85:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.8	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 #f5f7f9	7.24:1	AA 4.5:1	Pass / Pass	Pass / Pass	+80.3	Lc 75: body text	Open in checker
Error text on surface#a21a1b on #fcfeff	7.68:1	AA 4.5:1	Pass / Pass	Pass / Pass	+84.5	Lc 75: body text	Open in checker
Error badge label on fill#fbfcfd on #c8322e	5.17:1	AA 4.5:1	Pass / Fail	Pass / Pass	−78.3	Lc 75: body text	Open in checker
Info text on background#2274af on #f5f7f9	4.67:1	AA 4.5:1	Pass / Fail	Pass / Pass	+69.3	Lc 60: larger content text	Open in checker
Info text on surface#2274af on #fcfeff	4.96:1	AA 4.5:1	Pass / Fail	Pass / Pass	+73.5	Lc 60: larger content text	Open in checker
Info badge label on fill#fbfcfd on #1377b9	4.68:1	AA 4.5:1	Pass / Fail	Pass / Pass	−76.2	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#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 #1f2122	14.00:1	AAA 7:1	Pass / Pass	Pass / Pass	−94.9	Lc 75: body text	Open in checker
Muted text on background#bbbec1 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#bbbec1 on #1f2122	8.65: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#8fc3f5 on #151618	9.73:1	AAA 7:1	Pass / Pass	Pass / Pass	−66.6	Lc 60: larger content text	Open in checker
Primary as link text on surface#8fc3f5 on #1f2122	8.69:1	AAA 7:1	Pass / Pass	Pass / Pass	−65.3	Lc 60: larger content text	Open in checker
Button label on primary#0d0d0e on #8fc3f5	10.44:1	AAA 7:1	Pass / Pass	Pass / Pass	+68.5	Lc 60: larger content text	Open in checker
Accent text on background#e5bf6d on #151618	10.35:1	AAA 7:1	Pass / Pass	Pass / Pass	−70.0	Lc 60: larger content text	Open in checker
Accent text on surface#e5bf6d on #1f2122	9.24:1	AAA 7:1	Pass / Pass	Pass / Pass	−68.7	Lc 60: larger content text	Open in checker
Border on background#686c6f on #151618	3.41:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	−24.5	Below Lc 30	Open in checker
Border on surface#686c6f on #1f2122	3.05:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	−23.1	Below Lc 30	Open in checker
Focus ring on background#8fc3f5 on #151618	9.73:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−66.6	Lc 60: larger content text	Open in checker
Focus ring on surface#8fc3f5 on #1f2122	8.69:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−65.3	Lc 60: larger content text	Open in checker
Success text on background#6ce5b5 on #151618	11.65:1	AA 4.5:1	Pass / Pass	Pass / Pass	−77.0	Lc 75: body text	Open in checker
Success text on surface#6ce5b5 on #1f2122	10.40: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 #151618	10.84: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 #1f2122	9.68:1	AA 4.5:1	Pass / Pass	Pass / Pass	−71.4	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 #151618	6.27: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 #1f2122	5.60: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 #151618	9.13: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 #1f2122	8.15: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.2	26.0	38.9	31.8	Shown only
success / error	28.6	16.6	6.3	33.0	Yes
success / info	17.2	16.3	15.4	3.3	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 deep navy around OKLCH hue 248 with low chroma. Dark, desaturated blues read as established and calm, and at that lightness white button labels reach AAA easily. Low chroma also means the colour hardly shifts when the sRGB gamut clips it, so the hex matches the intended hue closely.

The accent is a muted gold at hue 85 used for small marks of emphasis, such as a selected tab or a highlight on a savings goal. Gold on white is notoriously weak, so the generator darkens it to the lightness at which it meets the target, which makes it a deep ochre in the light theme and a brighter gold on the dark theme.

The generator solved 50 pairs (25 light, 25 dark), and all of them meet their target on the raw WCAG ratio. The tightest is primary as link text on background in the light theme at 7.05:1 against a target of 7:1. After gamut mapping to sRGB the light primary keeps 100% of the requested chroma; hue was held throughout.

How to use it

Keep the primary navy for the single main action on a page, such as Pay or Continue, and use outline buttons built from the border colour for the rest.
Do not use the gold accent for body text or on tinted surfaces other than the page and card colours it was verified on.
Show the error colour together with an inline message that names the problem and the field, and move focus to the first error after submission.
Avoid light grey placeholder text inside inputs; use the muted text colour, which is verified, and keep a visible label above the field.
Offer the dark theme as a user choice rather than forcing it, and keep security-critical screens such as one-time-code entry on the same contrast rules in both themes.

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: #f5f7f9;
  --color-surface: #fcfeff;
  --color-text: #191b1d;
  --color-text-muted: #55585b;
  --color-primary: #265783;
  --color-primary-foreground: #fbfcfd;
  --color-accent: #704d00;
  --color-border: #8b8e92;
  --color-focus-ring: #275985;
  --color-success: #008158;
  --color-success-solid: #008557;
  --color-success-solid-foreground: #fbfcfd;
  --color-warning: #a06300;
  --color-warning-solid: #ffba44;
  --color-warning-solid-foreground: #0f0f10;
  --color-error: #a21a1b;
  --color-error-solid: #c8322e;
  --color-error-solid-foreground: #fbfcfd;
  --color-info: #2274af;
  --color-info-solid: #1377b9;
  --color-info-solid-foreground: #fbfcfd;
}
.dark {
  --color-background: #151618;
  --color-surface: #1f2122;
  --color-text: #eceff2;
  --color-text-muted: #bbbec1;
  --color-primary: #8fc3f5;
  --color-primary-foreground: #0d0d0e;
  --color-accent: #e5bf6d;
  --color-border: #686c6f;
  --color-focus-ring: #8fc3f5;
  --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.003 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.006 248.0);
    --color-primary: oklch(0.445 0.090 248.4);
    --color-primary-foreground: oklch(0.991 0.002 247.8);
    --color-accent: oklch(0.447 0.093 78.6);
    --color-border: oklch(0.645 0.007 255.5);
    --color-focus-ring: oklch(0.451 0.090 247.9);
    --color-success: oklch(0.5333 0.1163 162.37);
    --color-success-solid: oklch(0.5443 0.1224 160.36);
    --color-success-solid-foreground: oklch(0.991 0.002 247.8);
    --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.991 0.002 247.8);
    --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.991 0.002 247.8);
  }
  .dark {
    --color-background: oklch(0.200 0.004 264.5);
    --color-surface: oklch(0.246 0.004 228.9);
    --color-text: oklch(0.951 0.005 247.9);
    --color-text-muted: oklch(0.800 0.005 247.9);
    --color-primary: oklch(0.799 0.090 248.0);
    --color-primary-foreground: oklch(0.160 0.002 286.2);
    --color-accent: oklch(0.821 0.110 85.1);
    --color-border: oklch(0.529 0.007 239.9);
    --color-focus-ring: oklch(0.799 0.090 248.0);
    --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.003 247.9); /* #f5f7f9 */
  --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.006 248.0); /* #55585b */
  --color-primary: oklch(0.445 0.090 248.4); /* #265783 */
  --color-primary-foreground: oklch(0.991 0.002 247.8); /* #fbfcfd */
  --color-accent: oklch(0.447 0.093 78.6); /* #704d00 */
  --color-border: oklch(0.645 0.007 255.5); /* #8b8e92 */
  --color-focus-ring: oklch(0.451 0.090 247.9); /* #275985 */
  --color-success: oklch(0.5333 0.1163 162.37); /* #008158 */
  --color-success-solid: oklch(0.5443 0.1224 160.36); /* #008557 */
  --color-success-solid-foreground: oklch(0.991 0.002 247.8); /* #fbfcfd */
  --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.991 0.002 247.8); /* #fbfcfd */
  --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.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.004 228.9); /* #1f2122 */
  --color-text-dark: oklch(0.951 0.005 247.9); /* #eceff2 */
  --color-text-muted-dark: oklch(0.800 0.005 247.9); /* #bbbec1 */
  --color-primary-dark: oklch(0.799 0.090 248.0); /* #8fc3f5 */
  --color-primary-foreground-dark: oklch(0.160 0.002 286.2); /* #0d0d0e */
  --color-accent-dark: oklch(0.821 0.110 85.1); /* #e5bf6d */
  --color-border-dark: oklch(0.529 0.007 239.9); /* #686c6f */
  --color-focus-ring-dark: oklch(0.799 0.090 248.0); /* #8fc3f5 */
  --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.003 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.445 0.090 248.4);
  --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.006 248.0);
  --accent: oklch(0.996 0.003 228.8);
  --accent-foreground: oklch(0.221 0.005 248.1);
  --destructive: oklch(0.551 0.187 27.1);
  --destructive-foreground: oklch(0.991 0.002 247.8);
  --border: oklch(0.645 0.007 255.5);
  --input: oklch(0.645 0.007 255.5);
  --ring: oklch(0.451 0.090 247.9);
  --success: oklch(0.5443 0.1224 160.36);
  --success-foreground: oklch(0.991 0.002 247.8);
  --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.991 0.002 247.8);
  --brand-accent: oklch(0.447 0.093 78.6);
}

.dark {
  --background: oklch(0.200 0.004 264.5);
  --foreground: oklch(0.951 0.005 247.9);
  --card: oklch(0.246 0.004 228.9);
  --card-foreground: oklch(0.951 0.005 247.9);
  --popover: oklch(0.246 0.004 228.9);
  --popover-foreground: oklch(0.951 0.005 247.9);
  --primary: oklch(0.799 0.090 248.0);
  --primary-foreground: oklch(0.160 0.002 286.2);
  --secondary: oklch(0.246 0.004 228.9);
  --secondary-foreground: oklch(0.951 0.005 247.9);
  --muted: oklch(0.246 0.004 228.9);
  --muted-foreground: oklch(0.800 0.005 247.9);
  --accent: oklch(0.246 0.004 228.9);
  --accent-foreground: oklch(0.951 0.005 247.9);
  --destructive: oklch(0.732 0.165 27.5);
  --destructive-foreground: oklch(0.169 0.002 286.2);
  --border: oklch(0.529 0.007 239.9);
  --input: oklch(0.529 0.007 239.9);
  --ring: oklch(0.799 0.090 248.0);
  --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.821 0.110 85.1);
}

Design tokens (DTCG-style JSON)

{
  "color": {
    "light": {
      "background": {
        "$type": "color",
        "$value": "oklch(0.975 0.003 247.9)",
        "$description": "sRGB #f5f7f9"
      },
      "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.006 248.0)",
        "$description": "sRGB #55585b"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.445 0.090 248.4)",
        "$description": "sRGB #265783"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.991 0.002 247.8)",
        "$description": "sRGB #fbfcfd"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.447 0.093 78.6)",
        "$description": "sRGB #704d00"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.645 0.007 255.5)",
        "$description": "sRGB #8b8e92"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.451 0.090 247.9)",
        "$description": "sRGB #275985"
      },
      "success": {
        "$type": "color",
        "$value": "oklch(0.5333 0.1163 162.37)",
        "$description": "sRGB #008158"
      },
      "success-solid": {
        "$type": "color",
        "$value": "oklch(0.5443 0.1224 160.36)",
        "$description": "sRGB #008557"
      },
      "success-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.991 0.002 247.8)",
        "$description": "sRGB #fbfcfd"
      },
      "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.991 0.002 247.8)",
        "$description": "sRGB #fbfcfd"
      },
      "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.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.004 228.9)",
        "$description": "sRGB #1f2122"
      },
      "text": {
        "$type": "color",
        "$value": "oklch(0.951 0.005 247.9)",
        "$description": "sRGB #eceff2"
      },
      "text-muted": {
        "$type": "color",
        "$value": "oklch(0.800 0.005 247.9)",
        "$description": "sRGB #bbbec1"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.799 0.090 248.0)",
        "$description": "sRGB #8fc3f5"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.160 0.002 286.2)",
        "$description": "sRGB #0d0d0e"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.821 0.110 85.1)",
        "$description": "sRGB #e5bf6d"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.529 0.007 239.9)",
        "$description": "sRGB #686c6f"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.799 0.090 248.0)",
        "$description": "sRGB #8fc3f5"
      },
      "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 #265783 in the OKLCH picker →Build a tonal scale →Check a pair

FAQ

Why is the primary colour AAA when buttons only need 3:1?: Primary here also works as link text and as a button fill with a label. The label and link text need 4.5:1 at AA, and this palette lifts that to 7:1. It is a conservative choice for a sector where mistakes cost money.
Can I swap the gold for my brand colour?: Yes. Choose your hue and run the pair through the contrast checker; the Fix keeps the hue and moves lightness until the pair passes, which is how the gold here was derived.
Does a banking site need WCAG AAA?: AAA across a whole site is rarely required and often impractical. This palette uses AAA where it is cheap, for text and primary, and AA elsewhere. Which level you must meet depends on your jurisdiction and contracts.
Is there a version for dark mode?: Yes. Every role has a dark theme value, verified separately, shown in the second swatch grid and included in all export snippets.

← All accessible palettes