Apollo

CSS

:root {
  --apollo: #c8c4c2;
  --apollo-rgb: 200 196 194;
  --apollo-oklch: oklch(0.823 0.005 48.7);
}

.element {
  color: var(--apollo);
  background-color: hsl(20 5% 77%);
  border-color: oklch(0.823 0.005 48.7);
}

Tailwind CSS v4

@theme {
  --color-apollo: #c8c4c2;
  --color-apollo-50: #f6f5f4;
  --color-apollo-100: #e9e7e6;
  --color-apollo-200: #d6d3d2;
  --color-apollo-300: #bab7b5;
  --color-apollo-400: #a19d9c;
  --color-apollo-500: #898583;
  --color-apollo-600: #74716f;
  --color-apollo-700: #5d5a59;
  --color-apollo-800: #444241;
  --color-apollo-900: #2f2d2d;
  --color-apollo-950: #1b1a1a;
}

SCSS

$apollo: #c8c4c2;
$apollo-rgb: 200, 196, 194;
$apollo-light: mix(#fff, $apollo, 20%);
$apollo-dark: mix(#000, $apollo, 20%);

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