Lucky
See how #AF9F1C looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Lucky Base */
--color-primary: #AF9F1C;
--color-primary-rgb: 175 159 28;
--color-primary-hsl: 53 72% 40%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #fbf9e9;
--color-primary-100: #f4eebd;
--color-primary-200: #ede291;
--color-primary-300: #e6d765;
--color-primary-400: #dfcc3a;
--color-primary-500: #c5b220;
--color-primary-600: #9a8b19;
--color-primary-700: #6e6312;
--color-primary-800: #423b0b;
--color-primary-900: #161404;
}