Rolling Pebble

CSS

:root {
  --rolling-pebble: #a09482;
  --rolling-pebble-rgb: 160 148 130;
  --rolling-pebble-oklch: oklch(0.672 0.029 78.1);
}

.element {
  color: var(--rolling-pebble);
  background-color: hsl(36 14% 57%);
  border-color: oklch(0.672 0.029 78.1);
}

Tailwind CSS v4

@theme {
  --color-rolling-pebble: #a09482;
  --color-rolling-pebble-50: #faf4ec;
  --color-rolling-pebble-100: #ede7dd;
  --color-rolling-pebble-200: #dbd3c7;
  --color-rolling-pebble-300: #bfb6a7;
  --color-rolling-pebble-400: #a89d8b;
  --color-rolling-pebble-500: #918471;
  --color-rolling-pebble-600: #7b7060;
  --color-rolling-pebble-700: #62594c;
  --color-rolling-pebble-800: #484137;
  --color-rolling-pebble-900: #322d26;
  --color-rolling-pebble-950: #1e1a14;
}

SCSS

$rolling-pebble: #a09482;
$rolling-pebble-rgb: 160, 148, 130;
$rolling-pebble-light: mix(#fff, $rolling-pebble, 20%);
$rolling-pebble-dark: mix(#000, $rolling-pebble, 20%);

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