Cool Air of Debonair

CSS

:root {
  --cool-air-of-debonair: #28394d;
  --cool-air-of-debonair-rgb: 40 57 77;
  --cool-air-of-debonair-oklch: oklch(0.339 0.042 253);
}

.element {
  color: var(--cool-air-of-debonair);
  background-color: hsl(212 32% 23%);
  border-color: oklch(0.339 0.042 253);
}

Tailwind CSS v4

@theme {
  --color-cool-air-of-debonair: #28394d;
  --color-cool-air-of-debonair-50: #edf6ff;
  --color-cool-air-of-debonair-100: #dfe9f6;
  --color-cool-air-of-debonair-200: #c9d6e6;
  --color-cool-air-of-debonair-300: #a9b9cd;
  --color-cool-air-of-debonair-400: #8da0b7;
  --color-cool-air-of-debonair-500: #7388a2;
  --color-cool-air-of-debonair-600: #617389;
  --color-cool-air-of-debonair-700: #4e5c6e;
  --color-cool-air-of-debonair-800: #384451;
  --color-cool-air-of-debonair-900: #262f38;
  --color-cool-air-of-debonair-950: #141b23;
}

SCSS

$cool-air-of-debonair: #28394d;
$cool-air-of-debonair-rgb: 40, 57, 77;
$cool-air-of-debonair-light: mix(#fff, $cool-air-of-debonair, 20%);
$cool-air-of-debonair-dark: mix(#000, $cool-air-of-debonair, 20%);

.element {
  color: $cool-air-of-debonair;
  box-shadow: 0 0 0 2px rgba($cool-air-of-debonair, 0.35);
}