Sand Ripples

CSS

:root {
  --sand-ripples: #c1b7b0;
  --sand-ripples-rgb: 193 183 176;
  --sand-ripples-oklch: oklch(0.786 0.015 57.5);
}

.element {
  color: var(--sand-ripples);
  background-color: hsl(25 12% 72%);
  border-color: oklch(0.786 0.015 57.5);
}

Tailwind CSS v4

@theme {
  --color-sand-ripples: #c1b7b0;
  --color-sand-ripples-50: #f8f4f1;
  --color-sand-ripples-100: #ece7e3;
  --color-sand-ripples-200: #d9d3ce;
  --color-sand-ripples-300: #bdb6b0;
  --color-sand-ripples-400: #a69c96;
  --color-sand-ripples-500: #8e847d;
  --color-sand-ripples-600: #78706a;
  --color-sand-ripples-700: #605954;
  --color-sand-ripples-800: #47413d;
  --color-sand-ripples-900: #312d2a;
  --color-sand-ripples-950: #1d1a18;
}

SCSS

$sand-ripples: #c1b7b0;
$sand-ripples-rgb: 193, 183, 176;
$sand-ripples-light: mix(#fff, $sand-ripples, 20%);
$sand-ripples-dark: mix(#000, $sand-ripples, 20%);

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