Pico Orange

CSS

:root {
  --pico-orange: #ffa300;
  --pico-orange-rgb: 255 163 0;
  --pico-orange-oklch: oklch(0.789 0.171 69.6);
}

.element {
  color: var(--pico-orange);
  background-color: hsl(38 100% 50%);
  border-color: oklch(0.789 0.171 69.6);
}

Tailwind CSS v4

@theme {
  --color-pico-orange: #ffa300;
  --color-pico-orange-50: #ffeec0;
  --color-pico-orange-100: #ffdfa9;
  --color-pico-orange-200: #ffc880;
  --color-pico-orange-300: #eda748;
  --color-pico-orange-400: #dd8800;
  --color-pico-orange-500: #cb6a00;
  --color-pico-orange-600: #ab5a00;
  --color-pico-orange-700: #8a4800;
  --color-pico-orange-800: #683300;
  --color-pico-orange-900: #492300;
  --color-pico-orange-950: #2f1100;
}

SCSS

$pico-orange: #ffa300;
$pico-orange-rgb: 255, 163, 0;
$pico-orange-light: mix(#fff, $pico-orange, 20%);
$pico-orange-dark: mix(#000, $pico-orange, 20%);

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