This palette captures the vibrant and warm energy of the orange hues combined with neutral, grounded tones to create a balanced yet dynamic visual identity. The main colors emphasize warmth, creativity, and approachability, supported by subtle earthy and muted neutrals for versatility and readability.
This palette captures the vibrant and warm energy of the orange hues combined with neutral, grounded tones to create a balanced yet dynamic visual identity. The main colors emphasize warmth, creativity, and approachability, supported by subtle earthy and muted neutrals for versatility and readability.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors are warm and energetic shades of orange and complementary deep brownish tones, creating a recognizable, inviting, and cohesive system.
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 are warm and energetic shades of orange and complementary deep brownish tones, creating a recognizable, inviting, and cohesive system.
RolesLogo, Link, Btn Primary Bg, Headline
Coral Orange energizes the palette with its bold vibrancy and warmth, evoking creativity and youthful enthusiasm.
#FF7F32255, 127, 5023, 100, 600, 50, 80, 0RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Light Apricot provides a soft, approachable contrast, balancing the bold orange and enhancing readability and friendliness.
#FFD480255, 212, 12840, 100, 750, 17, 50, 0Rich Cocoa offers deep contrast and grounding, improving legibility on lighter button backgrounds while adding warmth and sophistication.
#5A3E2B90, 62, 4324, 35, 260, 31, 52, 65The support colors extend the main palette with softer, muted earthy tones that complement orange without overpowering it, providing subtle accents and versatility for interactive elements and icons.
RolesIcon, Border, Divider, Outline
Muted Sand gently supports the palette with an understated earthy tone, blending harmoniously with the warm main colors to create depth without distraction.
#B38B6D179, 139, 10926, 32, 560, 22, 39, 30Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F4E6D7244, 230, 21531, 57, 900, 6, 12, 4RolesText, Btn Primary Text, Btn Secondary Text
#3B2F2F59, 47, 470, 11, 210, 20, 20, 77Copy 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-coral-orange: #FF7F32;
--color-light-apricot: #FFD480;
--color-rich-cocoa: #5A3E2B;
--color-muted-sand: #B38B6D;
--color-pure-white: #FFFFFF;
--color-soft-ivory: #F4E6D7;
--color-dark-charcoal: #3B2F2F;
}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: #FF7F32;
--role-link: #FF7F32;
--role-btn-primary-bg: #FF7F32;
--role-headline: #FF7F32;
--role-btn-secondary-bg: #FFD480;
--role-btn-outlined-border: #FFD480;
--role-btn-outlined-text: #FFD480;
--role-icon: #B38B6D;
--role-border: #B38B6D;
--role-divider: #B38B6D;
--role-outline: #B38B6D;
--role-bg-light: #FFFFFF;
--role-bg-dark: #F4E6D7;
--role-text: #3B2F2F;
--role-btn-primary-text: #3B2F2F;
--role-btn-secondary-text: #3B2F2F;
}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.{
"coral-orange": "#FF7F32",
"light-apricot": "#FFD480",
"rich-cocoa": "#5A3E2B",
"muted-sand": "#B38B6D",
"pure-white": "#FFFFFF",
"soft-ivory": "#F4E6D7",
"dark-charcoal": "#3B2F2F"
}