Color palette

Raw neutral, status, data and alpha color ramps. Components should consume semantic color roles rather than these values directly.

PreviewNameValue

--sous-ref-color-alpha-black-0rgb(0 0 0 / 0%)

--sous-ref-color-alpha-black-2rgb(0 0 0 / 2%)

--sous-ref-color-alpha-black-4rgb(0 0 0 / 4%)

--sous-ref-color-alpha-black-8rgb(0 0 0 / 8%)

--sous-ref-color-alpha-black-12rgb(0 0 0 / 12%)

--sous-ref-color-alpha-black-16rgb(0 0 0 / 16%)

--sous-ref-color-alpha-black-24rgb(0 0 0 / 24%)

--sous-ref-color-alpha-black-32rgb(0 0 0 / 32%)

--sous-ref-color-alpha-black-40rgb(0 0 0 / 40%)

--sous-ref-color-alpha-black-48rgb(0 0 0 / 48%)

--sous-ref-color-alpha-black-56rgb(0 0 0 / 56%)

--sous-ref-color-alpha-black-64rgb(0 0 0 / 64%)

--sous-ref-color-alpha-black-72rgb(0 0 0 / 72%)

--sous-ref-color-alpha-black-80rgb(0 0 0 / 80%)

--sous-ref-color-alpha-black-88rgb(0 0 0 / 88%)

--sous-ref-color-alpha-black-96rgb(0 0 0 / 96%)

--sous-ref-color-alpha-black-100rgb(0 0 0 / 100%)

--sous-ref-color-alpha-white-0rgb(255 255 255 / 0%)

--sous-ref-color-alpha-white-4rgb(255 255 255 / 4%)

--sous-ref-color-alpha-white-8rgb(255 255 255 / 8%)

--sous-ref-color-alpha-white-12rgb(255 255 255 / 12%)

--sous-ref-color-alpha-white-16rgb(255 255 255 / 16%)

--sous-ref-color-alpha-white-24rgb(255 255 255 / 24%)

--sous-ref-color-alpha-white-32rgb(255 255 255 / 32%)

--sous-ref-color-alpha-white-40rgb(255 255 255 / 40%)

--sous-ref-color-alpha-white-48rgb(255 255 255 / 48%)

--sous-ref-color-alpha-white-56rgb(255 255 255 / 56%)

--sous-ref-color-alpha-white-64rgb(255 255 255 / 64%)

--sous-ref-color-alpha-white-72rgb(255 255 255 / 72%)

--sous-ref-color-alpha-white-80rgb(255 255 255 / 80%)

--sous-ref-color-alpha-white-88rgb(255 255 255 / 88%)

--sous-ref-color-alpha-white-96rgb(255 255 255 / 96%)

--sous-ref-color-alpha-white-100rgb(255 255 255 / 100%)

--sous-ref-color-amber-50#fffbeb

--sous-ref-color-amber-100#fef3c7

--sous-ref-color-amber-200#fde68a

--sous-ref-color-amber-300#fcd34d

--sous-ref-color-amber-400#fbbf24

--sous-ref-color-amber-500#f59e0b

--sous-ref-color-amber-600#d97706

--sous-ref-color-amber-700#b45309

--sous-ref-color-amber-800#92400e

--sous-ref-color-amber-900#78350f

--sous-ref-color-amber-950#451a03

--sous-ref-color-blue-50#eff6ff

--sous-ref-color-blue-100#dbeafe

--sous-ref-color-blue-200#bfdbfe

--sous-ref-color-blue-300#93c5fd

--sous-ref-color-blue-400#60a5fa

--sous-ref-color-blue-500#3b82f6

--sous-ref-color-blue-600#2563eb

--sous-ref-color-blue-700#1d4ed8

--sous-ref-color-blue-800#1e40af

--sous-ref-color-blue-900#1e3a8a

--sous-ref-color-blue-950#172554

--sous-ref-color-brand-identity#212966

--sous-ref-color-green-50#f0fdf4

--sous-ref-color-green-100#dcfce7

--sous-ref-color-green-200#bbf7d0

--sous-ref-color-green-300#86efac

--sous-ref-color-green-400#4ade80

--sous-ref-color-green-500#22c55e

--sous-ref-color-green-600#16a34a

--sous-ref-color-green-700#15803d

--sous-ref-color-green-800#166534

--sous-ref-color-green-900#14532d

--sous-ref-color-green-950#052e16

--sous-ref-color-neutral-0#ffffff

--sous-ref-color-neutral-25#fdfdfd

--sous-ref-color-neutral-50#fafafa

--sous-ref-color-neutral-100#f5f5f5

--sous-ref-color-neutral-200#e5e5e5

--sous-ref-color-neutral-300#d4d4d4

--sous-ref-color-neutral-400#a3a3a3

--sous-ref-color-neutral-500#737373

--sous-ref-color-neutral-600#525252

--sous-ref-color-neutral-700#404040

--sous-ref-color-neutral-800#262626

--sous-ref-color-neutral-900#171717

--sous-ref-color-neutral-950#0a0a0a

--sous-ref-color-orange-50#fff7ed

--sous-ref-color-orange-100#ffedd5

--sous-ref-color-orange-200#fed7aa

--sous-ref-color-orange-300#fdba74

--sous-ref-color-orange-400#fb923c

--sous-ref-color-orange-500#f97316

--sous-ref-color-orange-600#ea580c

--sous-ref-color-orange-700#c2410c

--sous-ref-color-orange-800#9a3412

--sous-ref-color-orange-900#7c2d12

--sous-ref-color-orange-950#431407

--sous-ref-color-pink-50#fdf2f8

--sous-ref-color-pink-100#fce7f3

--sous-ref-color-pink-200#fbcfe8

--sous-ref-color-pink-300#f9a8d4

--sous-ref-color-pink-400#f472b6

--sous-ref-color-pink-500#ec4899

--sous-ref-color-pink-600#db2777

--sous-ref-color-pink-700#be185d

--sous-ref-color-pink-800#9d174d

--sous-ref-color-pink-900#831843

--sous-ref-color-pink-950#500724

--sous-ref-color-red-50#fef2f2

--sous-ref-color-red-100#fee2e2

--sous-ref-color-red-200#fecaca

--sous-ref-color-red-300#fca5a5

--sous-ref-color-red-400#f87171

--sous-ref-color-red-500#ef4444

--sous-ref-color-red-600#dc2626

--sous-ref-color-red-700#b91c1c

--sous-ref-color-red-800#991b1b

--sous-ref-color-red-900#7f1d1d

--sous-ref-color-red-950#450a0a

--sous-ref-color-sky-50#f0f9ff

--sous-ref-color-sky-100#e0f2fe

--sous-ref-color-sky-200#bae6fd

--sous-ref-color-sky-300#7dd3fc

--sous-ref-color-sky-400#4cbdff

--sous-ref-color-sky-500#0ea5e9

--sous-ref-color-sky-600#0284c7

--sous-ref-color-sky-700#0369a1

--sous-ref-color-sky-800#075985

--sous-ref-color-sky-900#0c4a6e

--sous-ref-color-sky-950#082f49

--sous-ref-color-teal-50#f0fdfa

--sous-ref-color-teal-100#ccfbf1

--sous-ref-color-teal-200#99f6e4

--sous-ref-color-teal-300#5eead4

--sous-ref-color-teal-400#2dd4bf

--sous-ref-color-teal-500#14b8a6

--sous-ref-color-teal-600#0d9488

--sous-ref-color-teal-700#0f766e

--sous-ref-color-teal-800#115e59

--sous-ref-color-teal-900#134e4a

--sous-ref-color-teal-950#042f2e

--sous-ref-color-violet-50#f5f3ff

--sous-ref-color-violet-100#ede9fe

--sous-ref-color-violet-200#ddd6fe

--sous-ref-color-violet-300#c4b5fd

--sous-ref-color-violet-400#a78bfa

--sous-ref-color-violet-500#8b5cf6

--sous-ref-color-violet-600#7c3aed

--sous-ref-color-violet-700#6d28d9

--sous-ref-color-violet-800#5b21b6

--sous-ref-color-violet-900#4c1d95

--sous-ref-color-violet-950#2e1065