A playful, construction-ready palette inspired by classic LEGO brick colors and the crisp simplicity of toy-box packaging. Strong primary hues create instant recognition, while clean neutrals keep the system usable across products, interfaces, and merchandising.
A playful, construction-ready palette inspired by classic LEGO brick colors and the crisp simplicity of toy-box packaging. Strong primary hues create instant recognition, while clean neutrals keep the system usable across products, interfaces, and merchandising.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors echo the classic brick-world relationship of red, yellow, and blue, creating immediate toy-shelf recognition without relying on a single dominant hue. Together they feel energetic, modular, and flexible enough for both brand
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
The main colors echo the classic brick-world relationship of red, yellow, and blue, creating immediate toy-shelf recognition without relying on a single dominant hue. Together they feel energetic, modular, and flexible enough for both brand
RolesLogo, Btn Primary Bg
The core brick tone brings instant LEGO-like recognition and a bold, energetic presence.
#D62828214, 40, 400, 69, 500, 81, 81, 16RolesBtn Secondary Bg
A bright, cheerful accent that reinforces the playful construction theme and adds visual lift.
#F4C430244, 196, 4845, 90, 570, 20, 80, 4RolesLink, Btn Outlined Border, Btn Outlined Text, Headline
A dependable primary blue that balances the warmer colors and gives the system clarity in UI use.
#2457C536, 87, 197221, 69, 4682, 56, 0, 23These accents extend the main palette with quieter block-like tones that support layouts, status moments, and detail work without competing with the core LEGO-inspired primaries.
RolesIcon, Outline
A muted green that nods to baseplates and adds a practical contrast for supporting elements.
#2E8B5746, 139, 87146, 50, 3667, 0, 37, 45RolesBorder
A warm connector tone that echoes plastic brick energy while staying subordinate to the main colors.
#B86B2B184, 107, 4327, 62, 450, 42, 77, 28Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F2EC244, 242, 23645, 27, 940, 1, 3, 4RolesBg Dark, Divider, Text, Btn Secondary Text
#11111117, 17, 170, 0, 70, 0, 0, 93Copy palette values for design systems, websites, and client handoff.
Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.
Use when: you need the actual colors.:root {
--color-brick-red: #D62828;
--color-brick-yellow: #F4C430;
--color-brick-blue: #2457C5;
--color-plate-green: #2E8B57;
--color-stud-orange: #B86B2B;
--color-pure-white: #FFFFFF;
--color-warm-off-white: #F4F2EC;
--color-deep-charcoal: #111111;
}Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.
Use when: you need UI roles, not just swatches.:root {
--role-logo: #D62828;
--role-btn-primary-bg: #D62828;
--role-btn-secondary-bg: #F4C430;
--role-link: #2457C5;
--role-btn-outlined-border: #2457C5;
--role-btn-outlined-text: #2457C5;
--role-headline: #2457C5;
--role-icon: #2E8B57;
--role-outline: #2E8B57;
--role-border: #B86B2B;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #111111;
--role-divider: #111111;
--role-text: #111111;
--role-btn-secondary-text: #111111;
}Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.
Use when: a developer or app needs data.{
"brick-red": "#D62828",
"brick-yellow": "#F4C430",
"brick-blue": "#2457C5",
"plate-green": "#2E8B57",
"stud-orange": "#B86B2B",
"pure-white": "#FFFFFF",
"warm-off-white": "#F4F2EC",
"deep-charcoal": "#111111"
}