Ferra
See how #794747 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Ferra Base */
--color-primary: #794747;
--color-primary-rgb: 121 71 71;
--color-primary-hsl: 0 26% 38%;
/* 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;
}