Ray of Light

CSS

:root {
  --ray-of-light: #fdf2c0;
  --ray-of-light-rgb: 253 242 192;
  --ray-of-light-oklch: oklch(0.958 0.065 97.1);
}

.element {
  color: var(--ray-of-light);
  background-color: hsl(49 94% 87%);
  border-color: oklch(0.958 0.065 97.1);
}

Tailwind CSS v4

@theme {
  --color-ray-of-light: #fdf2c0;
  --color-ray-of-light-50: #f9f6e1;
  --color-ray-of-light-100: #ede9d0;
  --color-ray-of-light-200: #dbd5b6;
  --color-ray-of-light-300: #bfb992;
  --color-ray-of-light-400: #a99f72;
  --color-ray-of-light-500: #928753;
  --color-ray-of-light-600: #7c7247;
  --color-ray-of-light-700: #635b38;
  --color-ray-of-light-800: #494228;
  --color-ray-of-light-900: #332e1a;
  --color-ray-of-light-950: #1f1a0b;
}

SCSS

$ray-of-light: #fdf2c0;
$ray-of-light-rgb: 253, 242, 192;
$ray-of-light-light: mix(#fff, $ray-of-light, 20%);
$ray-of-light-dark: mix(#000, $ray-of-light, 20%);

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