This palette pairs a volcanic tangerine with warm sand and smoked charcoal to echo the image’s bright sun, pale sky, and rugged mountain forms. The result is a grounded, high-contrast system that feels natural but still bold enough for brand recognition and interface clarity.
This palette pairs a volcanic tangerine with warm sand and smoked charcoal to echo the image’s bright sun, pale sky, and rugged mountain forms. The result is a grounded, high-contrast system that feels natural but still bold enough for brand recognition and interface clarity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine ember orange with a deep mountain brown and sunlit beige to create a vivid focal point against an earthy base. Their contrast feels natural to the image while still giving the brand a distinctive, memorable signature.
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 combine ember orange with a deep mountain brown and sunlit beige to create a vivid focal point against an earthy base. Their contrast feels natural to the image while still giving the brand a distinctive, memorable signature.
RolesLogo, Btn Primary Bg
This intense ember orange delivers the image’s visual anchor and gives the brand a confident, energetic signature.
#F23A14242, 58, 2010, 90, 510, 76, 92, 5RolesBtn Secondary Bg, Headline
This dark ridge brown adds weight and editorial seriousness, balancing the brightness of the ember tone.
#3A241D58, 36, 2914, 33, 170, 38, 50, 77RolesLink, Btn Outlined Border, Btn Outlined Text
This pale sun-washed beige softens the system and keeps interactive accents aligned with the landscape mood.
#EED3A9238, 211, 16937, 67, 800, 11, 29, 7The support colors extend the palette with quieter stone and mineral notes that reinforce the mountain texture without competing with the core hues. They are intentionally subdued so they can support hierarchy, borders, and emphasis rather than become the main event.
RolesIcon, Border
This muted stone tan bridges the warm beige and dark brown, making UI edges and icons feel integrated and stable.
#A78A74167, 138, 11626, 22, 550, 17, 31, 35RolesDivider, Outline
This dusty taupe-gray adds restrained structure and keeps separators visible without drawing attention away from content.
#7D6A62125, 106, 9818, 12, 440, 15, 22, 51Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F7F1E8247, 241, 23236, 48, 940, 2, 6, 3RolesBg Dark, Text, Btn Primary 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-solar-ember: #F23A14;
--color-volcanic-ridge: #3A241D;
--color-dune-veil: #EED3A9;
--color-canyon-stone: #A78A74;
--color-ashed-cliff: #7D6A62;
--color-pure-white: #FFFFFF;
--color-soft-alabaster: #F7F1E8;
--color-deep-black: #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: #F23A14;
--role-btn-primary-bg: #F23A14;
--role-btn-secondary-bg: #3A241D;
--role-headline: #3A241D;
--role-link: #EED3A9;
--role-btn-outlined-border: #EED3A9;
--role-btn-outlined-text: #EED3A9;
--role-icon: #A78A74;
--role-border: #A78A74;
--role-divider: #7D6A62;
--role-outline: #7D6A62;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #111111;
--role-text: #111111;
--role-btn-primary-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.{
"solar-ember": "#F23A14",
"volcanic-ridge": "#3A241D",
"dune-veil": "#EED3A9",
"canyon-stone": "#A78A74",
"ashed-cliff": "#7D6A62",
"pure-white": "#FFFFFF",
"soft-alabaster": "#F7F1E8",
"deep-black": "#111111"
}