Salmon Orange

CSS

:root {
  --salmon-orange: #ff8c69;
  --salmon-orange-rgb: 255 140 105;
  --salmon-orange-oklch: oklch(0.758 0.148 37.7);
}

.element {
  color: var(--salmon-orange);
  background-color: hsl(14 100% 71%);
  border-color: oklch(0.758 0.148 37.7);
}

Tailwind CSS v4

@theme {
  --color-salmon-orange: #ff8c69;
  --color-salmon-orange-50: #ffe8d6;
  --color-salmon-orange-100: #ffd8c3;
  --color-salmon-orange-200: #ffbfa5;
  --color-salmon-orange-300: #f89c7d;
  --color-salmon-orange-400: #e77c5b;
  --color-salmon-orange-500: #d55b35;
  --color-salmon-orange-600: #b44e2e;
  --color-salmon-orange-700: #913e25;
  --color-salmon-orange-800: #6c2c1b;
  --color-salmon-orange-900: #4c1e11;
  --color-salmon-orange-950: #320d04;
}

SCSS

$salmon-orange: #ff8c69;
$salmon-orange-rgb: 255, 140, 105;
$salmon-orange-light: mix(#fff, $salmon-orange, 20%);
$salmon-orange-dark: mix(#000, $salmon-orange, 20%);

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