Sand Pebble

CSS

:root {
  --sand-pebble: #b09d7f;
  --sand-pebble-rgb: 176 157 127;
  --sand-pebble-oklch: oklch(0.705 0.047 79.1);
}

.element {
  color: var(--sand-pebble);
  background-color: hsl(37 24% 59%);
  border-color: oklch(0.705 0.047 79.1);
}

Tailwind CSS v4

@theme {
  --color-sand-pebble: #b09d7f;
  --color-sand-pebble-50: #fcf4e6;
  --color-sand-pebble-100: #f0e7d7;
  --color-sand-pebble-200: #dfd3be;
  --color-sand-pebble-300: #c4b59d;
  --color-sand-pebble-400: #ae9c7f;
  --color-sand-pebble-500: #978363;
  --color-sand-pebble-600: #806f54;
  --color-sand-pebble-700: #665943;
  --color-sand-pebble-800: #4c4030;
  --color-sand-pebble-900: #352c20;
  --color-sand-pebble-950: #201910;
}

SCSS

$sand-pebble: #b09d7f;
$sand-pebble-rgb: 176, 157, 127;
$sand-pebble-light: mix(#fff, $sand-pebble, 20%);
$sand-pebble-dark: mix(#000, $sand-pebble, 20%);

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