This palette draws from the vibrant and fresh colors in the image, representing energy, creativity, and modern professionalism suitable for a tech-forward brand. The main colors harmonize with natural greens and blues from the plants and environment, complemented by subtle neutrals and soft earth tones to balance and ground the palette.
This palette draws from the vibrant and fresh colors in the image, representing energy, creativity, and modern professionalism suitable for a tech-forward brand. The main colors harmonize with natural greens and blues from the plants and environment, complemented by subtle neutrals and soft earth tones to balance and ground the palette.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors blend closely related blue and green hues reflecting the fresh, natural energy present in the image, creating a cohesive and recognizable system that evokes growth and innovation.
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 blend closely related blue and green hues reflecting the fresh, natural energy present in the image, creating a cohesive and recognizable system that evokes growth and innovation.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Teal Green brings a sense of natural vitality and stability, emphasizing innovation and sustainability.
#138D7519, 141, 117168, 76, 3187, 0, 17, 45RolesBtn Secondary Bg, Headline
Deep Sea Green enriches the palette with depth and sophistication, balancing vibrancy with calm assurance.
#117A6517, 122, 101168, 76, 2786, 0, 17, 52Emerald Green adds a bright, uplifting accent that conveys energy and growth.
#22995434, 153, 84145, 64, 3778, 0, 45, 40Support colors extend the main palette by introducing softer, earthy amber and sky blue tones that balance and complement the dominant greens, ensuring visual harmony without overpowering.
RolesIcon, Border, Divider, Outline
Amber Gold provides warm contrast and balance to the cooler greens, enhancing visual interest.
#D4AC0D212, 172, 1348, 88, 440, 19, 94, 17Sky Blue brings a light, airy balance that complements the greens while adding tranquility and approachability.
#5499C784, 153, 199204, 51, 5558, 23, 0, 22Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F7F9F9247, 249, 249180, 14, 971, 0, 0, 2RolesText
#17202A23, 32, 42212, 29, 1345, 24, 0, 84Copy 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-teal-green: #138D75;
--color-deep-sea-green: #117A65;
--color-emerald-green: #229954;
--color-amber-gold: #D4AC0D;
--color-sky-blue: #5499C7;
--color-pure-white: #FFFFFF;
--color-soft-ivory: #F7F9F9;
--color-charcoal-black: #17202A;
}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: #138D75;
--role-link: #138D75;
--role-btn-primary-bg: #138D75;
--role-btn-outlined-border: #138D75;
--role-btn-outlined-text: #138D75;
--role-btn-secondary-bg: #117A65;
--role-headline: #117A65;
--role-icon: #D4AC0D;
--role-border: #D4AC0D;
--role-divider: #D4AC0D;
--role-outline: #D4AC0D;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F7F9F9;
--role-text: #17202A;
}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.{
"teal-green": "#138D75",
"deep-sea-green": "#117A65",
"emerald-green": "#229954",
"amber-gold": "#D4AC0D",
"sky-blue": "#5499C7",
"pure-white": "#FFFFFF",
"soft-ivory": "#F7F9F9",
"charcoal-black": "#17202A"
}