Sour Tarts

CSS

:root {
  --sour-tarts: #fee5c8;
  --sour-tarts-rgb: 254 229 200;
  --sour-tarts-oklch: oklch(0.935 0.047 71.3);
}

.element {
  color: var(--sour-tarts);
  background-color: hsl(32 96% 89%);
  border-color: oklch(0.935 0.047 71.3);
}

Tailwind CSS v4

@theme {
  --color-sour-tarts: #fee5c8;
  --color-sour-tarts-50: #fef3e7;
  --color-sour-tarts-100: #f2e6d7;
  --color-sour-tarts-200: #e1d2bf;
  --color-sour-tarts-300: #c6b49e;
  --color-sour-tarts-400: #b09a81;
  --color-sour-tarts-500: #9a8164;
  --color-sour-tarts-600: #826e55;
  --color-sour-tarts-700: #685844;
  --color-sour-tarts-800: #4d4031;
  --color-sour-tarts-900: #362c21;
  --color-sour-tarts-950: #211910;
}

SCSS

$sour-tarts: #fee5c8;
$sour-tarts-rgb: 254, 229, 200;
$sour-tarts-light: mix(#fff, $sour-tarts, 20%);
$sour-tarts-dark: mix(#000, $sour-tarts, 20%);

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