Celadon
See how #BFE6BA looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Celadon Base */
--color-primary: #BFE6BA;
--color-primary-rgb: 191 230 186;
--color-primary-hsl: 113 47% 82%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #eef8ec;
--color-primary-100: #cbebc7;
--color-primary-200: #a8dda1;
--color-primary-300: #86d07c;
--color-primary-400: #63c256;
--color-primary-500: #49a93d;
--color-primary-600: #39832f;
--color-primary-700: #295e22;
--color-primary-800: #183814;
--color-primary-900: #081307;
}