Highlighter Orange

CSS

:root {
  --highlighter-orange: #f39539;
  --highlighter-orange-rgb: 243 149 57;
  --highlighter-orange-oklch: oklch(0.752 0.152 60.6);
}

.element {
  color: var(--highlighter-orange);
  background-color: hsl(30 89% 59%);
  border-color: oklch(0.752 0.152 60.6);
}

Tailwind CSS v4

@theme {
  --color-highlighter-orange: #f39539;
  --color-highlighter-orange-50: #ffecc9;
  --color-highlighter-orange-100: #ffddb4;
  --color-highlighter-orange-200: #ffc690;
  --color-highlighter-orange-300: #eea560;
  --color-highlighter-orange-400: #de862f;
  --color-highlighter-orange-500: #cc6800;
  --color-highlighter-orange-600: #ac5800;
  --color-highlighter-orange-700: #8a4700;
  --color-highlighter-orange-800: #683200;
  --color-highlighter-orange-900: #492200;
  --color-highlighter-orange-950: #2f1100;
}

SCSS

$highlighter-orange: #f39539;
$highlighter-orange-rgb: 243, 149, 57;
$highlighter-orange-light: mix(#fff, $highlighter-orange, 20%);
$highlighter-orange-dark: mix(#000, $highlighter-orange, 20%);

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