Turtle Chalk

CSS

:root {
  --turtle-chalk: #ced8c1;
  --turtle-chalk-rgb: 206 216 193;
  --turtle-chalk-oklch: oklch(0.868 0.033 126.3);
}

.element {
  color: var(--turtle-chalk);
  background-color: hsl(86 23% 80%);
  border-color: oklch(0.868 0.033 126.3);
}

Tailwind CSS v4

@theme {
  --color-turtle-chalk: #ced8c1;
  --color-turtle-chalk-50: #f2f7ed;
  --color-turtle-chalk-100: #e4eadf;
  --color-turtle-chalk-200: #d0d7c8;
  --color-turtle-chalk-300: #b2bba9;
  --color-turtle-chalk-400: #99a28e;
  --color-turtle-chalk-500: #808a73;
  --color-turtle-chalk-600: #6d7562;
  --color-turtle-chalk-700: #575e4e;
  --color-turtle-chalk-800: #404438;
  --color-turtle-chalk-900: #2c2f26;
  --color-turtle-chalk-950: #191c15;
}

SCSS

$turtle-chalk: #ced8c1;
$turtle-chalk-rgb: 206, 216, 193;
$turtle-chalk-light: mix(#fff, $turtle-chalk, 20%);
$turtle-chalk-dark: mix(#000, $turtle-chalk, 20%);

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