Dark Marmalade

CSS

:root {
  --dark-marmalade: #994939;
  --dark-marmalade-rgb: 153 73 57;
  --dark-marmalade-oklch: oklch(0.503 0.111 32.7);
}

.element {
  color: var(--dark-marmalade);
  background-color: hsl(10 46% 41%);
  border-color: oklch(0.503 0.111 32.7);
}

Tailwind CSS v4

@theme {
  --color-dark-marmalade: #994939;
  --color-dark-marmalade-50: #ffebe0;
  --color-dark-marmalade-100: #ffdccf;
  --color-dark-marmalade-200: #ffc4b5;
  --color-dark-marmalade-300: #eaa391;
  --color-dark-marmalade-400: #d88574;
  --color-dark-marmalade-500: #c46855;
  --color-dark-marmalade-600: #a65849;
  --color-dark-marmalade-700: #85473a;
  --color-dark-marmalade-800: #63322a;
  --color-dark-marmalade-900: #46221c;
  --color-dark-marmalade-950: #2d110d;
}

SCSS

$dark-marmalade: #994939;
$dark-marmalade-rgb: 153, 73, 57;
$dark-marmalade-light: mix(#fff, $dark-marmalade, 20%);
$dark-marmalade-dark: mix(#000, $dark-marmalade, 20%);

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