Lido Deck

CSS

:root {
  --lido-deck: #019294;
  --lido-deck-rgb: 1 146 148;
  --lido-deck-oklch: oklch(0.598 0.102 196.5);
}

.element {
  color: var(--lido-deck);
  background-color: hsl(181 99% 29%);
  border-color: oklch(0.598 0.102 196.5);
}

Tailwind CSS v4

@theme {
  --color-lido-deck: #019294;
  --color-lido-deck-50: #d4ffff;
  --color-lido-deck-100: #c1f3f4;
  --color-lido-deck-200: #a0e2e4;
  --color-lido-deck-300: #74c8cb;
  --color-lido-deck-400: #46b1b2;
  --color-lido-deck-500: #009a9d;
  --color-lido-deck-600: #008284;
  --color-lido-deck-700: #00696a;
  --color-lido-deck-800: #004d4d;
  --color-lido-deck-900: #013635;
  --color-lido-deck-950: #002121;
}

SCSS

$lido-deck: #019294;
$lido-deck-rgb: 1, 146, 148;
$lido-deck-light: mix(#fff, $lido-deck, 20%);
$lido-deck-dark: mix(#000, $lido-deck, 20%);

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