Bamboo Mat

CSS

:root {
  --bamboo-mat: #e5da9f;
  --bamboo-mat-rgb: 229 218 159;
  --bamboo-mat-oklch: oklch(0.883 0.077 98.8);
}

.element {
  color: var(--bamboo-mat);
  background-color: hsl(51 57% 76%);
  border-color: oklch(0.883 0.077 98.8);
}

Tailwind CSS v4

@theme {
  --color-bamboo-mat: #e5da9f;
  --color-bamboo-mat-50: #faf6dd;
  --color-bamboo-mat-100: #ede9cc;
  --color-bamboo-mat-200: #dbd6b0;
  --color-bamboo-mat-300: #c0b98b;
  --color-bamboo-mat-400: #aaa06a;
  --color-bamboo-mat-500: #938748;
  --color-bamboo-mat-600: #7c723e;
  --color-bamboo-mat-700: #635b31;
  --color-bamboo-mat-800: #4a4222;
  --color-bamboo-mat-900: #332e16;
  --color-bamboo-mat-950: #1f1b08;
}

SCSS

$bamboo-mat: #e5da9f;
$bamboo-mat-rgb: 229, 218, 159;
$bamboo-mat-light: mix(#fff, $bamboo-mat, 20%);
$bamboo-mat-dark: mix(#000, $bamboo-mat, 20%);

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