Is It Cold

CSS

:root {
  --is-it-cold: #0022ff;
  --is-it-cold-rgb: 0 34 255;
  --is-it-cold-oklch: oklch(0.468 0.302 264.2);
}

.element {
  color: var(--is-it-cold);
  background-color: hsl(232 100% 50%);
  border-color: oklch(0.468 0.302 264.2);
}

Tailwind CSS v4

@theme {
  --color-is-it-cold: #0022ff;
  --color-is-it-cold-50: #cdf3ff;
  --color-is-it-cold-100: #b9e5ff;
  --color-is-it-cold-200: #98cdff;
  --color-is-it-cold-300: #6faaff;
  --color-is-it-cold-400: #3d88ff;
  --color-is-it-cold-500: #145dff;
  --color-is-it-cold-600: #1251ff;
  --color-is-it-cold-700: #0e41df;
  --color-is-it-cold-800: #0030a8;
  --color-is-it-cold-900: #002177;
  --color-is-it-cold-950: #000d54;
}

SCSS

$is-it-cold: #0022ff;
$is-it-cold-rgb: 0, 34, 255;
$is-it-cold-light: mix(#fff, $is-it-cold, 20%);
$is-it-cold-dark: mix(#000, $is-it-cold, 20%);

.element {
  color: $is-it-cold;
  box-shadow: 0 0 0 2px rgba($is-it-cold, 0.35);
}