Canary
See how #F3FB62 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Canary Base */
--color-primary: #F3FB62;
--color-primary-rgb: 243 251 98;
--color-primary-hsl: 63 95% 68%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #fdfee6;
--color-primary-100: #f9fdb4;
--color-primary-200: #f6fc83;
--color-primary-300: #f2fb51;
--color-primary-400: #eef91f;
--color-primary-500: #d5e006;
--color-primary-600: #a6ae04;
--color-primary-700: #767c03;
--color-primary-800: #474b02;
--color-primary-900: #181901;
}