Fields of Provence

CSS

:root {
  --fields-of-provence: #a491a7;
  --fields-of-provence-rgb: 164 145 167;
  --fields-of-provence-oklch: oklch(0.681 0.039 321.6);
}

.element {
  color: var(--fields-of-provence);
  background-color: hsl(292 11% 61%);
  border-color: oklch(0.681 0.039 321.6);
}

Tailwind CSS v4

@theme {
  --color-fields-of-provence: #a491a7;
  --color-fields-of-provence-50: #fbf2fc;
  --color-fields-of-provence-100: #efe4ef;
  --color-fields-of-provence-200: #ddcfde;
  --color-fields-of-provence-300: #c2b1c3;
  --color-fields-of-provence-400: #a997ac;
  --color-fields-of-provence-500: #937e96;
  --color-fields-of-provence-600: #7c6b7f;
  --color-fields-of-provence-700: #635565;
  --color-fields-of-provence-800: #483e4b;
  --color-fields-of-provence-900: #322b34;
  --color-fields-of-provence-950: #1e181f;
}

SCSS

$fields-of-provence: #a491a7;
$fields-of-provence-rgb: 164, 145, 167;
$fields-of-provence-light: mix(#fff, $fields-of-provence, 20%);
$fields-of-provence-dark: mix(#000, $fields-of-provence, 20%);

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