Cat’s Eye Marble

CSS

:root {
  --cat-s-eye-marble: #d6a75d;
  --cat-s-eye-marble-rgb: 214 167 93;
  --cat-s-eye-marble-oklch: oklch(0.756 0.107 77.3);
}

.element {
  color: var(--cat-s-eye-marble);
  background-color: hsl(37 60% 60%);
  border-color: oklch(0.756 0.107 77.3);
}

Tailwind CSS v4

@theme {
  --color-cat-s-eye-marble: #d6a75d;
  --color-cat-s-eye-marble-50: #fff2d3;
  --color-cat-s-eye-marble-100: #fbe5c0;
  --color-cat-s-eye-marble-200: #edd0a1;
  --color-cat-s-eye-marble-300: #d5b177;
  --color-cat-s-eye-marble-400: #c29651;
  --color-cat-s-eye-marble-500: #ad7c21;
  --color-cat-s-eye-marble-600: #92691f;
  --color-cat-s-eye-marble-700: #755419;
  --color-cat-s-eye-marble-800: #583c10;
  --color-cat-s-eye-marble-900: #3d2a0a;
  --color-cat-s-eye-marble-950: #271700;
}

SCSS

$cat-s-eye-marble: #d6a75d;
$cat-s-eye-marble-rgb: 214, 167, 93;
$cat-s-eye-marble-light: mix(#fff, $cat-s-eye-marble, 20%);
$cat-s-eye-marble-dark: mix(#000, $cat-s-eye-marble, 20%);

.element {
  color: $cat-s-eye-marble;
  box-shadow: 0 0 0 2px rgba($cat-s-eye-marble, 0.35);
}