Rare Wind

CSS

:root {
  --rare-wind: #55ffcc;
  --rare-wind-rgb: 85 255 204;
  --rare-wind-oklch: oklch(0.9 0.157 168.9);
}

.element {
  color: var(--rare-wind);
  background-color: hsl(162 100% 67%);
  border-color: oklch(0.9 0.157 168.9);
}

Tailwind CSS v4

@theme {
  --color-rare-wind: #55ffcc;
  --color-rare-wind-50: #c9ffef;
  --color-rare-wind-100: #b2fae1;
  --color-rare-wind-200: #8beacb;
  --color-rare-wind-300: #51d1ad;
  --color-rare-wind-400: #00bb8e;
  --color-rare-wind-500: #00a574;
  --color-rare-wind-600: #008c62;
  --color-rare-wind-700: #00704e;
  --color-rare-wind-800: #005336;
  --color-rare-wind-900: #003a25;
  --color-rare-wind-950: #002414;
}

SCSS

$rare-wind: #55ffcc;
$rare-wind-rgb: 85, 255, 204;
$rare-wind-light: mix(#fff, $rare-wind, 20%);
$rare-wind-dark: mix(#000, $rare-wind, 20%);

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