Native Hue of Resolution

CSS

:root {
  --native-hue-of-resolution: #d33300;
  --native-hue-of-resolution-rgb: 211 51 0;
  --native-hue-of-resolution-oklch: oklch(0.568 0.202 34.5);
}

.element {
  color: var(--native-hue-of-resolution);
  background-color: hsl(15 100% 41%);
  border-color: oklch(0.568 0.202 34.5);
}

Tailwind CSS v4

@theme {
  --color-native-hue-of-resolution: #d33300;
  --color-native-hue-of-resolution-50: #ffe2cd;
  --color-native-hue-of-resolution-100: #ffd0b9;
  --color-native-hue-of-resolution-200: #ffb497;
  --color-native-hue-of-resolution-300: #ff8e6a;
  --color-native-hue-of-resolution-400: #fe6744;
  --color-native-hue-of-resolution-500: #ee3900;
  --color-native-hue-of-resolution-600: #c93307;
  --color-native-hue-of-resolution-700: #a12908;
  --color-native-hue-of-resolution-800: #791b09;
  --color-native-hue-of-resolution-900: #561206;
  --color-native-hue-of-resolution-950: #390300;
}

SCSS

$native-hue-of-resolution: #d33300;
$native-hue-of-resolution-rgb: 211, 51, 0;
$native-hue-of-resolution-light: mix(#fff, $native-hue-of-resolution, 20%);
$native-hue-of-resolution-dark: mix(#000, $native-hue-of-resolution, 20%);

.element {
  color: $native-hue-of-resolution;
  box-shadow: 0 0 0 2px rgba($native-hue-of-resolution, 0.35);
}