Oklahoma Wheat

CSS

:root {
  --oklahoma-wheat: #f5e0ba;
  --oklahoma-wheat-rgb: 245 224 186;
  --oklahoma-wheat-oklch: oklch(0.914 0.055 82.4);
}

.element {
  color: var(--oklahoma-wheat);
  background-color: hsl(39 75% 85%);
  border-color: oklch(0.914 0.055 82.4);
}

Tailwind CSS v4

@theme {
  --color-oklahoma-wheat: #f5e0ba;
  --color-oklahoma-wheat-50: #fdf4e4;
  --color-oklahoma-wheat-100: #f0e7d4;
  --color-oklahoma-wheat-200: #dfd3ba;
  --color-oklahoma-wheat-300: #c5b698;
  --color-oklahoma-wheat-400: #af9c7a;
  --color-oklahoma-wheat-500: #98835c;
  --color-oklahoma-wheat-600: #816f4e;
  --color-oklahoma-wheat-700: #67593e;
  --color-oklahoma-wheat-800: #4c402c;
  --color-oklahoma-wheat-900: #352c1e;
  --color-oklahoma-wheat-950: #20190e;
}

SCSS

$oklahoma-wheat: #f5e0ba;
$oklahoma-wheat-rgb: 245, 224, 186;
$oklahoma-wheat-light: mix(#fff, $oklahoma-wheat, 20%);
$oklahoma-wheat-dark: mix(#000, $oklahoma-wheat, 20%);

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