Isle of Pines

CSS

:root {
  --isle-of-pines: #3e6655;
  --isle-of-pines-rgb: 62 102 85;
  --isle-of-pines-oklch: oklch(0.475 0.053 165.5);
}

.element {
  color: var(--isle-of-pines);
  background-color: hsl(154 24% 32%);
  border-color: oklch(0.475 0.053 165.5);
}

Tailwind CSS v4

@theme {
  --color-isle-of-pines: #3e6655;
  --color-isle-of-pines-50: #e7faf2;
  --color-isle-of-pines-100: #d8eee4;
  --color-isle-of-pines-200: #bfdcd0;
  --color-isle-of-pines-300: #9ec1b2;
  --color-isle-of-pines-400: #81a997;
  --color-isle-of-pines-500: #64927e;
  --color-isle-of-pines-600: #557b6a;
  --color-isle-of-pines-700: #446355;
  --color-isle-of-pines-800: #31483d;
  --color-isle-of-pines-900: #21322a;
  --color-isle-of-pines-950: #111e18;
}

SCSS

$isle-of-pines: #3e6655;
$isle-of-pines-rgb: 62, 102, 85;
$isle-of-pines-light: mix(#fff, $isle-of-pines, 20%);
$isle-of-pines-dark: mix(#000, $isle-of-pines, 20%);

.element {
  color: $isle-of-pines;
  box-shadow: 0 0 0 2px rgba($isle-of-pines, 0.35);
}