Riviera Sand

CSS

:root {
  --riviera-sand: #dfc6a0;
  --riviera-sand-rgb: 223 198 160;
  --riviera-sand-oklch: oklch(0.838 0.058 78.2);
}

.element {
  color: var(--riviera-sand);
  background-color: hsl(36 50% 75%);
  border-color: oklch(0.838 0.058 78.2);
}

Tailwind CSS v4

@theme {
  --color-riviera-sand: #dfc6a0;
  --color-riviera-sand-50: #fef4e3;
  --color-riviera-sand-100: #f2e6d3;
  --color-riviera-sand-200: #e1d2b9;
  --color-riviera-sand-300: #c7b596;
  --color-riviera-sand-400: #b19b78;
  --color-riviera-sand-500: #9b825a;
  --color-riviera-sand-600: #836e4d;
  --color-riviera-sand-700: #69583d;
  --color-riviera-sand-800: #4e402b;
  --color-riviera-sand-900: #362c1d;
  --color-riviera-sand-950: #21190d;
}

SCSS

$riviera-sand: #dfc6a0;
$riviera-sand-rgb: 223, 198, 160;
$riviera-sand-light: mix(#fff, $riviera-sand, 20%);
$riviera-sand-dark: mix(#000, $riviera-sand, 20%);

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