Sea Sprite

CSS

:root {
  --sea-sprite: #b7ccc7;
  --sea-sprite-rgb: 183 204 199;
  --sea-sprite-oklch: oklch(0.828 0.024 179.8);
}

.element {
  color: var(--sea-sprite);
  background-color: hsl(166 17% 76%);
  border-color: oklch(0.828 0.024 179.8);
}

Tailwind CSS v4

@theme {
  --color-sea-sprite: #b7ccc7;
  --color-sea-sprite-50: #eef7f5;
  --color-sea-sprite-100: #e0ebe8;
  --color-sea-sprite-200: #cad8d5;
  --color-sea-sprite-300: #abbcb8;
  --color-sea-sprite-400: #90a39f;
  --color-sea-sprite-500: #768c87;
  --color-sea-sprite-600: #647672;
  --color-sea-sprite-700: #505e5b;
  --color-sea-sprite-800: #3a4542;
  --color-sea-sprite-900: #28302e;
  --color-sea-sprite-950: #161c1b;
}

SCSS

$sea-sprite: #b7ccc7;
$sea-sprite-rgb: 183, 204, 199;
$sea-sprite-light: mix(#fff, $sea-sprite, 20%);
$sea-sprite-dark: mix(#000, $sea-sprite, 20%);

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