This palette channels Justin Bieber's recognizable mix of soft pop warmth and cool minimal edge, using a restrained set of colors that feels current and highly wearable. The combination balances youthful energy with polished restraint, making it suitable for fan-driven, fashion-forward, or entertainment branding.
This palette channels Justin Bieber's recognizable mix of soft pop warmth and cool minimal edge, using a restrained set of colors that feels current and highly wearable. The combination balances youthful energy with polished restraint, making it suitable for fan-driven, fashion-forward, or entertainment branding.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors pair a soft sky blue with a fresh mint and a warm blush, creating a familiar pop balance that feels light, modern, and instantly recognizable. Together they give the palette a youthful signature without leaning too loud or overly saturated.
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 soft sky blue with a fresh mint and a warm blush, creating a familiar pop balance that feels light, modern, and instantly recognizable. Together they give the palette a youthful signature without leaning too loud or overly saturated.
RolesLogo, Link, Btn Primary Bg
Sky Blue brings the most recognizable pop energy and keeps the brand feeling open and contemporary.
#8ECDF4142, 205, 244203, 82, 7642, 16, 0, 4RolesBtn Secondary Bg, Btn Outlined Border
Mint softens the system with a fresh, easygoing accent that supports a lighter celebrity aesthetic.
#A8E6CF168, 230, 207158, 55, 7827, 0, 10, 10RolesHeadline, Btn Outlined Text
Blush adds warmth and emotional friendliness, giving headlines and outlined actions a more expressive pop tone.
#F4B6C2244, 182, 194348, 74, 840, 25, 20, 4The support colors extend the main palette with subtle depth and a slightly more polished edge. They stay quiet so the brighter pop tones remain the focus while the system gains enough contrast for interfaces and branding.
RolesIcon, Border
Slate Teal cools the interface accents and bridges the blue and mint tones without competing with them.
#7FA9B8127, 169, 184196, 29, 6131, 8, 0, 28RolesDivider, Outline
Sand introduces a soft neutral warmth that steadies the palette and keeps structural elements gentle.
#D9C8B4217, 200, 18032, 33, 780, 8, 17, 15Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F6F5F2246, 245, 24245, 18, 960, 0, 2, 4RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#11111117, 17, 170, 0, 70, 0, 0, 93Copy 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-sky-blue: #8ECDF4;
--color-mint: #A8E6CF;
--color-blush: #F4B6C2;
--color-slate-teal: #7FA9B8;
--color-sand: #D9C8B4;
--color-white: #FFFFFF;
--color-ivory: #F6F5F2;
--color-charcoal: #111111;
}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: #8ECDF4;
--role-link: #8ECDF4;
--role-btn-primary-bg: #8ECDF4;
--role-btn-secondary-bg: #A8E6CF;
--role-btn-outlined-border: #A8E6CF;
--role-headline: #F4B6C2;
--role-btn-outlined-text: #F4B6C2;
--role-icon: #7FA9B8;
--role-border: #7FA9B8;
--role-divider: #D9C8B4;
--role-outline: #D9C8B4;
--role-bg-light: #FFFFFF;
--role-bg-dark: #111111;
--role-text: #111111;
--role-btn-primary-text: #111111;
--role-btn-secondary-text: #111111;
}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.{
"sky-blue": "#8ECDF4",
"mint": "#A8E6CF",
"blush": "#F4B6C2",
"slate-teal": "#7FA9B8",
"sand": "#D9C8B4",
"white": "#FFFFFF",
"ivory": "#F6F5F2",
"charcoal": "#111111"
}