Are the green and red really safe for colour blindness?

They are separated by more than the page's threshold under simulated protanopia, deuteranopia and tritanopia, using the Machado et al. simulation. That is evidence they are distinguishable, not a guarantee for every viewer, which is why signs and labels are still recommended.

Which contrast level do the numbers use?

Body and numeric text target AAA at 7:1. Links, buttons and status text target AA at 4.5:1, and borders and focus rings target 3:1 for UI components under WCAG 1.4.11.

Does this cover banking regulation?

No. It addresses colour contrast only. Whether a regulation applies to your product depends on region and service, so check with the people responsible for compliance.

How is this different from the banking palette?

Fintech here is a modern, brighter blue with a teal accent aimed at apps and dashboards. The banking palette is more conservative: deep navy with a restrained gold and AAA primary.

OKLCH Studio · Accessible palettes · Industries

Accessible color palette for fintech (WCAG 2.2 verified)

Updated 2026-10-19

Fintech products ask people to read numbers: balances, fees, interest rates, charts of gains and losses. The interface is dense with figures, so text contrast and the way colour carries meaning matter more than the brand gradient on the landing page. Mistaking a loss for a gain because two colours looked alike is a product failure, not just an accessibility one.

The oldest habit in finance UI is green for up and red for down. Roughly one in twelve men have some red-green colour-vision deficiency, so that convention fails for many users when colour is the only signal. This palette picks a blue-leaning green and a vermilion red, separates them in lightness, and checks the pair under simulated protanopia, deuteranopia and tritanopia.

WCAG 2.2 AA is the usual baseline for consumer financial apps, and in some regions rules for consumer financial services point at it indirectly. The palette keeps numeric text at AAA and every interactive colour at AA, so dense tables stay legible on small screens.

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
#F4F7FB
oklch(0.975 0.006 255.5)
Sample text
Surface
#FCFEFF
oklch(0.996 0.003 228.8)
Sample text
Text
#191B1E
oklch(0.221 0.007 258.4)
Sample text
Muted text
#55585D
oklch(0.459 0.009 260.7)
Sample text
Primary
#2460B7
oklch(0.499 0.151 258.3)
Sample text
Primary foreground
#FBFCFD
oklch(0.991 0.002 247.8)
Sample text
Accent
#007B76
oklch(0.526 0.091 189.8)
Sample text
Border
#8B8E94
oklch(0.646 0.010 264.5)
Sample text
Focus ring
#1351A6
oklch(0.449 0.150 258.1)
Sample text
Success
#007F6A
oklch(0.533 0.100 175.7)
Sample text
Success fill
#00836C
oklch(0.544 0.103 174.6)
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
#A50D1C
oklch(0.460 0.180 25.0)
Sample text
Error fill
#CC282F
oklch(0.5503 0.1985 24.99)
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
#141619
oklch(0.199 0.007 258.4)
Sample text
Surface
#1F2123
oklch(0.246 0.005 248.0)
Sample text
Text
#EBEFF3
oklch(0.950 0.007 247.9)
Sample text
Muted text
#BABEC4
oklch(0.800 0.010 258.3)
Sample text
Primary
#7FBFFF
oklch(0.786 0.113 249.4)
Sample text
Primary foreground
#0D0D0E
oklch(0.160 0.002 286.2)
Sample text
Accent
#6ED9D2
oklch(0.820 0.100 189.8)
Sample text
Border
#686C71
oklch(0.529 0.009 253.9)
Sample text
Focus ring
#7FBFFF
oklch(0.786 0.113 249.4)
Sample text
Success
#64E4CA
oklch(0.840 0.120 177.7)
Sample text
Success fill
#2ACCB1
oklch(0.760 0.132 178.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
#FA6863
oklch(0.699 0.180 24.8)
Sample text
Error fill
#FF746E
oklch(0.724 0.171 24.7)
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#191b1e on #f4f7fb	16.06:1	AAA 7:1	Pass / Pass	Pass / Pass	+99.2	Lc 75: body text	Open in checker
Text on surface#191b1e on #fcfeff	17.06:1	AAA 7:1	Pass / Pass	Pass / Pass	+103.3	Lc 75: body text	Open in checker
Muted text on background#55585d on #f4f7fb	6.64:1	AA 4.5:1	Pass / Fail	Pass / Pass	+79.8	Lc 75: body text	Open in checker
Muted text on surface#55585d 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#2460b7 on #f4f7fb	5.69:1	AA 4.5:1	Pass / Fail	Pass / Pass	+75.1	Lc 75: body text	Open in checker
Primary as link text on surface#2460b7 on #fcfeff	6.04:1	AA 4.5:1	Pass / Fail	Pass / Pass	+79.3	Lc 75: body text	Open in checker
Button label on primary#fbfcfd on #2460b7	5.95:1	AA 4.5:1	Pass / Fail	Pass / Pass	−83.2	Lc 75: body text	Open in checker
Accent text on background#007b76 on #f4f7fb	4.77:1	AA 4.5:1	Pass / Fail	Pass / Pass	+69.8	Lc 60: larger content text	Open in checker
Accent text on surface#007b76 on #fcfeff	5.07:1	AA 4.5:1	Pass / Fail	Pass / Pass	+74.0	Lc 60: larger content text	Open in checker
Border on background#8b8e94 on #f4f7fb	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#8b8e94 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#1351a6 on #f4f7fb	7.09:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	+80.9	Lc 75: body text	Open in checker
Focus ring on surface#1351a6 on #fcfeff	7.53:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	+85.1	Lc 75: body text	Open in checker
Success text on background#007f6a on #f4f7fb	4.60:1	AA 4.5:1	Pass / Fail	Pass / Pass	+68.7	Lc 60: larger content text	Open in checker
Success text on surface#007f6a on #fcfeff	4.89:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.9	Lc 60: larger content text	Open in checker
Success badge label on fill#fbfcfd on #00836c	4.58:1	AA 4.5:1	Pass / Fail	Pass / Pass	−75.5	Lc 75: body text	Open in checker
Warning text on background#a06300 on #f4f7fb	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 #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#a50d1c on #f4f7fb	7.30:1	AA 4.5:1	Pass / Pass	Pass / Pass	+80.1	Lc 75: body text	Open in checker
Error text on surface#a50d1c on #fcfeff	7.76:1	AA 4.5:1	Pass / Pass	Pass / Pass	+84.3	Lc 75: body text	Open in checker
Error badge label on fill#fbfcfd on #cc282f	5.22:1	AA 4.5:1	Pass / Fail	Pass / Pass	−78.3	Lc 75: body text	Open in checker
Info text on background#2274af on #f4f7fb	4.66: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#ebeff3 on #141619	15.68:1	AAA 7:1	Pass / Pass	Pass / Pass	−96.2	Lc 75: body text	Open in checker
Text on surface#ebeff3 on #1f2123	13.97:1	AAA 7:1	Pass / Pass	Pass / Pass	−94.8	Lc 75: body text	Open in checker
Muted text on background#babec4 on #141619	9.71:1	AA 4.5:1	Pass / Pass	Pass / Pass	−66.3	Lc 60: larger content text	Open in checker
Muted text on surface#babec4 on #1f2123	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#7fbfff on #141619	9.32:1	AA 4.5:1	Pass / Pass	Pass / Pass	−64.3	Lc 60: larger content text	Open in checker
Primary as link text on surface#7fbfff on #1f2123	8.30:1	AA 4.5:1	Pass / Pass	Pass / Pass	−63.0	Lc 60: larger content text	Open in checker
Button label on primary#0d0d0e on #7fbfff	9.98:1	AA 4.5:1	Pass / Pass	Pass / Pass	+66.3	Lc 60: larger content text	Open in checker
Accent text on background#6ed9d2 on #141619	10.80:1	AA 4.5:1	Pass / Pass	Pass / Pass	−72.5	Lc 60: larger content text	Open in checker
Accent text on surface#6ed9d2 on #1f2123	9.62:1	AA 4.5:1	Pass / Pass	Pass / Pass	−71.1	Lc 60: larger content text	Open in checker
Border on background#686c71 on #141619	3.42:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	−24.5	Below Lc 30	Open in checker
Border on surface#686c71 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#7fbfff on #141619	9.32:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−64.3	Lc 60: larger content text	Open in checker
Focus ring on surface#7fbfff on #1f2123	8.30:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−63.0	Lc 60: larger content text	Open in checker
Success text on background#64e4ca on #141619	11.64:1	AA 4.5:1	Pass / Pass	Pass / Pass	−76.9	Lc 75: body text	Open in checker
Success text on surface#64e4ca on #1f2123	10.37:1	AA 4.5:1	Pass / Pass	Pass / Pass	−75.6	Lc 75: body text	Open in checker
Success badge label on fill#0f0f10 on #2accb1	9.46: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 #141619	10.85: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 #1f2123	9.67: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#fa6863 on #141619	6.23:1	AA 4.5:1	Pass / Fail	Pass / Pass	−46.3	Lc 45: headlines and large text	Open in checker
Error text on surface#fa6863 on #1f2123	5.55:1	AA 4.5:1	Pass / Fail	Pass / Pass	−44.9	Lc 30: non-text and incidental	Open in checker
Error badge label on fill#0f0f10 on #ff746e	7.27:1	AA 4.5:1	Pass / Pass	Pass / Pass	+52.8	Lc 45: headlines and large text	Open in checker
Info text on background#71bfff on #141619	9.14: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 #1f2123	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 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.

Light theme, status fills
Pair	Normal vision	Protanopia	Deuteranopia	Tritanopia	Held to 8
success / warning	34.8	27.1	40.4	31.5	Shown only
success / error	29.2	19.8	9.2	34.0	Yes
success / info	13.8	13.1	12.1	2.6	Shown only
warning / error	32.5	45.2	39.7	22.6	Shown only
warning / info	40.0	34.2	44.5	31.2	Shown only
error / info	31.2	25.6	21.3	34.0	Shown only

Fills as simulated:Normal visionProtanopiaDeuteranopiaTritanopia

Dark theme, status fills
Pair	Normal vision	Protanopia	Deuteranopia	Tritanopia	Held to 8
success / warning	22.4	14.7	19.9	28.1	Shown only
success / error	29.7	17.1	9.9	32.9	Yes
success / info	14.6	11.8	10.7	4.1	Shown only
warning / error	14.4	14.9	11.9	6.5	Shown only
warning / info	28.5	26.0	28.7	26.2	Shown only
error / info	28.7	22.5	20.4	30.6	Shown only

Fills as simulated:Normal visionProtanopiaDeuteranopiaTritanopia

Why these colours

The primary is a saturated but not neon blue near OKLCH hue 258. Blue has long been the colour of trust in finance, and it also gives strong, predictable contrast against white. A teal accent adds a second voice for highlights and secondary actions without competing with the semantic colours.

For status, success sits near a teal-green at hue 178 and error at a red-orange near 25. Those hues are far apart on the blue-yellow axis, which most colour-vision deficiencies preserve. The generator also keeps the error fill darker than the success fill, so the two differ in lightness, and the page reports their separation under each simulation against a threshold of 8 ΔE-OK.

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.56: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

Never show profit and loss with red and green alone. Add a plus or minus sign, an arrow icon and the word, and put the sign in the number itself.
Use tabular figures and the full-strength text colour in tables of transactions; keep the muted colour for dates and secondary labels.
Reserve the error colour for failures such as a declined payment or a rejected form field, not for ordinary negative numbers, so it keeps its force.
Check chart series with the data visualization palette rather than reusing the status colours.
Re-test any gradient or tinted card you add, since a hero gradient can drop text below 4.5:1 in one corner.

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: #f4f7fb;
  --color-surface: #fcfeff;
  --color-text: #191b1e;
  --color-text-muted: #55585d;
  --color-primary: #2460b7;
  --color-primary-foreground: #fbfcfd;
  --color-accent: #007b76;
  --color-border: #8b8e94;
  --color-focus-ring: #1351a6;
  --color-success: #007f6a;
  --color-success-solid: #00836c;
  --color-success-solid-foreground: #fbfcfd;
  --color-warning: #a06300;
  --color-warning-solid: #ffba44;
  --color-warning-solid-foreground: #0f0f10;
  --color-error: #a50d1c;
  --color-error-solid: #cc282f;
  --color-error-solid-foreground: #fbfcfd;
  --color-info: #2274af;
  --color-info-solid: #1377b9;
  --color-info-solid-foreground: #fbfcfd;
}
.dark {
  --color-background: #141619;
  --color-surface: #1f2123;
  --color-text: #ebeff3;
  --color-text-muted: #babec4;
  --color-primary: #7fbfff;
  --color-primary-foreground: #0d0d0e;
  --color-accent: #6ed9d2;
  --color-border: #686c71;
  --color-focus-ring: #7fbfff;
  --color-success: #64e4ca;
  --color-success-solid: #2accb1;
  --color-success-solid-foreground: #0f0f10;
  --color-warning: #ffbc56;
  --color-warning-solid: #e9a11d;
  --color-warning-solid-foreground: #0f0f10;
  --color-error: #fa6863;
  --color-error-solid: #ff746e;
  --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.006 255.5);
    --color-surface: oklch(0.996 0.003 228.8);
    --color-text: oklch(0.221 0.007 258.4);
    --color-text-muted: oklch(0.459 0.009 260.7);
    --color-primary: oklch(0.499 0.151 258.3);
    --color-primary-foreground: oklch(0.991 0.002 247.8);
    --color-accent: oklch(0.526 0.091 189.8);
    --color-border: oklch(0.646 0.010 264.5);
    --color-focus-ring: oklch(0.449 0.150 258.1);
    --color-success: oklch(0.533 0.100 175.7);
    --color-success-solid: oklch(0.544 0.103 174.6);
    --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.460 0.180 25.0);
    --color-error-solid: oklch(0.5503 0.1985 24.99);
    --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.199 0.007 258.4);
    --color-surface: oklch(0.246 0.005 248.0);
    --color-text: oklch(0.950 0.007 247.9);
    --color-text-muted: oklch(0.800 0.010 258.3);
    --color-primary: oklch(0.786 0.113 249.4);
    --color-primary-foreground: oklch(0.160 0.002 286.2);
    --color-accent: oklch(0.820 0.100 189.8);
    --color-border: oklch(0.529 0.009 253.9);
    --color-focus-ring: oklch(0.786 0.113 249.4);
    --color-success: oklch(0.840 0.120 177.7);
    --color-success-solid: oklch(0.760 0.132 178.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.699 0.180 24.8);
    --color-error-solid: oklch(0.724 0.171 24.7);
    --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.006 255.5); /* #f4f7fb */
  --color-surface: oklch(0.996 0.003 228.8); /* #fcfeff */
  --color-text: oklch(0.221 0.007 258.4); /* #191b1e */
  --color-text-muted: oklch(0.459 0.009 260.7); /* #55585d */
  --color-primary: oklch(0.499 0.151 258.3); /* #2460b7 */
  --color-primary-foreground: oklch(0.991 0.002 247.8); /* #fbfcfd */
  --color-accent: oklch(0.526 0.091 189.8); /* #007b76 */
  --color-border: oklch(0.646 0.010 264.5); /* #8b8e94 */
  --color-focus-ring: oklch(0.449 0.150 258.1); /* #1351a6 */
  --color-success: oklch(0.533 0.100 175.7); /* #007f6a */
  --color-success-solid: oklch(0.544 0.103 174.6); /* #00836c */
  --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.460 0.180 25.0); /* #a50d1c */
  --color-error-solid: oklch(0.5503 0.1985 24.99); /* #cc282f */
  --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.199 0.007 258.4); /* #141619 */
  --color-surface-dark: oklch(0.246 0.005 248.0); /* #1f2123 */
  --color-text-dark: oklch(0.950 0.007 247.9); /* #ebeff3 */
  --color-text-muted-dark: oklch(0.800 0.010 258.3); /* #babec4 */
  --color-primary-dark: oklch(0.786 0.113 249.4); /* #7fbfff */
  --color-primary-foreground-dark: oklch(0.160 0.002 286.2); /* #0d0d0e */
  --color-accent-dark: oklch(0.820 0.100 189.8); /* #6ed9d2 */
  --color-border-dark: oklch(0.529 0.009 253.9); /* #686c71 */
  --color-focus-ring-dark: oklch(0.786 0.113 249.4); /* #7fbfff */
  --color-success-dark: oklch(0.840 0.120 177.7); /* #64e4ca */
  --color-success-solid-dark: oklch(0.760 0.132 178.0); /* #2accb1 */
  --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.699 0.180 24.8); /* #fa6863 */
  --color-error-solid-dark: oklch(0.724 0.171 24.7); /* #ff746e */
  --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.006 255.5);
  --foreground: oklch(0.221 0.007 258.4);
  --card: oklch(0.996 0.003 228.8);
  --card-foreground: oklch(0.221 0.007 258.4);
  --popover: oklch(0.996 0.003 228.8);
  --popover-foreground: oklch(0.221 0.007 258.4);
  --primary: oklch(0.499 0.151 258.3);
  --primary-foreground: oklch(0.991 0.002 247.8);
  --secondary: oklch(0.996 0.003 228.8);
  --secondary-foreground: oklch(0.221 0.007 258.4);
  --muted: oklch(0.996 0.003 228.8);
  --muted-foreground: oklch(0.459 0.009 260.7);
  --accent: oklch(0.996 0.003 228.8);
  --accent-foreground: oklch(0.221 0.007 258.4);
  --destructive: oklch(0.5503 0.1985 24.99);
  --destructive-foreground: oklch(0.991 0.002 247.8);
  --border: oklch(0.646 0.010 264.5);
  --input: oklch(0.646 0.010 264.5);
  --ring: oklch(0.449 0.150 258.1);
  --success: oklch(0.544 0.103 174.6);
  --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.526 0.091 189.8);
}

.dark {
  --background: oklch(0.199 0.007 258.4);
  --foreground: oklch(0.950 0.007 247.9);
  --card: oklch(0.246 0.005 248.0);
  --card-foreground: oklch(0.950 0.007 247.9);
  --popover: oklch(0.246 0.005 248.0);
  --popover-foreground: oklch(0.950 0.007 247.9);
  --primary: oklch(0.786 0.113 249.4);
  --primary-foreground: oklch(0.160 0.002 286.2);
  --secondary: oklch(0.246 0.005 248.0);
  --secondary-foreground: oklch(0.950 0.007 247.9);
  --muted: oklch(0.246 0.005 248.0);
  --muted-foreground: oklch(0.800 0.010 258.3);
  --accent: oklch(0.246 0.005 248.0);
  --accent-foreground: oklch(0.950 0.007 247.9);
  --destructive: oklch(0.724 0.171 24.7);
  --destructive-foreground: oklch(0.169 0.002 286.2);
  --border: oklch(0.529 0.009 253.9);
  --input: oklch(0.529 0.009 253.9);
  --ring: oklch(0.786 0.113 249.4);
  --success: oklch(0.760 0.132 178.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.820 0.100 189.8);
}

Design tokens (DTCG-style JSON)

{
  "color": {
    "light": {
      "background": {
        "$type": "color",
        "$value": "oklch(0.975 0.006 255.5)",
        "$description": "sRGB #f4f7fb"
      },
      "surface": {
        "$type": "color",
        "$value": "oklch(0.996 0.003 228.8)",
        "$description": "sRGB #fcfeff"
      },
      "text": {
        "$type": "color",
        "$value": "oklch(0.221 0.007 258.4)",
        "$description": "sRGB #191b1e"
      },
      "text-muted": {
        "$type": "color",
        "$value": "oklch(0.459 0.009 260.7)",
        "$description": "sRGB #55585d"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.499 0.151 258.3)",
        "$description": "sRGB #2460b7"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.991 0.002 247.8)",
        "$description": "sRGB #fbfcfd"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.526 0.091 189.8)",
        "$description": "sRGB #007b76"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.646 0.010 264.5)",
        "$description": "sRGB #8b8e94"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.449 0.150 258.1)",
        "$description": "sRGB #1351a6"
      },
      "success": {
        "$type": "color",
        "$value": "oklch(0.533 0.100 175.7)",
        "$description": "sRGB #007f6a"
      },
      "success-solid": {
        "$type": "color",
        "$value": "oklch(0.544 0.103 174.6)",
        "$description": "sRGB #00836c"
      },
      "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.460 0.180 25.0)",
        "$description": "sRGB #a50d1c"
      },
      "error-solid": {
        "$type": "color",
        "$value": "oklch(0.5503 0.1985 24.99)",
        "$description": "sRGB #cc282f"
      },
      "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.199 0.007 258.4)",
        "$description": "sRGB #141619"
      },
      "surface": {
        "$type": "color",
        "$value": "oklch(0.246 0.005 248.0)",
        "$description": "sRGB #1f2123"
      },
      "text": {
        "$type": "color",
        "$value": "oklch(0.950 0.007 247.9)",
        "$description": "sRGB #ebeff3"
      },
      "text-muted": {
        "$type": "color",
        "$value": "oklch(0.800 0.010 258.3)",
        "$description": "sRGB #babec4"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.786 0.113 249.4)",
        "$description": "sRGB #7fbfff"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.160 0.002 286.2)",
        "$description": "sRGB #0d0d0e"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.820 0.100 189.8)",
        "$description": "sRGB #6ed9d2"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.529 0.009 253.9)",
        "$description": "sRGB #686c71"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.786 0.113 249.4)",
        "$description": "sRGB #7fbfff"
      },
      "success": {
        "$type": "color",
        "$value": "oklch(0.840 0.120 177.7)",
        "$description": "sRGB #64e4ca"
      },
      "success-solid": {
        "$type": "color",
        "$value": "oklch(0.760 0.132 178.0)",
        "$description": "sRGB #2accb1"
      },
      "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.699 0.180 24.8)",
        "$description": "sRGB #fa6863"
      },
      "error-solid": {
        "$type": "color",
        "$value": "oklch(0.724 0.171 24.7)",
        "$description": "sRGB #ff746e"
      },
      "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 #2460B7 in the OKLCH picker →Build a tonal scale →Check a pair

FAQ

Are the green and red really safe for colour blindness?: They are separated by more than the page's threshold under simulated protanopia, deuteranopia and tritanopia, using the Machado et al. simulation. That is evidence they are distinguishable, not a guarantee for every viewer, which is why signs and labels are still recommended.
Which contrast level do the numbers use?: Body and numeric text target AAA at 7:1. Links, buttons and status text target AA at 4.5:1, and borders and focus rings target 3:1 for UI components under WCAG 1.4.11.
Does this cover banking regulation?: No. It addresses colour contrast only. Whether a regulation applies to your product depends on region and service, so check with the people responsible for compliance.
How is this different from the banking palette?: Fintech here is a modern, brighter blue with a teal accent aimed at apps and dashboards. The banking palette is more conservative: deep navy with a restrained gold and AAA primary.

← All accessible palettes