Orange Roughy

CSS

:root {
  --orange-roughy: #a85335;
  --orange-roughy-rgb: 168 83 53;
  --orange-roughy-oklch: oklch(0.541 0.12 39.7);
}

.element {
  color: var(--orange-roughy);
  background-color: hsl(16 52% 43%);
  border-color: oklch(0.541 0.12 39.7);
}

Tailwind CSS v4

@theme {
  --color-orange-roughy: #a85335;
  --color-orange-roughy-50: #ffebdb;
  --color-orange-roughy-100: #ffdcc9;
  --color-orange-roughy-200: #ffc4ac;
  --color-orange-roughy-300: #eca387;
  --color-orange-roughy-400: #db8567;
  --color-orange-roughy-500: #c86745;
  --color-orange-roughy-600: #a9583b;
  --color-orange-roughy-700: #87462f;
  --color-orange-roughy-800: #653222;
  --color-orange-roughy-900: #472217;
  --color-orange-roughy-950: #2e1108;
}

SCSS

$orange-roughy: #a85335;
$orange-roughy-rgb: 168, 83, 53;
$orange-roughy-light: mix(#fff, $orange-roughy, 20%);
$orange-roughy-dark: mix(#000, $orange-roughy, 20%);

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