Everglade Deck

CSS

:root {
  --everglade-deck: #25464d;
  --everglade-deck-rgb: 37 70 77;
  --everglade-deck-oklch: oklch(0.372 0.04 212.9);
}

.element {
  color: var(--everglade-deck);
  background-color: hsl(191 35% 22%);
  border-color: oklch(0.372 0.04 212.9);
}

Tailwind CSS v4

@theme {
  --color-everglade-deck: #25464d;
  --color-everglade-deck-50: #e9f8fc;
  --color-everglade-deck-100: #daecf0;
  --color-everglade-deck-200: #c2d9df;
  --color-everglade-deck-300: #a1bdc4;
  --color-everglade-deck-400: #84a5ad;
  --color-everglade-deck-500: #678e96;
  --color-everglade-deck-600: #58787f;
  --color-everglade-deck-700: #466066;
  --color-everglade-deck-800: #32464a;
  --color-everglade-deck-900: #223134;
  --color-everglade-deck-950: #111d1f;
}

SCSS

$everglade-deck: #25464d;
$everglade-deck-rgb: 37, 70, 77;
$everglade-deck-light: mix(#fff, $everglade-deck, 20%);
$everglade-deck-dark: mix(#000, $everglade-deck, 20%);

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