This palette blends vibrant Tangerine with grounded Leaf Green and Sea Grey neutrals, creating a professional yet approachable corporate identity suitable for a social media marketing agency. The colors work cohesively to convey energy, growth, and trust while supporting clear readability and interface versatility.
This palette blends vibrant Tangerine with grounded Leaf Green and Sea Grey neutrals, creating a professional yet approachable corporate identity suitable for a social media marketing agency. The colors work cohesively to convey energy, growth, and trust while supporting clear readability and interface versatility.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors of vibrant Tangerine, grounded Leaf Green, and deep Sea Grey form a split complementary scheme that balances energy with professionalism and approachability for a distinct corporate look.
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 of vibrant Tangerine, grounded Leaf Green, and deep Sea Grey form a split complementary scheme that balances energy with professionalism and approachability for a distinct corporate look.
RolesLogo, Link, Btn Primary Bg, Headline
Tangerine infuses the brand with energetic confidence and creativity, capturing attention with warmth and vibrancy.
#F58F20245, 143, 3231, 91, 540, 42, 87, 4RolesBtn Outlined Border, Btn Outlined Text, Btn Secondary Bg
Leaf Green conveys growth, reliability, and balance, tempering the bright Tangerine with a natural and trustworthy feel.
#46743470, 116, 52103, 38, 3340, 0, 55, 55Sea Grey serves as a strong, neutral anchor that enhances readability and adds a professional and modern edge.
#36363654, 54, 540, 0, 210, 0, 0, 79Support colors include a soft clay accent and a muted teal-grey that subtly reinforce the main palette, adding visual interest and flexible applications while maintaining understated presence.
RolesIcon, Border, Divider, Outline
Soft Clay complements Tangerine's warmth and Leaf Green's coolness with a muted mid-tone, adding depth without distraction.
#B27D48178, 125, 7230, 42, 490, 30, 60, 30Muted Teal Grey balances the palette with a calm, sophisticated hue that supports the main colors without competing.
#547D7A84, 125, 122176, 20, 4133, 0, 2, 51Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F7F6F4247, 246, 24440, 16, 960, 0, 1, 3RolesText, Btn Primary Text
#1F1F1F31, 31, 310, 0, 120, 0, 0, 88Copy 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-tangerine: #F58F20;
--color-leaf-green: #467434;
--color-sea-grey: #363636;
--color-soft-clay: #B27D48;
--color-muted-teal-grey: #547D7A;
--color-pure-white: #FFFFFF;
--color-light-mist: #F7F6F4;
--color-charcoal-black: #1F1F1F;
}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: #F58F20;
--role-link: #F58F20;
--role-btn-primary-bg: #F58F20;
--role-headline: #F58F20;
--role-btn-outlined-border: #467434;
--role-btn-outlined-text: #467434;
--role-btn-secondary-bg: #467434;
--role-icon: #B27D48;
--role-border: #B27D48;
--role-divider: #B27D48;
--role-outline: #B27D48;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F7F6F4;
--role-text: #1F1F1F;
--role-btn-primary-text: #1F1F1F;
}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.{
"tangerine": "#F58F20",
"leaf-green": "#467434",
"sea-grey": "#363636",
"soft-clay": "#B27D48",
"muted-teal-grey": "#547D7A",
"pure-white": "#FFFFFF",
"light-mist": "#F7F6F4",
"charcoal-black": "#1F1F1F"
}