Red Cedar

CSS

:root {
  --red-cedar: #d87678;
  --red-cedar-rgb: 216 118 120;
  --red-cedar-oklch: oklch(0.676 0.122 19.5);
}

.element {
  color: var(--red-cedar);
  background-color: hsl(359 56% 65%);
  border-color: oklch(0.676 0.122 19.5);
}

Tailwind CSS v4

@theme {
  --color-red-cedar: #d87678;
  --color-red-cedar-50: #ffe8e6;
  --color-red-cedar-100: #ffd9d6;
  --color-red-cedar-200: #ffc0bd;
  --color-red-cedar-300: #f09e9c;
  --color-red-cedar-400: #dd7f81;
  --color-red-cedar-500: #ca6164;
  --color-red-cedar-600: #ab5255;
  --color-red-cedar-700: #894244;
  --color-red-cedar-800: #662f32;
  --color-red-cedar-900: #482022;
  --color-red-cedar-950: #2f0f11;
}

SCSS

$red-cedar: #d87678;
$red-cedar-rgb: 216, 118, 120;
$red-cedar-light: mix(#fff, $red-cedar, 20%);
$red-cedar-dark: mix(#000, $red-cedar, 20%);

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