Mineral Green
See how #3F5D53 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Mineral Green Base */
--color-primary: #3F5D53;
--color-primary-rgb: 63 93 83;
--color-primary-hsl: 160 19% 31%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f0f5f3;
--color-primary-100: #d1e0db;
--color-primary-200: #b3cbc3;
--color-primary-300: #95b7ab;
--color-primary-400: #76a294;
--color-primary-500: #5d897a;
--color-primary-600: #486a5f;
--color-primary-700: #344c44;
--color-primary-800: #1f2e29;
--color-primary-900: #0a0f0e;
}