Why pink as the accent?

It is distinct from blue and from the red, amber and green used for status, so the accent never reads as a warning. The text form is a deep magenta-pink to reach contrast.

How should date pickers use colour?

Use the primary for selected dates, the border colour for the grid, and the muted text colour for disabled dates plus a pattern. All of those pairs are in the contrast table.

Does the palette cover maps?

Not map tiles. Pins can use the accent and primary with white outlines; test them against your chosen tile set.

Where do I see the exact colour values?

In the swatch grids with hex and OKLCH, and in the export code blocks, which are generated from the same data.

OKLCH Studio · Accessible palettes · Industries

Accessible color palette for travel (WCAG 2.2 verified)

Updated 2026-10-19

Travel sites combine inspiring imagery with dense, time-sensitive information: flight times, prices, baggage rules, hotel check-in details and cancellation terms. People use them on phones in airports, in sunlight, on weak connections and often in a second language. The palette must hold up in glare as well as in a design file.

Booking flows are long. Date pickers, passenger forms and payment steps each use colour for state: today, selected range, unavailable date, error. Those states need more than a hue difference. This palette provides verified roles for borders, focus rings and status colours, so a calendar can show an unavailable date with a pattern or strike-through as well as a muted colour.

WCAG 2.2 AA is the level most commonly referenced for consumer sites, and several regions apply accessibility rules to transport and booking services. This palette meets AA for each pair and uses AAA for body text. It is not legal advice.

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
#F2F8FA
oklch(0.975 0.007 219.6)
Sample text
Surface
#FAFFFF
oklch(0.996 0.005 197.1)
Sample text
Text
#171B1E
oklch(0.219 0.008 240.3)
Sample text
Muted text
#52595D
oklch(0.459 0.011 232.6)
Sample text
Primary
#006F98
oklch(0.5096 0.1052 232.95)
Sample text
Primary foreground
#FAFCFD
oklch(0.990 0.003 228.8)
Sample text
Accent
#9E3F84
oklch(0.520 0.150 339.6)
Sample text
Border
#888F93
oklch(0.646 0.010 232.5)
Sample text
Focus ring
#006089
oklch(0.4628 0.1001 236.37)
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
#FAFCFD
oklch(0.990 0.003 228.8)
Sample text
Warning
#A16300
oklch(0.555 0.122 67.9)
Sample text
Warning fill
#FFBA44
oklch(0.8335 0.1508 76.88)
Sample text
Warning fill label
#0E1010
oklch(0.171 0.003 196.9)
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
#FAFCFD
oklch(0.990 0.003 228.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
#FAFCFD
oklch(0.990 0.003 228.8)
Sample text

Appointment confirmed

Secondary text sits on the surface colour.

Link in primary · Accent text

Primary buttonSuccessWarningErrorInfo

Dark theme

Background
#131719
oklch(0.201 0.007 229.3)
Sample text
Surface
#1D2123
oklch(0.244 0.007 229.2)
Sample text
Text
#E9F0F3
oklch(0.951 0.009 225.1)
Sample text
Muted text
#B7BFC3
oklch(0.800 0.011 228.9)
Sample text
Primary
#5DCDFA
oklch(0.8009 0.1195 227.58)
Sample text
Primary foreground
#0C0D0E
oklch(0.158 0.003 248.0)
Sample text
Accent
#FF9CE3
oklch(0.815 0.146 338.2)
Sample text
Border
#656D70
oklch(0.529 0.011 222.2)
Sample text
Focus ring
#5DCDFA
oklch(0.8009 0.1195 227.58)
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
#0E1010
oklch(0.171 0.003 196.9)
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
#0E1010
oklch(0.171 0.003 196.9)
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
#0E1010
oklch(0.171 0.003 196.9)
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
#0E1010
oklch(0.171 0.003 196.9)
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#171b1e on #f2f8fa	16.15:1	AAA 7:1	Pass / Pass	Pass / Pass	+99.4	Lc 75: body text	Open in checker
Text on surface#171b1e on #faffff	17.17:1	AAA 7:1	Pass / Pass	Pass / Pass	+103.6	Lc 75: body text	Open in checker
Muted text on background#52595d on #f2f8fa	6.64:1	AA 4.5:1	Pass / Fail	Pass / Pass	+79.9	Lc 75: body text	Open in checker
Muted text on surface#52595d on #faffff	7.06:1	AA 4.5:1	Pass / Pass	Pass / Pass	+84.1	Lc 75: body text	Open in checker
Primary as link text on background#006f98 on #f2f8fa	5.25:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.7	Lc 60: larger content text	Open in checker
Primary as link text on surface#006f98 on #faffff	5.58:1	AA 4.5:1	Pass / Fail	Pass / Pass	+76.9	Lc 75: body text	Open in checker
Button label on primary#fafcfd on #006f98	5.47:1	AA 4.5:1	Pass / Fail	Pass / Pass	−80.7	Lc 75: body text	Open in checker
Accent text on background#9e3f84 on #f2f8fa	5.59:1	AA 4.5:1	Pass / Fail	Pass / Pass	+74.5	Lc 60: larger content text	Open in checker
Accent text on surface#9e3f84 on #faffff	5.94:1	AA 4.5:1	Pass / Fail	Pass / Pass	+78.7	Lc 75: body text	Open in checker
Border on background#888f93 on #f2f8fa	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#888f93 on #faffff	3.25:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	+59.6	Lc 45: headlines and large text	Open in checker
Focus ring on background#006089 on #f2f8fa	6.45:1	3:1 (WCAG 1.4.11)	Pass / Fail	Pass / Pass	+78.5	Lc 75: body text	Open in checker
Focus ring on surface#006089 on #faffff	6.85:1	3:1 (WCAG 1.4.11)	Pass / Fail	Pass / Pass	+82.7	Lc 75: body text	Open in checker
Success text on background#008158 on #f2f8fa	4.57:1	AA 4.5:1	Pass / Fail	Pass / Pass	+68.5	Lc 60: larger content text	Open in checker
Success text on surface#008158 on #faffff	4.86:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.8	Lc 60: larger content text	Open in checker
Success badge label on fill#fafcfd on #008457	4.59:1	AA 4.5:1	Pass / Fail	Pass / Pass	−75.5	Lc 75: body text	Open in checker
Warning text on background#a16300 on #f2f8fa	4.55:1	AA 4.5:1	Pass / Fail	Pass / Pass	+68.6	Lc 60: larger content text	Open in checker
Warning text on surface#a16300 on #faffff	4.83:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.8	Lc 60: larger content text	Open in checker
Warning badge label on fill#0e1010 on #ffba44	11.23:1	AA 4.5:1	Pass / Pass	Pass / Pass	+73.1	Lc 60: larger content text	Open in checker
Error text on background#a21a1b on #f2f8fa	7.25:1	AA 4.5:1	Pass / Pass	Pass / Pass	+80.4	Lc 75: body text	Open in checker
Error text on surface#a21a1b on #faffff	7.70:1	AA 4.5:1	Pass / Pass	Pass / Pass	+84.6	Lc 75: body text	Open in checker
Error badge label on fill#fafcfd on #c8322e	5.16:1	AA 4.5:1	Pass / Fail	Pass / Pass	−78.2	Lc 75: body text	Open in checker
Info text on background#2274af on #f2f8fa	4.67:1	AA 4.5:1	Pass / Fail	Pass / Pass	+69.4	Lc 60: larger content text	Open in checker
Info text on surface#2274af on #faffff	4.97:1	AA 4.5:1	Pass / Fail	Pass / Pass	+73.7	Lc 60: larger content text	Open in checker
Info badge label on fill#fafcfd on #1377b9	4.67:1	AA 4.5:1	Pass / Fail	Pass / Pass	−76.1	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#e9f0f3 on #131719	15.65:1	AAA 7:1	Pass / Pass	Pass / Pass	−96.3	Lc 75: body text	Open in checker
Text on surface#e9f0f3 on #1d2123	14.08:1	AAA 7:1	Pass / Pass	Pass / Pass	−95.1	Lc 75: body text	Open in checker
Muted text on background#b7bfc3 on #131719	9.66:1	AA 4.5:1	Pass / Pass	Pass / Pass	−66.3	Lc 60: larger content text	Open in checker
Muted text on surface#b7bfc3 on #1d2123	8.69: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#5dcdfa on #131719	9.94:1	AA 4.5:1	Pass / Pass	Pass / Pass	−68.1	Lc 60: larger content text	Open in checker
Primary as link text on surface#5dcdfa on #1d2123	8.94:1	AA 4.5:1	Pass / Pass	Pass / Pass	−66.9	Lc 60: larger content text	Open in checker
Button label on primary#0c0d0e on #5dcdfa	10.72:1	AA 4.5:1	Pass / Pass	Pass / Pass	+70.0	Lc 60: larger content text	Open in checker
Accent text on background#ff9ce3 on #131719	9.54:1	AA 4.5:1	Pass / Pass	Pass / Pass	−65.9	Lc 60: larger content text	Open in checker
Accent text on surface#ff9ce3 on #1d2123	8.59:1	AA 4.5:1	Pass / Pass	Pass / Pass	−64.7	Lc 60: larger content text	Open in checker
Border on background#656d70 on #131719	3.41:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	−24.5	Below Lc 30	Open in checker
Border on surface#656d70 on #1d2123	3.07:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	−23.3	Below Lc 30	Open in checker
Focus ring on background#5dcdfa on #131719	9.94:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−68.1	Lc 60: larger content text	Open in checker
Focus ring on surface#5dcdfa on #1d2123	8.94:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−66.9	Lc 60: larger content text	Open in checker
Success text on background#6ce5b5 on #131719	11.60:1	AA 4.5:1	Pass / Pass	Pass / Pass	−76.9	Lc 75: body text	Open in checker
Success text on surface#6ce5b5 on #1d2123	10.44:1	AA 4.5:1	Pass / Pass	Pass / Pass	−75.7	Lc 75: body text	Open in checker
Success badge label on fill#0e1010 on #3bcd9a	9.43:1	AA 4.5:1	Pass / Pass	Pass / Pass	+64.5	Lc 60: larger content text	Open in checker
Warning text on background#ffbc56 on #131719	10.80: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 #1d2123	9.72:1	AA 4.5:1	Pass / Pass	Pass / Pass	−71.5	Lc 60: larger content text	Open in checker
Warning badge label on fill#0e1010 on #e9a11d	8.70: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 #131719	6.25: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 #1d2123	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#0e1010 on #ff7a6d	7.50: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 #131719	9.10:1	AA 4.5:1	Pass / Pass	Pass / Pass	−63.3	Lc 60: larger content text	Open in checker
Info text on surface#71bfff on #1d2123	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#0e1010 on #61b9ff	8.99: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 sky blue at OKLCH hue 228 and chroma 0.12. It evokes open air and water, and in the AA-solved form it is a deeper cerulean that still feels fresh. The accent is a vivid pink at hue 340, which stands out against both blue and photography and is not one of the usual status hues, so it never gets confused with error or warning.

The neutrals carry a faint blue tint. Light surfaces are verified for text, and the dark theme suits night-time browsing and late arrivals. Lightness for every role was solved against both background and card colours, holding hue and chroma.

Travellers also use these sites while stressed or distracted, such as rebooking after a cancelled flight. In that situation the pages that matter most are the simplest ones: itinerary, change options and contact details. Keeping those pages on the strongest text and surface pairs, free from decoration and promotional colour, means the information is readable when it counts.

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

How to use it

Show calendar states with more than colour: a ring for today, a filled range with end caps, and a strike-through for unavailable dates.
Put departure and arrival times in the full text colour; times are the data people act on.
Use the success badge for Free cancellation and the warning badge for Last rooms, each with the words.
Keep text on hero photos inside a solid panel; sunsets and beaches make unpredictable backgrounds.
Offer the dark theme and test the key screens outdoors on a phone at moderate brightness.

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: #f2f8fa;
  --color-surface: #faffff;
  --color-text: #171b1e;
  --color-text-muted: #52595d;
  --color-primary: #006f98;
  --color-primary-foreground: #fafcfd;
  --color-accent: #9e3f84;
  --color-border: #888f93;
  --color-focus-ring: #006089;
  --color-success: #008158;
  --color-success-solid: #008457;
  --color-success-solid-foreground: #fafcfd;
  --color-warning: #a16300;
  --color-warning-solid: #ffba44;
  --color-warning-solid-foreground: #0e1010;
  --color-error: #a21a1b;
  --color-error-solid: #c8322e;
  --color-error-solid-foreground: #fafcfd;
  --color-info: #2274af;
  --color-info-solid: #1377b9;
  --color-info-solid-foreground: #fafcfd;
}
.dark {
  --color-background: #131719;
  --color-surface: #1d2123;
  --color-text: #e9f0f3;
  --color-text-muted: #b7bfc3;
  --color-primary: #5dcdfa;
  --color-primary-foreground: #0c0d0e;
  --color-accent: #ff9ce3;
  --color-border: #656d70;
  --color-focus-ring: #5dcdfa;
  --color-success: #6ce5b5;
  --color-success-solid: #3bcd9a;
  --color-success-solid-foreground: #0e1010;
  --color-warning: #ffbc56;
  --color-warning-solid: #e9a11d;
  --color-warning-solid-foreground: #0e1010;
  --color-error: #f66d62;
  --color-error-solid: #ff7a6d;
  --color-error-solid-foreground: #0e1010;
  --color-info: #71bfff;
  --color-info-solid: #61b9ff;
  --color-info-solid-foreground: #0e1010;
}

/* 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.007 219.6);
    --color-surface: oklch(0.996 0.005 197.1);
    --color-text: oklch(0.219 0.008 240.3);
    --color-text-muted: oklch(0.459 0.011 232.6);
    --color-primary: oklch(0.5096 0.1052 232.95);
    --color-primary-foreground: oklch(0.990 0.003 228.8);
    --color-accent: oklch(0.520 0.150 339.6);
    --color-border: oklch(0.646 0.010 232.5);
    --color-focus-ring: oklch(0.4628 0.1001 236.37);
    --color-success: oklch(0.5333 0.1163 162.37);
    --color-success-solid: oklch(0.5415 0.1211 160.71);
    --color-success-solid-foreground: oklch(0.990 0.003 228.8);
    --color-warning: oklch(0.555 0.122 67.9);
    --color-warning-solid: oklch(0.8335 0.1508 76.88);
    --color-warning-solid-foreground: oklch(0.171 0.003 196.9);
    --color-error: oklch(0.4603 0.1706 26.95);
    --color-error-solid: oklch(0.551 0.187 27.1);
    --color-error-solid-foreground: oklch(0.990 0.003 228.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.990 0.003 228.8);
  }
  .dark {
    --color-background: oklch(0.201 0.007 229.3);
    --color-surface: oklch(0.244 0.007 229.2);
    --color-text: oklch(0.951 0.009 225.1);
    --color-text-muted: oklch(0.800 0.011 228.9);
    --color-primary: oklch(0.8009 0.1195 227.58);
    --color-primary-foreground: oklch(0.158 0.003 248.0);
    --color-accent: oklch(0.815 0.146 338.2);
    --color-border: oklch(0.529 0.011 222.2);
    --color-focus-ring: oklch(0.8009 0.1195 227.58);
    --color-success: oklch(0.839 0.130 164.9);
    --color-success-solid: oklch(0.759 0.143 165.0);
    --color-success-solid-foreground: oklch(0.171 0.003 196.9);
    --color-warning: oklch(0.839 0.140 75.1);
    --color-warning-solid: oklch(0.7605 0.1539 75.30);
    --color-warning-solid-foreground: oklch(0.171 0.003 196.9);
    --color-error: oklch(0.700 0.171 27.0);
    --color-error-solid: oklch(0.732 0.165 27.5);
    --color-error-solid-foreground: oklch(0.171 0.003 196.9);
    --color-info: oklch(0.780 0.120 245.0);
    --color-info-solid: oklch(0.760 0.132 244.8);
    --color-info-solid-foreground: oklch(0.171 0.003 196.9);
  }
}

Tailwind CSS v4 @theme

@theme {
  /* light */
  --color-background: oklch(0.975 0.007 219.6); /* #f2f8fa */
  --color-surface: oklch(0.996 0.005 197.1); /* #faffff */
  --color-text: oklch(0.219 0.008 240.3); /* #171b1e */
  --color-text-muted: oklch(0.459 0.011 232.6); /* #52595d */
  --color-primary: oklch(0.5096 0.1052 232.95); /* #006f98 */
  --color-primary-foreground: oklch(0.990 0.003 228.8); /* #fafcfd */
  --color-accent: oklch(0.520 0.150 339.6); /* #9e3f84 */
  --color-border: oklch(0.646 0.010 232.5); /* #888f93 */
  --color-focus-ring: oklch(0.4628 0.1001 236.37); /* #006089 */
  --color-success: oklch(0.5333 0.1163 162.37); /* #008158 */
  --color-success-solid: oklch(0.5415 0.1211 160.71); /* #008457 */
  --color-success-solid-foreground: oklch(0.990 0.003 228.8); /* #fafcfd */
  --color-warning: oklch(0.555 0.122 67.9); /* #a16300 */
  --color-warning-solid: oklch(0.8335 0.1508 76.88); /* #ffba44 */
  --color-warning-solid-foreground: oklch(0.171 0.003 196.9); /* #0e1010 */
  --color-error: oklch(0.4603 0.1706 26.95); /* #a21a1b */
  --color-error-solid: oklch(0.551 0.187 27.1); /* #c8322e */
  --color-error-solid-foreground: oklch(0.990 0.003 228.8); /* #fafcfd */
  --color-info: oklch(0.540 0.120 245.0); /* #2274af */
  --color-info-solid: oklch(0.5501 0.1324 245.13); /* #1377b9 */
  --color-info-solid-foreground: oklch(0.990 0.003 228.8); /* #fafcfd */
  /* dark: use as dark:bg-background-dark, or remap under a .dark selector */
  --color-background-dark: oklch(0.201 0.007 229.3); /* #131719 */
  --color-surface-dark: oklch(0.244 0.007 229.2); /* #1d2123 */
  --color-text-dark: oklch(0.951 0.009 225.1); /* #e9f0f3 */
  --color-text-muted-dark: oklch(0.800 0.011 228.9); /* #b7bfc3 */
  --color-primary-dark: oklch(0.8009 0.1195 227.58); /* #5dcdfa */
  --color-primary-foreground-dark: oklch(0.158 0.003 248.0); /* #0c0d0e */
  --color-accent-dark: oklch(0.815 0.146 338.2); /* #ff9ce3 */
  --color-border-dark: oklch(0.529 0.011 222.2); /* #656d70 */
  --color-focus-ring-dark: oklch(0.8009 0.1195 227.58); /* #5dcdfa */
  --color-success-dark: oklch(0.839 0.130 164.9); /* #6ce5b5 */
  --color-success-solid-dark: oklch(0.759 0.143 165.0); /* #3bcd9a */
  --color-success-solid-foreground-dark: oklch(0.171 0.003 196.9); /* #0e1010 */
  --color-warning-dark: oklch(0.839 0.140 75.1); /* #ffbc56 */
  --color-warning-solid-dark: oklch(0.7605 0.1539 75.30); /* #e9a11d */
  --color-warning-solid-foreground-dark: oklch(0.171 0.003 196.9); /* #0e1010 */
  --color-error-dark: oklch(0.700 0.171 27.0); /* #f66d62 */
  --color-error-solid-dark: oklch(0.732 0.165 27.5); /* #ff7a6d */
  --color-error-solid-foreground-dark: oklch(0.171 0.003 196.9); /* #0e1010 */
  --color-info-dark: oklch(0.780 0.120 245.0); /* #71bfff */
  --color-info-solid-dark: oklch(0.760 0.132 244.8); /* #61b9ff */
  --color-info-solid-foreground-dark: oklch(0.171 0.003 196.9); /* #0e1010 */
}

shadcn/ui variables (:root and .dark)

:root {
  --background: oklch(0.975 0.007 219.6);
  --foreground: oklch(0.219 0.008 240.3);
  --card: oklch(0.996 0.005 197.1);
  --card-foreground: oklch(0.219 0.008 240.3);
  --popover: oklch(0.996 0.005 197.1);
  --popover-foreground: oklch(0.219 0.008 240.3);
  --primary: oklch(0.5096 0.1052 232.95);
  --primary-foreground: oklch(0.990 0.003 228.8);
  --secondary: oklch(0.996 0.005 197.1);
  --secondary-foreground: oklch(0.219 0.008 240.3);
  --muted: oklch(0.996 0.005 197.1);
  --muted-foreground: oklch(0.459 0.011 232.6);
  --accent: oklch(0.996 0.005 197.1);
  --accent-foreground: oklch(0.219 0.008 240.3);
  --destructive: oklch(0.551 0.187 27.1);
  --destructive-foreground: oklch(0.990 0.003 228.8);
  --border: oklch(0.646 0.010 232.5);
  --input: oklch(0.646 0.010 232.5);
  --ring: oklch(0.4628 0.1001 236.37);
  --success: oklch(0.5415 0.1211 160.71);
  --success-foreground: oklch(0.990 0.003 228.8);
  --warning: oklch(0.8335 0.1508 76.88);
  --warning-foreground: oklch(0.171 0.003 196.9);
  --info: oklch(0.5501 0.1324 245.13);
  --info-foreground: oklch(0.990 0.003 228.8);
  --brand-accent: oklch(0.520 0.150 339.6);
}

.dark {
  --background: oklch(0.201 0.007 229.3);
  --foreground: oklch(0.951 0.009 225.1);
  --card: oklch(0.244 0.007 229.2);
  --card-foreground: oklch(0.951 0.009 225.1);
  --popover: oklch(0.244 0.007 229.2);
  --popover-foreground: oklch(0.951 0.009 225.1);
  --primary: oklch(0.8009 0.1195 227.58);
  --primary-foreground: oklch(0.158 0.003 248.0);
  --secondary: oklch(0.244 0.007 229.2);
  --secondary-foreground: oklch(0.951 0.009 225.1);
  --muted: oklch(0.244 0.007 229.2);
  --muted-foreground: oklch(0.800 0.011 228.9);
  --accent: oklch(0.244 0.007 229.2);
  --accent-foreground: oklch(0.951 0.009 225.1);
  --destructive: oklch(0.732 0.165 27.5);
  --destructive-foreground: oklch(0.171 0.003 196.9);
  --border: oklch(0.529 0.011 222.2);
  --input: oklch(0.529 0.011 222.2);
  --ring: oklch(0.8009 0.1195 227.58);
  --success: oklch(0.759 0.143 165.0);
  --success-foreground: oklch(0.171 0.003 196.9);
  --warning: oklch(0.7605 0.1539 75.30);
  --warning-foreground: oklch(0.171 0.003 196.9);
  --info: oklch(0.760 0.132 244.8);
  --info-foreground: oklch(0.171 0.003 196.9);
  --brand-accent: oklch(0.815 0.146 338.2);
}

Design tokens (DTCG-style JSON)

{
  "color": {
    "light": {
      "background": {
        "$type": "color",
        "$value": "oklch(0.975 0.007 219.6)",
        "$description": "sRGB #f2f8fa"
      },
      "surface": {
        "$type": "color",
        "$value": "oklch(0.996 0.005 197.1)",
        "$description": "sRGB #faffff"
      },
      "text": {
        "$type": "color",
        "$value": "oklch(0.219 0.008 240.3)",
        "$description": "sRGB #171b1e"
      },
      "text-muted": {
        "$type": "color",
        "$value": "oklch(0.459 0.011 232.6)",
        "$description": "sRGB #52595d"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.5096 0.1052 232.95)",
        "$description": "sRGB #006f98"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.990 0.003 228.8)",
        "$description": "sRGB #fafcfd"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.520 0.150 339.6)",
        "$description": "sRGB #9e3f84"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.646 0.010 232.5)",
        "$description": "sRGB #888f93"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.4628 0.1001 236.37)",
        "$description": "sRGB #006089"
      },
      "success": {
        "$type": "color",
        "$value": "oklch(0.5333 0.1163 162.37)",
        "$description": "sRGB #008158"
      },
      "success-solid": {
        "$type": "color",
        "$value": "oklch(0.5415 0.1211 160.71)",
        "$description": "sRGB #008457"
      },
      "success-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.990 0.003 228.8)",
        "$description": "sRGB #fafcfd"
      },
      "warning": {
        "$type": "color",
        "$value": "oklch(0.555 0.122 67.9)",
        "$description": "sRGB #a16300"
      },
      "warning-solid": {
        "$type": "color",
        "$value": "oklch(0.8335 0.1508 76.88)",
        "$description": "sRGB #ffba44"
      },
      "warning-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.171 0.003 196.9)",
        "$description": "sRGB #0e1010"
      },
      "error": {
        "$type": "color",
        "$value": "oklch(0.4603 0.1706 26.95)",
        "$description": "sRGB #a21a1b"
      },
      "error-solid": {
        "$type": "color",
        "$value": "oklch(0.551 0.187 27.1)",
        "$description": "sRGB #c8322e"
      },
      "error-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.990 0.003 228.8)",
        "$description": "sRGB #fafcfd"
      },
      "info": {
        "$type": "color",
        "$value": "oklch(0.540 0.120 245.0)",
        "$description": "sRGB #2274af"
      },
      "info-solid": {
        "$type": "color",
        "$value": "oklch(0.5501 0.1324 245.13)",
        "$description": "sRGB #1377b9"
      },
      "info-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.990 0.003 228.8)",
        "$description": "sRGB #fafcfd"
      }
    },
    "dark": {
      "background": {
        "$type": "color",
        "$value": "oklch(0.201 0.007 229.3)",
        "$description": "sRGB #131719"
      },
      "surface": {
        "$type": "color",
        "$value": "oklch(0.244 0.007 229.2)",
        "$description": "sRGB #1d2123"
      },
      "text": {
        "$type": "color",
        "$value": "oklch(0.951 0.009 225.1)",
        "$description": "sRGB #e9f0f3"
      },
      "text-muted": {
        "$type": "color",
        "$value": "oklch(0.800 0.011 228.9)",
        "$description": "sRGB #b7bfc3"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.8009 0.1195 227.58)",
        "$description": "sRGB #5dcdfa"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.158 0.003 248.0)",
        "$description": "sRGB #0c0d0e"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.815 0.146 338.2)",
        "$description": "sRGB #ff9ce3"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.529 0.011 222.2)",
        "$description": "sRGB #656d70"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.8009 0.1195 227.58)",
        "$description": "sRGB #5dcdfa"
      },
      "success": {
        "$type": "color",
        "$value": "oklch(0.839 0.130 164.9)",
        "$description": "sRGB #6ce5b5"
      },
      "success-solid": {
        "$type": "color",
        "$value": "oklch(0.759 0.143 165.0)",
        "$description": "sRGB #3bcd9a"
      },
      "success-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.171 0.003 196.9)",
        "$description": "sRGB #0e1010"
      },
      "warning": {
        "$type": "color",
        "$value": "oklch(0.839 0.140 75.1)",
        "$description": "sRGB #ffbc56"
      },
      "warning-solid": {
        "$type": "color",
        "$value": "oklch(0.7605 0.1539 75.30)",
        "$description": "sRGB #e9a11d"
      },
      "warning-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.171 0.003 196.9)",
        "$description": "sRGB #0e1010"
      },
      "error": {
        "$type": "color",
        "$value": "oklch(0.700 0.171 27.0)",
        "$description": "sRGB #f66d62"
      },
      "error-solid": {
        "$type": "color",
        "$value": "oklch(0.732 0.165 27.5)",
        "$description": "sRGB #ff7a6d"
      },
      "error-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.171 0.003 196.9)",
        "$description": "sRGB #0e1010"
      },
      "info": {
        "$type": "color",
        "$value": "oklch(0.780 0.120 245.0)",
        "$description": "sRGB #71bfff"
      },
      "info-solid": {
        "$type": "color",
        "$value": "oklch(0.760 0.132 244.8)",
        "$description": "sRGB #61b9ff"
      },
      "info-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.171 0.003 196.9)",
        "$description": "sRGB #0e1010"
      }
    }
  }
}

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 #006F98 in the OKLCH picker →Build a tonal scale →Check a pair

FAQ

Why pink as the accent?: It is distinct from blue and from the red, amber and green used for status, so the accent never reads as a warning. The text form is a deep magenta-pink to reach contrast.
How should date pickers use colour?: Use the primary for selected dates, the border colour for the grid, and the muted text colour for disabled dates plus a pattern. All of those pairs are in the contrast table.
Does the palette cover maps?: Not map tiles. Pins can use the accent and primary with white outlines; test them against your chosen tile set.
Where do I see the exact colour values?: In the swatch grids with hex and OKLCH, and in the export code blocks, which are generated from the same data.

← All accessible palettes