Smell of Lavender

CSS

:root {
  --smell-of-lavender: #dce0ea;
  --smell-of-lavender-rgb: 220 224 234;
  --smell-of-lavender-oklch: oklch(0.907 0.014 268.5);
}

.element {
  color: var(--smell-of-lavender);
  background-color: hsl(223 25% 89%);
  border-color: oklch(0.907 0.014 268.5);
}

Tailwind CSS v4

@theme {
  --color-smell-of-lavender: #dce0ea;
  --color-smell-of-lavender-50: #f3f5f9;
  --color-smell-of-lavender-100: #e6e8ed;
  --color-smell-of-lavender-200: #d2d4da;
  --color-smell-of-lavender-300: #b4b7bf;
  --color-smell-of-lavender-400: #9b9ea7;
  --color-smell-of-lavender-500: #828690;
  --color-smell-of-lavender-600: #6e717a;
  --color-smell-of-lavender-700: #585b61;
  --color-smell-of-lavender-800: #404247;
  --color-smell-of-lavender-900: #2c2e31;
  --color-smell-of-lavender-950: #191b1d;
}

SCSS

$smell-of-lavender: #dce0ea;
$smell-of-lavender-rgb: 220, 224, 234;
$smell-of-lavender-light: mix(#fff, $smell-of-lavender, 20%);
$smell-of-lavender-dark: mix(#000, $smell-of-lavender, 20%);

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