#503E2B

CSS

:root {
  --turtle: #503e2b;
  --turtle-rgb: 80 62 43;
  --turtle-oklch: oklch(0.378 0.039 67.7);
}

.element {
  color: var(--turtle);
  background-color: hsl(31 30% 24%);
  border-color: oklch(0.378 0.039 67.7);
}

Tailwind CSS v4

@theme {
  --color-turtle: #503e2b;
  --color-turtle-50: #fdf3e9;
  --color-turtle-100: #f1e6da;
  --color-turtle-200: #e0d2c3;
  --color-turtle-300: #c5b4a2;
  --color-turtle-400: #af9b86;
  --color-turtle-500: #98826b;
  --color-turtle-600: #816e5a;
  --color-turtle-700: #675848;
  --color-turtle-800: #4c4034;
  --color-turtle-900: #352c24;
  --color-turtle-950: #201912;
}

SCSS

$turtle: #503e2b;
$turtle-rgb: 80, 62, 43;
$turtle-light: mix(#fff, $turtle, 20%);
$turtle-dark: mix(#000, $turtle, 20%);

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