Moderne Class

CSS

:root {
  --moderne-class: #745b49;
  --moderne-class-rgb: 116 91 73;
  --moderne-class-oklch: oklch(0.492 0.043 57.3);
}

.element {
  color: var(--moderne-class);
  background-color: hsl(25 23% 37%);
  border-color: oklch(0.492 0.043 57.3);
}

Tailwind CSS v4

@theme {
  --color-moderne-class: #745b49;
  --color-moderne-class-50: #fff3e9;
  --color-moderne-class-100: #f3e5da;
  --color-moderne-class-200: #e3d0c3;
  --color-moderne-class-300: #c9b3a2;
  --color-moderne-class-400: #b39986;
  --color-moderne-class-500: #9d7f6b;
  --color-moderne-class-600: #846c5a;
  --color-moderne-class-700: #6a5648;
  --color-moderne-class-800: #4e3f34;
  --color-moderne-class-900: #372b24;
  --color-moderne-class-950: #211812;
}

SCSS

$moderne-class: #745b49;
$moderne-class-rgb: 116, 91, 73;
$moderne-class-light: mix(#fff, $moderne-class, 20%);
$moderne-class-dark: mix(#000, $moderne-class, 20%);

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