Spray
See how #74EBD5 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Spray Base */
--color-primary: #74EBD5;
--color-primary-rgb: 116 235 213;
--color-primary-hsl: 169 75% 69%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #e9fcf8;
--color-primary-100: #bcf5eb;
--color-primary-200: #8fefde;
--color-primary-300: #63e9d0;
--color-primary-400: #36e2c3;
--color-primary-500: #1dc9a9;
--color-primary-600: #169c84;
--color-primary-700: #10705e;
--color-primary-800: #0a4338;
--color-primary-900: #031613;
}