Dark Seagreen

CSS

:root {
  --dark-seagreen: #666655;
  --dark-seagreen-rgb: 102 102 85;
  --dark-seagreen-oklch: oklch(0.505 0.026 107.3);
}

.element {
  color: var(--dark-seagreen);
  background-color: hsl(60 9% 37%);
  border-color: oklch(0.505 0.026 107.3);
}

Tailwind CSS v4

@theme {
  --color-dark-seagreen: #666655;
  --color-dark-seagreen-50: #f5f6ed;
  --color-dark-seagreen-100: #e8e9df;
  --color-dark-seagreen-200: #d5d5c9;
  --color-dark-seagreen-300: #b8b9aa;
  --color-dark-seagreen-400: #a0a08e;
  --color-dark-seagreen-500: #888874;
  --color-dark-seagreen-600: #737362;
  --color-dark-seagreen-700: #5c5c4f;
  --color-dark-seagreen-800: #434339;
  --color-dark-seagreen-900: #2f2e27;
  --color-dark-seagreen-950: #1b1b15;
}

SCSS

$dark-seagreen: #666655;
$dark-seagreen-rgb: 102, 102, 85;
$dark-seagreen-light: mix(#fff, $dark-seagreen, 20%);
$dark-seagreen-dark: mix(#000, $dark-seagreen, 20%);

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