Wells of Wonder

CSS

:root {
  --wells-of-wonder: #26ad8d;
  --wells-of-wonder-rgb: 38 173 141;
  --wells-of-wonder-oklch: oklch(0.67 0.121 172.2);
}

.element {
  color: var(--wells-of-wonder);
  background-color: hsl(166 64% 41%);
  border-color: oklch(0.67 0.121 172.2);
}

Tailwind CSS v4

@theme {
  --color-wells-of-wonder: #26ad8d;
  --color-wells-of-wonder-50: #d2fff3;
  --color-wells-of-wonder-100: #bff6e5;
  --color-wells-of-wonder-200: #9de6d0;
  --color-wells-of-wonder-300: #6fccb3;
  --color-wells-of-wonder-400: #3fb596;
  --color-wells-of-wonder-500: #009f7d;
  --color-wells-of-wonder-600: #00876a;
  --color-wells-of-wonder-700: #006c55;
  --color-wells-of-wonder-800: #004f3c;
  --color-wells-of-wonder-900: #003729;
  --color-wells-of-wonder-950: #002217;
}

SCSS

$wells-of-wonder: #26ad8d;
$wells-of-wonder-rgb: 38, 173, 141;
$wells-of-wonder-light: mix(#fff, $wells-of-wonder, 20%);
$wells-of-wonder-dark: mix(#000, $wells-of-wonder, 20%);

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