New Car

CSS

:root {
  --new-car: #214fc6;
  --new-car-rgb: 33 79 198;
  --new-car-oklch: oklch(0.475 0.192 264.2);
}

.element {
  color: var(--new-car);
  background-color: hsl(223 71% 45%);
  border-color: oklch(0.475 0.192 264.2);
}

Tailwind CSS v4

@theme {
  --color-new-car: #214fc6;
  --color-new-car-50: #dcf5ff;
  --color-new-car-100: #cae7ff;
  --color-new-car-200: #aed2ff;
  --color-new-car-300: #89b3ff;
  --color-new-car-400: #6398ff;
  --color-new-car-500: #427bff;
  --color-new-car-600: #3968da;
  --color-new-car-700: #2d54b0;
  --color-new-car-800: #1a3e84;
  --color-new-car-900: #112a5d;
  --color-new-car-950: #041740;
}

SCSS

$new-car: #214fc6;
$new-car-rgb: 33, 79, 198;
$new-car-light: mix(#fff, $new-car, 20%);
$new-car-dark: mix(#000, $new-car, 20%);

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