Coral Tree
See how #A86B6B looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Coral Tree Base */
--color-primary: #A86B6B;
--color-primary-rgb: 168 107 107;
--color-primary-hsl: 0 26% 54%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f6efef;
--color-primary-100: #e3cfcf;
--color-primary-200: #d0afaf;
--color-primary-300: #bd8f8f;
--color-primary-400: #aa6e6e;
--color-primary-500: #915555;
--color-primary-600: #704242;
--color-primary-700: #502f2f;
--color-primary-800: #301c1c;
--color-primary-900: #100909;
}