A Pepsi-inspired palette with a bold cola-blue core, a vivid red accent, and a crisp white-red-white structure that feels instantly familiar without copying the brand exactly. The system balances high-energy retail visibility with clean digital usability, keeping the palette iconic, fast-moving, and
A Pepsi-inspired palette with a bold cola-blue core, a vivid red accent, and a crisp white-red-white structure that feels instantly familiar without copying the brand exactly. The system balances high-energy retail visibility with clean digital usability, keeping the palette iconic, fast-moving, and
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors pair a deep soda blue with a vivid cola red to create instant brand recognition and energetic contrast. White-based neutrals keep the system clean and modern so the palette feels inspired by Pepsi rather than imitative.
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 pair a deep soda blue with a vivid cola red to create instant brand recognition and energetic contrast. White-based neutrals keep the system clean and modern so the palette feels inspired by Pepsi rather than imitative.
RolesLogo, Btn Primary Bg, Headline
A bright, confident blue that anchors the identity and carries the brand's refreshing, recognizable core.
#005CB90, 92, 185210, 100, 36100, 50, 0, 27RolesLink, Btn Secondary Bg
A punchy red that adds urgency and shelf impact while giving the system a clear secondary brand voice.
#E31B23227, 27, 35358, 79, 500, 88, 85, 11These accents extend the primary blue-red tension with restrained cool and warm support tones that help UI elements read clearly without competing for attention. They are subtle,用途
RolesIcon, Btn Outlined Border
A lighter blue support tone that softens interfaces and helps borders and icons feel cohesive with the main blue.
#4FA3D979, 163, 217203, 64, 5864, 25, 0, 15RolesBtn Outlined Text
A muted red-violet support that keeps outlined text readable while echoing the red brand accent in a quieter way.
#8A1538138, 21, 56342, 74, 310, 85, 59, 46Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBorder, Divider, Outline
#F5F7FA245, 247, 250216, 33, 972, 1, 0, 2RolesBg Dark, Text
#11182717, 24, 39221, 39, 1156, 38, 0, 85Copy 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-cola-blue: #005CB9;
--color-soda-red: #E31B23;
--color-spark-blue: #4FA3D9;
--color-cola-garnet: #8A1538;
--color-pure-white: #FFFFFF;
--color-frost-white: #F5F7FA;
--color-deep-ink: #111827;
}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: #005CB9;
--role-btn-primary-bg: #005CB9;
--role-headline: #005CB9;
--role-link: #E31B23;
--role-btn-secondary-bg: #E31B23;
--role-icon: #4FA3D9;
--role-btn-outlined-border: #4FA3D9;
--role-btn-outlined-text: #8A1538;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-border: #F5F7FA;
--role-divider: #F5F7FA;
--role-outline: #F5F7FA;
--role-bg-dark: #111827;
--role-text: #111827;
}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.{
"cola-blue": "#005CB9",
"soda-red": "#E31B23",
"spark-blue": "#4FA3D9",
"cola-garnet": "#8A1538",
"pure-white": "#FFFFFF",
"frost-white": "#F5F7FA",
"deep-ink": "#111827"
}