Color Palette Generator

LCH
Generated scales

/* hue-shift: intense; light-reach: 1; dark-reach: 1; chroma-curve: 1; hue-bend: 1 */
:root {
  --palette-source-white: oklch(95.59% 0.008 39.17deg);
  --palette-source-black: oklch(21.51% 0.0197 39.17deg);
  --palette-source-brand: oklch(61.87% 0.1565 39.17deg);
  --palette-source-support: oklch(55.8% 0.095 194.769deg);
  --palette-source-highlight: oklch(48.2% 0.058 211.419deg);
  --palette-source-success: oklch(70% 0.15 150deg);
  --palette-source-warning: oklch(76% 0.16 70deg);
  --palette-source-danger: oklch(62% 0.2 28deg);
  --palette-source-info: oklch(59.1% 0.088 208.079deg);
  --palette-neutral-100: oklch(95.59% 0 39.17deg);
  --palette-neutral-200: oklch(89.6636% 0 39.17deg);
  --palette-neutral-300: oklch(83.7372% 0 39.17deg);
  --palette-neutral-400: oklch(76.3292% 0 39.17deg);
  --palette-neutral-500: oklch(68.9212% 0 39.17deg);
  --palette-neutral-600: oklch(61.5132% 0 39.17deg);
  --palette-neutral-700: oklch(54.1052% 0 39.17deg);
  --palette-neutral-800: oklch(45.9564% 0 39.17deg);
  --palette-neutral-900: oklch(37.0668% 0 39.17deg);
  --palette-neutral-1000: oklch(28.918% 0 39.17deg);
  --palette-neutral-1100: oklch(21.51% 0 39.17deg);
  --palette-neutral-tinted-100: oklch(95.59% 0.008 39.17deg);
  --palette-neutral-tinted-200: oklch(89.6636% 0.01 39.17deg);
  --palette-neutral-tinted-300: oklch(83.7372% 0.012 39.17deg);
  --palette-neutral-tinted-400: oklch(76.3292% 0.016 39.17deg);
  --palette-neutral-tinted-500: oklch(68.9212% 0.016 39.17deg);
  --palette-neutral-tinted-600: oklch(61.5132% 0.015 39.17deg);
  --palette-neutral-tinted-700: oklch(54.1052% 0.014 39.17deg);
  --palette-neutral-tinted-800: oklch(45.9564% 0.012 39.17deg);
  --palette-neutral-tinted-900: oklch(37.0668% 0.01 39.17deg);
  --palette-neutral-tinted-1000: oklch(28.918% 0.008 39.17deg);
  --palette-neutral-tinted-1100: oklch(21.51% 0.006 39.17deg);
  --palette-brand-100: oklch(92.8924% 0.0188 50.6265deg);
  --palette-brand-200: oklch(89.5204% 0.0313 48.7518deg);
  --palette-brand-300: oklch(85.474% 0.0501 46.6688deg);
  --palette-brand-400: oklch(80.7532% 0.0751 44.5858deg);
  --palette-brand-500: oklch(75.358% 0.1033 42.5028deg);
  --palette-brand-600: oklch(69.2884% 0.1315 40.8364deg);
  --palette-brand-700: oklch(61.87% 0.1565 39.17deg);
  --palette-brand-800: oklch(54.6052% 0.1471 35.253deg);
  --palette-brand-900: oklch(46.5332% 0.1283 31.336deg);
  --palette-brand-1000: oklch(37.654% 0.1064 26.6356deg);
  --palette-brand-1100: oklch(29.582% 0.0814 21.9352deg);
  --palette-support-100: oklch(92.4068% 0.0114 186.6461deg);
  --palette-support-200: oklch(88.4278% 0.019 187.9753deg);
  --palette-support-300: oklch(83.653% 0.0304 189.4522deg);
  --palette-support-400: oklch(78.0824% 0.0456 190.9291deg);
  --palette-support-500: oklch(71.716% 0.0627 192.406deg);
  --palette-support-600: oklch(64.5538% 0.0798 193.5875deg);
  --palette-support-700: oklch(55.8% 0.095 194.769deg);
  --palette-support-800: oklch(49.6278% 0.0893 199.2921deg);
  --palette-support-900: oklch(42.7698% 0.0779 203.8152deg);
  --palette-support-1000: oklch(35.226% 0.0646 209.2429deg);
  --palette-support-1100: oklch(28.368% 0.0494 214.6706deg);
  --palette-highlight-100: oklch(91.7988% 0.007 194.1386deg);
  --palette-highlight-200: oklch(87.0598% 0.0116 196.9663deg);
  --palette-highlight-300: oklch(81.373% 0.0186 200.1082deg);
  --palette-highlight-400: oklch(74.7384% 0.0278 203.2501deg);
  --palette-highlight-500: oklch(67.156% 0.0383 206.392deg);
  --palette-highlight-600: oklch(58.6258% 0.0487 208.9055deg);
  --palette-highlight-700: oklch(48.2% 0.058 211.419deg);
  --palette-highlight-800: oklch(43.3958% 0.0545 214.2771deg);
  --palette-highlight-900: oklch(38.0578% 0.0476 217.1352deg);
  --palette-highlight-1000: oklch(32.186% 0.0394 220.5649deg);
  --palette-highlight-1100: oklch(26.848% 0.0302 223.9946deg);
  --palette-success-100: oklch(93.5428% 0.018 166.5deg);
  --palette-success-200: oklch(90.9838% 0.03 163.8deg);
  --palette-success-300: oklch(87.913% 0.048 160.8deg);
  --palette-success-400: oklch(84.3304% 0.072 157.8deg);
  --palette-success-500: oklch(80.236% 0.099 154.8deg);
  --palette-success-600: oklch(75.6298% 0.126 152.4deg);
  --palette-success-700: oklch(70% 0.15 150deg);
  --palette-success-800: oklch(61.2718% 0.141 147deg);
  --palette-success-900: oklch(51.5738% 0.123 144deg);
  --palette-success-1000: oklch(40.906% 0.102 140.4deg);
  --palette-success-1100: oklch(31.208% 0.078 136.8deg);
  --palette-warning-100: oklch(94.0228% 0.0192 64.5deg);
  --palette-warning-200: oklch(92.0638% 0.032 65.4deg);
  --palette-warning-300: oklch(89.713% 0.0512 66.4deg);
  --palette-warning-400: oklch(86.9704% 0.0768 67.4deg);
  --palette-warning-500: oklch(83.836% 0.1056 68.4deg);
  --palette-warning-600: oklch(80.3098% 0.1344 69.2deg);
  --palette-warning-700: oklch(76% 0.16 70deg);
  --palette-warning-800: oklch(66.1918% 0.1504 75deg);
  --palette-warning-900: oklch(55.2938% 0.1312 80deg);
  --palette-warning-1000: oklch(43.306% 0.1088 86deg);
  --palette-warning-1100: oklch(32.408% 0.0832 92deg);
  --palette-danger-100: oklch(92.9028% 0.024 45.6deg);
  --palette-danger-200: oklch(89.5438% 0.04 42.72deg);
  --palette-danger-300: oklch(85.513% 0.064 39.52deg);
  --palette-danger-400: oklch(80.8104% 0.096 36.32deg);
  --palette-danger-500: oklch(75.436% 0.132 33.12deg);
  --palette-danger-600: oklch(69.3898% 0.168 30.56deg);
  --palette-danger-700: oklch(62% 0.2 28deg);
  --palette-danger-800: oklch(54.7118% 0.188 25.2deg);
  --palette-danger-900: oklch(46.6138% 0.164 22.4deg);
  --palette-danger-1000: oklch(37.706% 0.136 19.04deg);
  --palette-danger-1100: oklch(29.608% 0.104 15.68deg);
  --palette-info-100: oklch(92.6708% 0.0106 192.6355deg);
  --palette-info-200: oklch(89.0218% 0.0176 195.1627deg);
  --palette-info-300: oklch(84.643% 0.0282 197.9706deg);
  --palette-info-400: oklch(79.5344% 0.0422 200.7785deg);
  --palette-info-500: oklch(73.696% 0.0581 203.5864deg);
  --palette-info-600: oklch(67.1278% 0.0739 205.8327deg);
  --palette-info-700: oklch(59.1% 0.088 208.079deg);
  --palette-info-800: oklch(52.3338% 0.0827 211.2711deg);
  --palette-info-900: oklch(44.8158% 0.0722 214.4632deg);
  --palette-info-1000: oklch(36.546% 0.0598 218.2937deg);
  --palette-info-1100: oklch(29.028% 0.0458 222.1242deg);
}
Color Palette Generator

Source colors

White anchor

Black anchor

Brand

Support

Highlight

Success

Warning

Danger

Info

Scale tuning

Live component preview

Source mixer

Launch palette audit

Generated scales

Neutral

Tinted neutral

Brand

Support

Highlight

Success

Warning

Danger

Info

tokens-colors.css
