Exodus Fruit

CSS

:root {
  --exodus-fruit: #6264dc;
  --exodus-fruit-rgb: 98 100 220;
  --exodus-fruit-oklch: oklch(0.566 0.179 278.3);
}

.element {
  color: var(--exodus-fruit);
  background-color: hsl(239 64% 62%);
  border-color: oklch(0.566 0.179 278.3);
}

Tailwind CSS v4

@theme {
  --color-exodus-fruit: #6264dc;
  --color-exodus-fruit-50: #ebf0ff;
  --color-exodus-fruit-100: #dce2ff;
  --color-exodus-fruit-200: #c5ccff;
  --color-exodus-fruit-300: #a6acff;
  --color-exodus-fruit-400: #8890ff;
  --color-exodus-fruit-500: #7072f9;
  --color-exodus-fruit-600: #5e61d2;
  --color-exodus-fruit-700: #4b4da9;
  --color-exodus-fruit-800: #34397f;
  --color-exodus-fruit-900: #23275a;
  --color-exodus-fruit-950: #13143d;
}

SCSS

$exodus-fruit: #6264dc;
$exodus-fruit-rgb: 98, 100, 220;
$exodus-fruit-light: mix(#fff, $exodus-fruit, 20%);
$exodus-fruit-dark: mix(#000, $exodus-fruit, 20%);

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