Roman
See how #DE6161 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Roman Base */
--color-primary: #DE6161;
--color-primary-rgb: 222 97 97;
--color-primary-hsl: 0 65% 63%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #fbeaea;
--color-primary-100: #f2c0c0;
--color-primary-200: #e99696;
--color-primary-300: #e06c6c;
--color-primary-400: #d74242;
--color-primary-500: #bd2828;
--color-primary-600: #931f1f;
--color-primary-700: #691616;
--color-primary-800: #3f0d0d;
--color-primary-900: #150404;
}