Yellow Ochre

CSS

:root {
  --yellow-ochre: #c39143;
  --yellow-ochre-rgb: 195 145 67;
  --yellow-ochre-oklch: oklch(0.69 0.112 76);
}

.element {
  color: var(--yellow-ochre);
  background-color: hsl(37 52% 51%);
  border-color: oklch(0.69 0.112 76);
}

Tailwind CSS v4

@theme {
  --color-yellow-ochre: #c39143;
  --color-yellow-ochre-50: #fff2d2;
  --color-yellow-ochre-100: #fde4be;
  --color-yellow-ochre-200: #efcf9e;
  --color-yellow-ochre-300: #d7b174;
  --color-yellow-ochre-400: #c4954c;
  --color-yellow-ochre-500: #b07a17;
  --color-yellow-ochre-600: #956818;
  --color-yellow-ochre-700: #775313;
  --color-yellow-ochre-800: #593c0c;
  --color-yellow-ochre-900: #3e2908;
  --color-yellow-ochre-950: #271700;
}

SCSS

$yellow-ochre: #c39143;
$yellow-ochre-rgb: 195, 145, 67;
$yellow-ochre-light: mix(#fff, $yellow-ochre, 20%);
$yellow-ochre-dark: mix(#000, $yellow-ochre, 20%);

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