Misty Coast

CSS

:root {
  --misty-coast: #d5d9d3;
  --misty-coast-rgb: 213 217 211;
  --misty-coast-oklch: oklch(0.881 0.009 134.9);
}

.element {
  color: var(--misty-coast);
  background-color: hsl(100 7% 84%);
  border-color: oklch(0.881 0.009 134.9);
}

Tailwind CSS v4

@theme {
  --color-misty-coast: #d5d9d3;
  --color-misty-coast-50: #f4f6f3;
  --color-misty-coast-100: #e6e8e6;
  --color-misty-coast-200: #d2d5d1;
  --color-misty-coast-300: #b5b8b4;
  --color-misty-coast-400: #9ca09a;
  --color-misty-coast-500: #848881;
  --color-misty-coast-600: #6f736e;
  --color-misty-coast-700: #595c58;
  --color-misty-coast-800: #414340;
  --color-misty-coast-900: #2d2e2c;
  --color-misty-coast-950: #1a1b19;
}

SCSS

$misty-coast: #d5d9d3;
$misty-coast-rgb: 213, 217, 211;
$misty-coast-light: mix(#fff, $misty-coast, 20%);
$misty-coast-dark: mix(#000, $misty-coast, 20%);

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