Bright Greek

CSS

:root {
  --bright-greek: #3844f4;
  --bright-greek-rgb: 56 68 244;
  --bright-greek-oklch: oklch(0.509 0.255 270.3);
}

.element {
  color: var(--bright-greek);
  background-color: hsl(236 90% 59%);
  border-color: oklch(0.509 0.255 270.3);
}

Tailwind CSS v4

@theme {
  --color-bright-greek: #3844f4;
  --color-bright-greek-50: #dcf1ff;
  --color-bright-greek-100: #cae3ff;
  --color-bright-greek-200: #afcbff;
  --color-bright-greek-300: #8ca9ff;
  --color-bright-greek-400: #688aff;
  --color-bright-greek-500: #4e65ff;
  --color-bright-greek-600: #4257fc;
  --color-bright-greek-700: #3446cb;
  --color-bright-greek-800: #1f3399;
  --color-bright-greek-900: #14236c;
  --color-bright-greek-950: #08104c;
}

SCSS

$bright-greek: #3844f4;
$bright-greek-rgb: 56, 68, 244;
$bright-greek-light: mix(#fff, $bright-greek, 20%);
$bright-greek-dark: mix(#000, $bright-greek, 20%);

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