This palette draws inspiration from the warm, earthy tones and subtle contrasts found in the image of the orange tabby cat, combining comforting orange hues with gentle creams and balanced with soft, natural neutrals for versatile brand use.
This palette draws inspiration from the warm, earthy tones and subtle contrasts found in the image of the orange tabby cat, combining comforting orange hues with gentle creams and balanced with soft, natural neutrals for versatile brand use.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors leverage analogous warm hues of orange and red-brown, working harmoniously to provide a cozy and inviting identity that reflects natural warmth and friendliness.
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 leverage analogous warm hues of orange and red-brown, working harmoniously to provide a cozy and inviting identity that reflects natural warmth and friendliness.
RolesLogo, Link, Btn Primary Bg, Headline
Tiger Orange brings vibrant energy and warmth, creating an eye-catching and friendly foundation for the brand.
#D46A1D212, 106, 2925, 76, 470, 50, 86, 17RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Burnt Sienna adds depth and grounding, balancing the brightness of Tiger Orange with mature, earthy vibes.
#AA5616170, 86, 2226, 77, 380, 49, 87, 33Sandy Beige offers a soft, natural accent that complements and lightens the richer oranges for legibility and approachability.
#E3B574227, 181, 11635, 66, 670, 20, 49, 11Support colors provide subtle warmth and natural balance, extending the palette with gentle, muted tones that emphasize harmony without overpowering the main colors.
RolesIcon, Border, Divider, Outline
Muted Caramel reinforces the warm earthiness while being soft enough to support interfaces and details without dominance.
#C1A47E193, 164, 12634, 35, 630, 15, 35, 24Warm Taupe subtly contrasts the main colors, bringing quiet sophistication and balance to the palette.
#A17C52161, 124, 8232, 33, 480, 23, 49, 37Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F5F4F2245, 244, 24240, 13, 950, 0, 1, 4RolesText
#3C322F60, 50, 4714, 12, 210, 17, 22, 76Copy 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-tiger-orange: #D46A1D;
--color-burnt-sienna: #AA5616;
--color-sandy-beige: #E3B574;
--color-muted-caramel: #C1A47E;
--color-warm-taupe: #A17C52;
--color-pure-white: #FFFFFF;
--color-ivory-mist: #F5F4F2;
--color-dark-chocolate: #3C322F;
}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: #D46A1D;
--role-link: #D46A1D;
--role-btn-primary-bg: #D46A1D;
--role-headline: #D46A1D;
--role-btn-secondary-bg: #AA5616;
--role-btn-outlined-border: #AA5616;
--role-btn-outlined-text: #AA5616;
--role-icon: #C1A47E;
--role-border: #C1A47E;
--role-divider: #C1A47E;
--role-outline: #C1A47E;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F5F4F2;
--role-text: #3C322F;
}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.{
"tiger-orange": "#D46A1D",
"burnt-sienna": "#AA5616",
"sandy-beige": "#E3B574",
"muted-caramel": "#C1A47E",
"warm-taupe": "#A17C52",
"pure-white": "#FFFFFF",
"ivory-mist": "#F5F4F2",
"dark-chocolate": "#3C322F"
}