Rocks of Normandy

CSS

:root {
  --rocks-of-normandy: #8e7d62;
  --rocks-of-normandy-rgb: 142 125 98;
  --rocks-of-normandy-oklch: oklch(0.598 0.044 79.2);
}

.element {
  color: var(--rocks-of-normandy);
  background-color: hsl(37 18% 47%);
  border-color: oklch(0.598 0.044 79.2);
}

Tailwind CSS v4

@theme {
  --color-rocks-of-normandy: #8e7d62;
  --color-rocks-of-normandy-50: #fcf4e7;
  --color-rocks-of-normandy-100: #efe7d8;
  --color-rocks-of-normandy-200: #ded3c0;
  --color-rocks-of-normandy-300: #c3b69e;
  --color-rocks-of-normandy-400: #ad9c81;
  --color-rocks-of-normandy-500: #968365;
  --color-rocks-of-normandy-600: #7f6f56;
  --color-rocks-of-normandy-700: #665944;
  --color-rocks-of-normandy-800: #4b4131;
  --color-rocks-of-normandy-900: #342d21;
  --color-rocks-of-normandy-950: #201a11;
}

SCSS

$rocks-of-normandy: #8e7d62;
$rocks-of-normandy-rgb: 142, 125, 98;
$rocks-of-normandy-light: mix(#fff, $rocks-of-normandy, 20%);
$rocks-of-normandy-dark: mix(#000, $rocks-of-normandy, 20%);

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