Clock Chimes Thirteen

CSS

:root {
  --clock-chimes-thirteen: #002211;
  --clock-chimes-thirteen-rgb: 0 34 17;
  --clock-chimes-thirteen-oklch: oklch(0.222 0.052 157.5);
}

.element {
  color: var(--clock-chimes-thirteen);
  background-color: hsl(150 100% 7%);
  border-color: oklch(0.222 0.052 157.5);
}

Tailwind CSS v4

@theme {
  --color-clock-chimes-thirteen: #002211;
  --color-clock-chimes-thirteen-50: #e9faf0;
  --color-clock-chimes-thirteen-100: #daeee2;
  --color-clock-chimes-thirteen-200: #c2dccc;
  --color-clock-chimes-thirteen-300: #a1c0ae;
  --color-clock-chimes-thirteen-400: #85a892;
  --color-clock-chimes-thirteen-500: #699179;
  --color-clock-chimes-thirteen-600: #597b66;
  --color-clock-chimes-thirteen-700: #476252;
  --color-clock-chimes-thirteen-800: #34483b;
  --color-clock-chimes-thirteen-900: #233228;
  --color-clock-chimes-thirteen-950: #121e16;
}

SCSS

$clock-chimes-thirteen: #002211;
$clock-chimes-thirteen-rgb: 0, 34, 17;
$clock-chimes-thirteen-light: mix(#fff, $clock-chimes-thirteen, 20%);
$clock-chimes-thirteen-dark: mix(#000, $clock-chimes-thirteen, 20%);

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