Destined for Greatness

CSS

:root {
  --destined-for-greatness: #feddb1;
  --destined-for-greatness-rgb: 254 221 177;
  --destined-for-greatness-oklch: oklch(0.914 0.068 74.7);
}

.element {
  color: var(--destined-for-greatness);
  background-color: hsl(34 97% 85%);
  border-color: oklch(0.914 0.068 74.7);
}

Tailwind CSS v4

@theme {
  --color-destined-for-greatness: #feddb1;
  --color-destined-for-greatness-50: #fff3e0;
  --color-destined-for-greatness-100: #f5e5cf;
  --color-destined-for-greatness-200: #e5d1b5;
  --color-destined-for-greatness-300: #cbb391;
  --color-destined-for-greatness-400: #b69971;
  --color-destined-for-greatness-500: #a18052;
  --color-destined-for-greatness-600: #886c46;
  --color-destined-for-greatness-700: #6d5638;
  --color-destined-for-greatness-800: #513f27;
  --color-destined-for-greatness-900: #382b1a;
  --color-destined-for-greatness-950: #23180b;
}

SCSS

$destined-for-greatness: #feddb1;
$destined-for-greatness-rgb: 254, 221, 177;
$destined-for-greatness-light: mix(#fff, $destined-for-greatness, 20%);
$destined-for-greatness-dark: mix(#000, $destined-for-greatness, 20%);

.element {
  color: $destined-for-greatness;
  box-shadow: 0 0 0 2px rgba($destined-for-greatness, 0.35);
}