Real Simple

CSS

:root {
  --real-simple: #ccb896;
  --real-simple-rgb: 204 184 150;
  --real-simple-oklch: oklch(0.791 0.051 80.9);
}

.element {
  color: var(--real-simple);
  background-color: hsl(38 35% 69%);
  border-color: oklch(0.791 0.051 80.9);
}

Tailwind CSS v4

@theme {
  --color-real-simple: #ccb896;
  --color-real-simple-50: #fcf4e5;
  --color-real-simple-100: #f0e7d5;
  --color-real-simple-200: #dfd3bc;
  --color-real-simple-300: #c4b69a;
  --color-real-simple-400: #ae9c7c;
  --color-real-simple-500: #98835f;
  --color-real-simple-600: #806f51;
  --color-real-simple-700: #675940;
  --color-real-simple-800: #4c402e;
  --color-real-simple-900: #352c1f;
  --color-real-simple-950: #20190f;
}

SCSS

$real-simple: #ccb896;
$real-simple-rgb: 204, 184, 150;
$real-simple-light: mix(#fff, $real-simple, 20%);
$real-simple-dark: mix(#000, $real-simple, 20%);

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