Tom Thumb

CSS

:root {
  --tom-thumb: #4f6348;
  --tom-thumb-rgb: 79 99 72;
  --tom-thumb-oklch: oklch(0.475 0.049 137.7);
}

.element {
  color: var(--tom-thumb);
  background-color: hsl(104 16% 34%);
  border-color: oklch(0.475 0.049 137.7);
}

Tailwind CSS v4

@theme {
  --color-tom-thumb: #4f6348;
  --color-tom-thumb-50: #eef9ec;
  --color-tom-thumb-100: #e0ecdd;
  --color-tom-thumb-200: #cadac6;
  --color-tom-thumb-300: #abbea6;
  --color-tom-thumb-400: #91a68a;
  --color-tom-thumb-500: #778e6f;
  --color-tom-thumb-600: #65785e;
  --color-tom-thumb-700: #50604b;
  --color-tom-thumb-800: #3b4636;
  --color-tom-thumb-900: #283124;
  --color-tom-thumb-950: #161d13;
}

SCSS

$tom-thumb: #4f6348;
$tom-thumb-rgb: 79, 99, 72;
$tom-thumb-light: mix(#fff, $tom-thumb, 20%);
$tom-thumb-dark: mix(#000, $tom-thumb, 20%);

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