Mango Creamsicles

CSS

:root {
  --mango-creamsicles: #ffb769;
  --mango-creamsicles-rgb: 255 183 105;
  --mango-creamsicles-oklch: oklch(0.832 0.126 66.7);
}

.element {
  color: var(--mango-creamsicles);
  background-color: hsl(31 100% 71%);
  border-color: oklch(0.832 0.126 66.7);
}

Tailwind CSS v4

@theme {
  --color-mango-creamsicles: #ffb769;
  --color-mango-creamsicles-50: #ffefcf;
  --color-mango-creamsicles-100: #ffe1bb;
  --color-mango-creamsicles-200: #f8cb9a;
  --color-mango-creamsicles-300: #e2ab6e;
  --color-mango-creamsicles-400: #d08e44;
  --color-mango-creamsicles-500: #bd7200;
  --color-mango-creamsicles-600: #9f6105;
  --color-mango-creamsicles-700: #804e07;
  --color-mango-creamsicles-800: #603805;
  --color-mango-creamsicles-900: #432604;
  --color-mango-creamsicles-950: #2b1400;
}

SCSS

$mango-creamsicles: #ffb769;
$mango-creamsicles-rgb: 255, 183, 105;
$mango-creamsicles-light: mix(#fff, $mango-creamsicles, 20%);
$mango-creamsicles-dark: mix(#000, $mango-creamsicles, 20%);

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