The Rainbow Fish

CSS

:root {
  --the-rainbow-fish: #4466ee;
  --the-rainbow-fish-rgb: 68 102 238;
  --the-rainbow-fish-oklch: oklch(0.565 0.208 268.3);
}

.element {
  color: var(--the-rainbow-fish);
  background-color: hsl(228 83% 60%);
  border-color: oklch(0.565 0.208 268.3);
}

Tailwind CSS v4

@theme {
  --color-the-rainbow-fish: #4466ee;
  --color-the-rainbow-fish-50: #def3ff;
  --color-the-rainbow-fish-100: #cde5ff;
  --color-the-rainbow-fish-200: #b2cfff;
  --color-the-rainbow-fish-300: #8fafff;
  --color-the-rainbow-fish-400: #6b93ff;
  --color-the-rainbow-fish-500: #4e74ff;
  --color-the-rainbow-fish-600: #4263e3;
  --color-the-rainbow-fish-700: #344fb7;
  --color-the-rainbow-fish-800: #213a89;
  --color-the-rainbow-fish-900: #152861;
  --color-the-rainbow-fish-950: #081543;
}

SCSS

$the-rainbow-fish: #4466ee;
$the-rainbow-fish-rgb: 68, 102, 238;
$the-rainbow-fish-light: mix(#fff, $the-rainbow-fish, 20%);
$the-rainbow-fish-dark: mix(#000, $the-rainbow-fish, 20%);

.element {
  color: $the-rainbow-fish;
  box-shadow: 0 0 0 2px rgba($the-rainbow-fish, 0.35);
}