Casal
See how #2F6168 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Casal Base */
--color-primary: #2F6168;
--color-primary-rgb: 47 97 104;
--color-primary-hsl: 187 38% 30%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #edf6f7;
--color-primary-100: #cae4e7;
--color-primary-200: #a7d2d7;
--color-primary-300: #84c0c8;
--color-primary-400: #61aeb8;
--color-primary-500: #47949e;
--color-primary-600: #37737b;
--color-primary-700: #285258;
--color-primary-800: #183135;
--color-primary-900: #081012;
}