Seine and Sensibility

CSS

:root {
  --seine-and-sensibility: #ccc4b0;
  --seine-and-sensibility-rgb: 204 196 176;
  --seine-and-sensibility-oklch: oklch(0.821 0.029 88.8);
}

.element {
  color: var(--seine-and-sensibility);
  background-color: hsl(43 22% 75%);
  border-color: oklch(0.821 0.029 88.8);
}

Tailwind CSS v4

@theme {
  --color-seine-and-sensibility: #ccc4b0;
  --color-seine-and-sensibility-50: #f8f5ec;
  --color-seine-and-sensibility-100: #ebe8dd;
  --color-seine-and-sensibility-200: #d9d4c7;
  --color-seine-and-sensibility-300: #bdb7a7;
  --color-seine-and-sensibility-400: #a59e8c;
  --color-seine-and-sensibility-500: #8e8671;
  --color-seine-and-sensibility-600: #787160;
  --color-seine-and-sensibility-700: #605a4c;
  --color-seine-and-sensibility-800: #474237;
  --color-seine-and-sensibility-900: #312d26;
  --color-seine-and-sensibility-950: #1d1a14;
}

SCSS

$seine-and-sensibility: #ccc4b0;
$seine-and-sensibility-rgb: 204, 196, 176;
$seine-and-sensibility-light: mix(#fff, $seine-and-sensibility, 20%);
$seine-and-sensibility-dark: mix(#000, $seine-and-sensibility, 20%);

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