Greek Aubergine

CSS

:root {
  --greek-aubergine: #3d0734;
  --greek-aubergine-rgb: 61 7 52;
  --greek-aubergine-oklch: oklch(0.254 0.099 336);
}

.element {
  color: var(--greek-aubergine);
  background-color: hsl(310 79% 13%);
  border-color: oklch(0.254 0.099 336);
}

Tailwind CSS v4

@theme {
  --color-greek-aubergine: #3d0734;
  --color-greek-aubergine-50: #ffebff;
  --color-greek-aubergine-100: #ffdcf4;
  --color-greek-aubergine-200: #f1c5e3;
  --color-greek-aubergine-300: #d9a4c9;
  --color-greek-aubergine-400: #c488b5;
  --color-greek-aubergine-500: #af6c9f;
  --color-greek-aubergine-600: #945c86;
  --color-greek-aubergine-700: #77496c;
  --color-greek-aubergine-800: #573550;
  --color-greek-aubergine-900: #3d2438;
  --color-greek-aubergine-950: #261323;
}

SCSS

$greek-aubergine: #3d0734;
$greek-aubergine-rgb: 61, 7, 52;
$greek-aubergine-light: mix(#fff, $greek-aubergine, 20%);
$greek-aubergine-dark: mix(#000, $greek-aubergine, 20%);

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