This palette captures the serene and vibrant natural essence of the image with fresh greens, sky blues, and a muted earth tone, balanced by soft support colors and neutrals for harmony and usability.
This palette captures the serene and vibrant natural essence of the image with fresh greens, sky blues, and a muted earth tone, balanced by soft support colors and neutrals for harmony and usability.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors reflect a triadic harmony featuring a lush green, a clear sky blue, and a warm muted earth tone, creating a balanced and recognizable natural 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 reflect a triadic harmony featuring a lush green, a clear sky blue, and a warm muted earth tone, creating a balanced and recognizable natural system.
RolesLogo, Link, Btn Primary Bg, Headline
Forest Green evokes vitality and growth, representing the lush foliage in the image.
#4A7B3B74, 123, 59106, 35, 3640, 0, 52, 52RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Sky Blue brings calmness and openness reminiscent of the distant sky and mountains.
#6DAEDB109, 174, 219205, 60, 6450, 21, 0, 14Muted Earth adds warmth and grounding to the palette, reflecting the natural soil and rock tones.
#A08B6B160, 139, 10736, 22, 520, 13, 33, 37Support colors in soft, muted tones extend the main palette with subtle floral and leaf hints to enhance visual interest without overpowering.
RolesIcon, Border, Divider, Outline
Moss Green complements the Forest Green with a softer tone, adding depth and texture inspired by undergrowth.
#8DAC72141, 172, 11492, 26, 5618, 0, 34, 33RolesBg Light
Powder Blue offers a light, airy background reflecting distant atmospheric haze, balancing the stronger main hues.
#B4C9D4180, 201, 212201, 27, 7715, 5, 0, 17Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text
#F5F7FA245, 247, 250216, 33, 972, 1, 0, 2#D1D9E6209, 217, 230217, 30, 869, 6, 0, 10RolesBg Dark, Text, Btn Secondary Text
#1E232830, 35, 40210, 14, 1425, 13, 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-forest-green: #4A7B3B;
--color-sky-blue: #6DAEDB;
--color-muted-earth: #A08B6B;
--color-moss-green: #8DAC72;
--color-powder-blue: #B4C9D4;
--color-alabaster: #F5F7FA;
--color-morning-mist: #D1D9E6;
--color-charcoal: #1E2328;
}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: #4A7B3B;
--role-link: #4A7B3B;
--role-btn-primary-bg: #4A7B3B;
--role-headline: #4A7B3B;
--role-btn-secondary-bg: #6DAEDB;
--role-btn-outlined-border: #6DAEDB;
--role-btn-outlined-text: #6DAEDB;
--role-icon: #8DAC72;
--role-border: #8DAC72;
--role-divider: #8DAC72;
--role-outline: #8DAC72;
--role-bg-light: #B4C9D4;
--role-btn-primary-text: #F5F7FA;
--role-bg-dark: #1E2328;
--role-text: #1E2328;
--role-btn-secondary-text: #1E2328;
}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.{
"forest-green": "#4A7B3B",
"sky-blue": "#6DAEDB",
"muted-earth": "#A08B6B",
"moss-green": "#8DAC72",
"powder-blue": "#B4C9D4",
"alabaster": "#F5F7FA",
"morning-mist": "#D1D9E6",
"charcoal": "#1E2328"
}