Onion
See how #2F270E looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Onion Base */
--color-primary: #2F270E;
--color-primary-rgb: 47 39 14;
--color-primary-hsl: 45 54% 12%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f9f6eb;
--color-primary-100: #ede3c4;
--color-primary-200: #e2d09d;
--color-primary-300: #d6be76;
--color-primary-400: #caab4e;
--color-primary-500: #b19235;
--color-primary-600: #897129;
--color-primary-700: #62511d;
--color-primary-800: #3b3112;
--color-primary-900: #141006;
}