This palette features vibrant reds and oranges against a vivid teal blue background, capturing a bold, warm, and inviting Mediterranean cityscape vibe. The main colors are rich and saturated, evoking energy and modernity. Supporting colors add warmth and balance, while the neutrals provide grounding for text and backgrounds without competing with the lively hues.
This palette features vibrant reds and oranges against a vivid teal blue background, capturing a bold, warm, and inviting Mediterranean cityscape vibe. The main colors are rich and saturated, evoking energy and modernity. Supporting colors add warmth and balance, while the neutrals provide grounding for text and backgrounds without competing with the lively hues.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The three main colors blend vibrant teal blue with contrasting warm reds and oranges, creating a visually striking and harmonious relationship that drives energy and recognition.
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 three main colors blend vibrant teal blue with contrasting warm reds and oranges, creating a visually striking and harmonious relationship that drives energy and recognition.
RolesLogo, Link, Btn Primary Bg, Headline
Teal Blue conveys calm sophistication and modernity, providing a strong and appealing anchor hue for the brand.
#117A8D17, 122, 141189, 78, 3188, 13, 0, 45RolesBtn Secondary Bg, Btn Outlined Text
Crimson Red adds passion and warmth, infusing the palette with energy and urgency that complements the teal.
#D1432F209, 67, 477, 64, 500, 68, 78, 18RolesBtn Outlined Border
Persimmon Orange brings brightness and friendliness, balancing the intensity of the red and highlighting key interface elements.
#EF7C23239, 124, 3526, 86, 540, 48, 85, 6The support colors extend the palette with warmer, muted shades that balance and soften the bold main hues, ensuring versatility and visual hierarchy.
RolesIcon, Border, Divider, Outline
Marigold complements the main warm tones by providing a softer, approachable accent that enriches the palette without overwhelming it.
#F7B05B247, 176, 9133, 91, 660, 29, 63, 3Rust grounds the vibrant colors with a deeper earthy tone, enhancing readability and contrast when used sparingly.
#C45A33196, 90, 5116, 59, 480, 54, 74, 23Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F3F2F1243, 242, 24130, 8, 950, 0, 1, 5RolesText
#1B1C1D27, 28, 29210, 4, 117, 3, 0, 89Copy 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-blue: #117A8D;
--color-crimson-red: #D1432F;
--color-persimmon-orange: #EF7C23;
--color-marigold: #F7B05B;
--color-rust: #C45A33;
--color-pure-white: #FFFFFF;
--color-alabaster: #F3F2F1;
--color-charcoal: #1B1C1D;
}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: #117A8D;
--role-link: #117A8D;
--role-btn-primary-bg: #117A8D;
--role-headline: #117A8D;
--role-btn-secondary-bg: #D1432F;
--role-btn-outlined-text: #D1432F;
--role-btn-outlined-border: #EF7C23;
--role-icon: #F7B05B;
--role-border: #F7B05B;
--role-divider: #F7B05B;
--role-outline: #F7B05B;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F3F2F1;
--role-text: #1B1C1D;
}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-blue": "#117A8D",
"crimson-red": "#D1432F",
"persimmon-orange": "#EF7C23",
"marigold": "#F7B05B",
"rust": "#C45A33",
"pure-white": "#FFFFFF",
"alabaster": "#F3F2F1",
"charcoal": "#1B1C1D"
}