Madder Orange

CSS

:root {
  --madder-orange: #f1beb0;
  --madder-orange-rgb: 241 190 176;
  --madder-orange-oklch: oklch(0.843 0.062 35.9);
}

.element {
  color: var(--madder-orange);
  background-color: hsl(13 70% 82%);
  border-color: oklch(0.843 0.062 35.9);
}

Tailwind CSS v4

@theme {
  --color-madder-orange: #f1beb0;
  --color-madder-orange-50: #fff0e9;
  --color-madder-orange-100: #fce1d9;
  --color-madder-orange-200: #edccc1;
  --color-madder-orange-300: #d5ada1;
  --color-madder-orange-400: #c09285;
  --color-madder-orange-500: #ab786a;
  --color-madder-orange-600: #91655a;
  --color-madder-orange-700: #745147;
  --color-madder-orange-800: #563b34;
  --color-madder-orange-900: #3c2824;
  --color-madder-orange-950: #261612;
}

SCSS

$madder-orange: #f1beb0;
$madder-orange-rgb: 241, 190, 176;
$madder-orange-light: mix(#fff, $madder-orange, 20%);
$madder-orange-dark: mix(#000, $madder-orange, 20%);

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