Tangent

CSS

:root {
  --tangent: #ead3a2;
  --tangent-rgb: 234 211 162;
  --tangent-oklch: oklch(0.874 0.069 85.7);
}

.element {
  color: var(--tangent);
  background-color: hsl(41 63% 78%);
  border-color: oklch(0.874 0.069 85.7);
}

Tailwind CSS v4

@theme {
  --color-tangent: #ead3a2;
  --color-tangent-50: #fdf4df;
  --color-tangent-100: #f2e7cf;
  --color-tangent-200: #e1d3b3;
  --color-tangent-300: #c6b690;
  --color-tangent-400: #b19c6f;
  --color-tangent-500: #9b834f;
  --color-tangent-600: #836f44;
  --color-tangent-700: #695936;
  --color-tangent-800: #4e4026;
  --color-tangent-900: #362c19;
  --color-tangent-950: #21190a;
}

SCSS

$tangent: #ead3a2;
$tangent-rgb: 234, 211, 162;
$tangent-light: mix(#fff, $tangent, 20%);
$tangent-dark: mix(#000, $tangent, 20%);

.element {
  color: $tangent;
  box-shadow: 0 0 0 2px rgba($tangent, 0.35);
}