Dark Energy

CSS

:root {
  --dark-energy: #503d4d;
  --dark-energy-rgb: 80 61 77;
  --dark-energy-oklch: oklch(0.387 0.037 331.7);
}

.element {
  color: var(--dark-energy);
  background-color: hsl(309 13% 28%);
  border-color: oklch(0.387 0.037 331.7);
}

Tailwind CSS v4

@theme {
  --color-dark-energy: #503d4d;
  --color-dark-energy-50: #fcf1fa;
  --color-dark-energy-100: #f0e4ed;
  --color-dark-energy-200: #dfcfdb;
  --color-dark-energy-300: #c4b1bf;
  --color-dark-energy-400: #ac97a8;
  --color-dark-energy-500: #957e91;
  --color-dark-energy-600: #7e6a7b;
  --color-dark-energy-700: #655562;
  --color-dark-energy-800: #4a3e49;
  --color-dark-energy-900: #332b32;
  --color-dark-energy-950: #1f181e;
}

SCSS

$dark-energy: #503d4d;
$dark-energy-rgb: 80, 61, 77;
$dark-energy-light: mix(#fff, $dark-energy, 20%);
$dark-energy-dark: mix(#000, $dark-energy, 20%);

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