Cold Blooded

CSS

:root {
  --cold-blooded: #bbeeee;
  --cold-blooded-rgb: 187 238 238;
  --cold-blooded-oklch: oklch(0.914 0.052 196.3);
}

.element {
  color: var(--cold-blooded);
  background-color: hsl(180 60% 83%);
  border-color: oklch(0.914 0.052 196.3);
}

Tailwind CSS v4

@theme {
  --color-cold-blooded: #bbeeee;
  --color-cold-blooded-50: #e5fafa;
  --color-cold-blooded-100: #d5eeee;
  --color-cold-blooded-200: #bcdcdc;
  --color-cold-blooded-300: #99c0c1;
  --color-cold-blooded-400: #7aa8a9;
  --color-cold-blooded-500: #5b9192;
  --color-cold-blooded-600: #4e7b7b;
  --color-cold-blooded-700: #3e6263;
  --color-cold-blooded-800: #2c4848;
  --color-cold-blooded-900: #1e3232;
  --color-cold-blooded-950: #0e1e1e;
}

SCSS

$cold-blooded: #bbeeee;
$cold-blooded-rgb: 187, 238, 238;
$cold-blooded-light: mix(#fff, $cold-blooded, 20%);
$cold-blooded-dark: mix(#000, $cold-blooded, 20%);

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