Cloudy Carrot

CSS

:root {
  --cloudy-carrot: #ffa812;
  --cloudy-carrot-rgb: 255 168 18;
  --cloudy-carrot-oklch: oklch(0.798 0.168 71.6);
}

.element {
  color: var(--cloudy-carrot);
  background-color: hsl(38 100% 54%);
  border-color: oklch(0.798 0.168 71.6);
}

Tailwind CSS v4

@theme {
  --color-cloudy-carrot: #ffa812;
  --color-cloudy-carrot-50: #ffefc0;
  --color-cloudy-carrot-100: #ffe0a9;
  --color-cloudy-carrot-200: #ffc981;
  --color-cloudy-carrot-300: #eba949;
  --color-cloudy-carrot-400: #db8a00;
  --color-cloudy-carrot-500: #c86c00;
  --color-cloudy-carrot-600: #a95c00;
  --color-cloudy-carrot-700: #884a00;
  --color-cloudy-carrot-800: #663400;
  --color-cloudy-carrot-900: #482400;
  --color-cloudy-carrot-950: #2f1200;
}

SCSS

$cloudy-carrot: #ffa812;
$cloudy-carrot-rgb: 255, 168, 18;
$cloudy-carrot-light: mix(#fff, $cloudy-carrot, 20%);
$cloudy-carrot-dark: mix(#000, $cloudy-carrot, 20%);

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