Cameo
See how #D9B99B looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Cameo Base */
--color-primary: #D9B99B;
--color-primary-rgb: 217 185 155;
--color-primary-hsl: 29 45% 73%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #f8f2ed;
--color-primary-100: #ead8c8;
--color-primary-200: #dcbea3;
--color-primary-300: #cea47e;
--color-primary-400: #c08b59;
--color-primary-500: #a6713f;
--color-primary-600: #815831;
--color-primary-700: #5c3f23;
--color-primary-800: #372615;
--color-primary-900: #120d07;
}