#2A3572

CSS

:root {
  --good-karma: #2a3572;
  --good-karma-rgb: 42 53 114;
  --good-karma-oklch: oklch(0.355 0.105 272.3);
}

.element {
  color: var(--good-karma);
  background-color: hsl(231 46% 31%);
  border-color: oklch(0.355 0.105 272.3);
}

Tailwind CSS v4

@theme {
  --color-good-karma: #2a3572;
  --color-good-karma-50: #ebf4ff;
  --color-good-karma-100: #dde6ff;
  --color-good-karma-200: #c6d2ff;
  --color-good-karma-300: #a7b4ee;
  --color-good-karma-400: #899add;
  --color-good-karma-500: #6e81cc;
  --color-good-karma-600: #5e6dac;
  --color-good-karma-700: #4b578a;
  --color-good-karma-800: #344067;
  --color-good-karma-900: #242c48;
  --color-good-karma-950: #13192f;
}

SCSS

$good-karma: #2a3572;
$good-karma-rgb: 42, 53, 114;
$good-karma-light: mix(#fff, $good-karma, 20%);
$good-karma-dark: mix(#000, $good-karma, 20%);

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