Humming Bird
See how #CFF9F3 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Humming Bird Base */
--color-primary: #CFF9F3;
--color-primary-rgb: 207 249 243;
--color-primary-hsl: 171 78% 89%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #e8fcf9;
--color-primary-100: #bbf7ee;
--color-primary-200: #8ef1e2;
--color-primary-300: #60ebd6;
--color-primary-400: #33e6cb;
--color-primary-500: #19ccb1;
--color-primary-600: #149f8a;
--color-primary-700: #0e7163;
--color-primary-800: #08443b;
--color-primary-900: #031714;
}