Fields of Heather

CSS

:root {
  --fields-of-heather: #98a1cf;
  --fields-of-heather-rgb: 152 161 207;
  --fields-of-heather-oklch: oklch(0.718 0.068 275.9);
}

.element {
  color: var(--fields-of-heather);
  background-color: hsl(230 36% 70%);
  border-color: oklch(0.718 0.068 275.9);
}

Tailwind CSS v4

@theme {
  --color-fields-of-heather: #98a1cf;
  --color-fields-of-heather-50: #f0f4ff;
  --color-fields-of-heather-100: #e2e6ff;
  --color-fields-of-heather-200: #cdd2f2;
  --color-fields-of-heather-300: #afb5db;
  --color-fields-of-heather-400: #939cc7;
  --color-fields-of-heather-500: #7a83b3;
  --color-fields-of-heather-600: #676f97;
  --color-fields-of-heather-700: #525879;
  --color-fields-of-heather-800: #3b415a;
  --color-fields-of-heather-900: #282d3f;
  --color-fields-of-heather-950: #161a28;
}

SCSS

$fields-of-heather: #98a1cf;
$fields-of-heather-rgb: 152, 161, 207;
$fields-of-heather-light: mix(#fff, $fields-of-heather, 20%);
$fields-of-heather-dark: mix(#000, $fields-of-heather, 20%);

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