Black Rock

CSS

:root {
  --black-rock: #2c2d3c;
  --black-rock-rgb: 44 45 60;
  --black-rock-oklch: oklch(0.303 0.027 281.7);
}

.element {
  color: var(--black-rock);
  background-color: hsl(236 15% 20%);
  border-color: oklch(0.303 0.027 281.7);
}

Tailwind CSS v4

@theme {
  --color-black-rock: #2c2d3c;
  --color-black-rock-50: #f4f4fd;
  --color-black-rock-100: #e6e7f1;
  --color-black-rock-200: #d2d3e0;
  --color-black-rock-300: #b5b6c5;
  --color-black-rock-400: #9b9daf;
  --color-black-rock-500: #838498;
  --color-black-rock-600: #6f7081;
  --color-black-rock-700: #585a67;
  --color-black-rock-800: #40424c;
  --color-black-rock-900: #2c2d35;
  --color-black-rock-950: #191a20;
}

SCSS

$black-rock: #2c2d3c;
$black-rock-rgb: 44, 45, 60;
$black-rock-light: mix(#fff, $black-rock, 20%);
$black-rock-dark: mix(#000, $black-rock, 20%);

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