Slow Perch

CSS

:root {
  --slow-perch: #d5d4ce;
  --slow-perch-rgb: 213 212 206;
  --slow-perch-oklch: oklch(0.869 0.008 98.9);
}

.element {
  color: var(--slow-perch);
  background-color: hsl(51 8% 82%);
  border-color: oklch(0.869 0.008 98.9);
}

Tailwind CSS v4

@theme {
  --color-slow-perch: #d5d4ce;
  --color-slow-perch-50: #f5f5f2;
  --color-slow-perch-100: #e8e8e5;
  --color-slow-perch-200: #d5d4d0;
  --color-slow-perch-300: #b8b7b3;
  --color-slow-perch-400: #9f9e99;
  --color-slow-perch-500: #878680;
  --color-slow-perch-600: #72726d;
  --color-slow-perch-700: #5c5b57;
  --color-slow-perch-800: #43423f;
  --color-slow-perch-900: #2e2e2b;
  --color-slow-perch-950: #1b1b19;
}

SCSS

$slow-perch: #d5d4ce;
$slow-perch-rgb: 213, 212, 206;
$slow-perch-light: mix(#fff, $slow-perch, 20%);
$slow-perch-dark: mix(#000, $slow-perch, 20%);

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