Clear Cinnamon

CSS

:root {
  --clear-cinnamon: #dfdbd8;
  --clear-cinnamon-rgb: 223 219 216;
  --clear-cinnamon-oklch: oklch(0.894 0.006 59.6);
}

.element {
  color: var(--clear-cinnamon);
  background-color: hsl(26 10% 86%);
  border-color: oklch(0.894 0.006 59.6);
}

Tailwind CSS v4

@theme {
  --color-clear-cinnamon: #dfdbd8;
  --color-clear-cinnamon-50: #f6f5f3;
  --color-clear-cinnamon-100: #e9e7e6;
  --color-clear-cinnamon-200: #d6d4d2;
  --color-clear-cinnamon-300: #bab7b4;
  --color-clear-cinnamon-400: #a19e9b;
  --color-clear-cinnamon-500: #898582;
  --color-clear-cinnamon-600: #74716e;
  --color-clear-cinnamon-700: #5d5a58;
  --color-clear-cinnamon-800: #444240;
  --color-clear-cinnamon-900: #2f2d2c;
  --color-clear-cinnamon-950: #1c1a19;
}

SCSS

$clear-cinnamon: #dfdbd8;
$clear-cinnamon-rgb: 223, 219, 216;
$clear-cinnamon-light: mix(#fff, $clear-cinnamon, 20%);
$clear-cinnamon-dark: mix(#000, $clear-cinnamon, 20%);

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