This palette uses soft pastel tones combined with deep teal to reflect the gentle yet distinct contrast in the image's textured typography and background, creating a soothing but authoritative visual identity.
This palette uses soft pastel tones combined with deep teal to reflect the gentle yet distinct contrast in the image's textured typography and background, creating a soothing but authoritative visual identity.
Each column shows a usable logo color on a palette background, with contrast checked for clarity.
A neutral card system with the logo color, contact text, and a restrained palette accent.
A mobile landing page preview with logo, navigation, headline, CTA, content card, and chart color usage.
The main colors combine cool tones of soft mint and deep teal, offering a harmonious and recognizable identity with subtle variation in hue and saturation.
Numbers, pie charts, bars, stacked bars, and lines reveal whether the palette can support real product interfaces.
Assign existing palette colors to brand, typography, and interface roles.
CMYK values are calculated from HEX by default. Adjust them only when preparing print materials.
A compact view of the brand, support, and neutral colors that make up this system.
The main colors combine cool tones of soft mint and deep teal, offering a harmonious and recognizable identity with subtle variation in hue and saturation.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline
Teal is the foundational color conveying a calm, sophisticated feel and solid visual grounding.
#77A69D119, 166, 157169, 21, 5628, 0, 5, 35RolesBtn Secondary Bg
Mint adds freshness and softness, balancing the depth of teal with a clean, airy quality.
#B3D8CE179, 216, 206164, 32, 7717, 0, 5, 15Support colors add muted blues and cool grays to complement main tones and maintain visual interest without overpowering.
RolesIcon, Border, Divider, Outline
Sage provides a gentle, muted contrast enhancing the depth of the palette while remaining subtle.
#A9C3B5169, 195, 181148, 18, 7113, 0, 7, 24Slate Gray anchors the lighter colors by adding neutrality and sophistication to support main tones.
#8EA6A1142, 166, 161168, 12, 6014, 0, 3, 35Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#E3F0EB227, 240, 235157, 30, 925, 0, 2, 6RolesText, Btn Primary Text, Btn Secondary Text
#2F3E3D47, 62, 61176, 14, 2124, 0, 2, 76Copy palette values for design systems, websites, and client handoff. You can also copy this palette for Logo Export on myLogo.review, so your colors are ready there in one click.
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: #77A69D;
--color-mint: #B3D8CE;
--color-sage: #A9C3B5;
--color-slate-gray: #8EA6A1;
--color-white: #FFFFFF;
--color-light-mint: #E3F0EB;
--color-charcoal: #2F3E3D;
}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: #77A69D;
--role-link: #77A69D;
--role-btn-primary-bg: #77A69D;
--role-btn-outlined-border: #77A69D;
--role-btn-outlined-text: #77A69D;
--role-headline: #77A69D;
--role-btn-secondary-bg: #B3D8CE;
--role-icon: #A9C3B5;
--role-border: #A9C3B5;
--role-divider: #A9C3B5;
--role-outline: #A9C3B5;
--role-bg-light: #FFFFFF;
--role-bg-dark: #E3F0EB;
--role-text: #2F3E3D;
--role-btn-primary-text: #2F3E3D;
--role-btn-secondary-text: #2F3E3D;
}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": "#77A69D",
"mint": "#B3D8CE",
"sage": "#A9C3B5",
"slate-gray": "#8EA6A1",
"white": "#FFFFFF",
"light-mint": "#E3F0EB",
"charcoal": "#2F3E3D"
}