Mango Mojito

CSS

:root {
  --mango-mojito: #d1a229;
  --mango-mojito-rgb: 209 162 41;
  --mango-mojito-oklch: oklch(0.736 0.139 85.6);
}

.element {
  color: var(--mango-mojito);
  background-color: hsl(43 67% 49%);
  border-color: oklch(0.736 0.139 85.6);
}

Tailwind CSS v4

@theme {
  --color-mango-mojito: #d1a229;
  --color-mango-mojito-50: #fff4c8;
  --color-mango-mojito-100: #fce6b3;
  --color-mango-mojito-200: #edd18e;
  --color-mango-mojito-300: #d5b35e;
  --color-mango-mojito-400: #c39726;
  --color-mango-mojito-500: #af7c00;
  --color-mango-mojito-600: #946a00;
  --color-mango-mojito-700: #775400;
  --color-mango-mojito-800: #593d00;
  --color-mango-mojito-900: #3e2a00;
  --color-mango-mojito-950: #271700;
}

SCSS

$mango-mojito: #d1a229;
$mango-mojito-rgb: 209, 162, 41;
$mango-mojito-light: mix(#fff, $mango-mojito, 20%);
$mango-mojito-dark: mix(#000, $mango-mojito, 20%);

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