This palette channels The Diary of a CEO through a sharp black-and-white foundation with a bold red signature that feels editorial, confident, and interview-led. The colors work together as a recognizable broadcast system that stays high-contrast for video thumbnails, podcast branding, and digital interfaces.
This palette channels The Diary of a CEO through a sharp black-and-white foundation with a bold red signature that feels editorial, confident, and interview-led. The colors work together as a recognizable broadcast system that stays high-contrast for video thumbnails, podcast branding, and digital interfaces.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors create a stark editorial system with a signature red accent, echoing the brand’s direct, confident, and recognizable on-camera presence. Black, white, and red stay immediately legible across thumbnails, titles, and interface accents.
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 create a stark editorial system with a signature red accent, echoing the brand’s direct, confident, and recognizable on-camera presence. Black, white, and red stay immediately legible across thumbnails, titles, and interface accents.
RolesLogo, Btn Primary Bg
Crimson delivers the brand’s most recognizable punch and gives the system an urgent, media-forward edge.
#E10600225, 6, 02, 100, 440, 97, 100, 12RolesHeadline, Btn Secondary Bg, Link
Charcoal anchors the palette with a serious editorial tone that keeps the identity grounded and authoritative.
#11111117, 17, 170, 0, 70, 0, 0, 93RolesBtn Outlined Border, Btn Outlined Text
White preserves the clean, documentary feel and keeps outlined UI elements crisp against dark surfaces.
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0The support colors extend the black-white-red system with quiet tonal depth and subtle emphasis without competing with the main trio. They are restrained enough to support covers, UI states, and data accents while keeping the focus on the core brand colors.
RolesIcon, Border
Slate softens the contrast of the interface elements while remaining neutral and readable beside the stronger brand colors.
#7A7A7A122, 122, 1220, 0, 480, 0, 0, 52RolesDivider, Outline
Silver adds structure for lines and frames, helping layouts feel organized without pulling attention away from the headline red.
#D9D9D9217, 217, 2170, 0, 850, 0, 0, 15Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#F7F7F5247, 247, 24560, 11, 960, 0, 1, 3RolesBg Dark
#22222234, 34, 340, 0, 130, 0, 0, 87RolesText
#0A0A0A10, 10, 100, 0, 40, 0, 0, 96Copy 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-crimson: #E10600;
--color-charcoal: #111111;
--color-white: #FFFFFF;
--color-slate: #7A7A7A;
--color-silver: #D9D9D9;
--color-ivory: #F7F7F5;
--color-graphite: #222222;
--color-black: #0A0A0A;
}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: #E10600;
--role-btn-primary-bg: #E10600;
--role-headline: #111111;
--role-btn-secondary-bg: #111111;
--role-link: #111111;
--role-btn-outlined-border: #FFFFFF;
--role-btn-outlined-text: #FFFFFF;
--role-icon: #7A7A7A;
--role-border: #7A7A7A;
--role-divider: #D9D9D9;
--role-outline: #D9D9D9;
--role-bg-light: #F7F7F5;
--role-btn-primary-text: #F7F7F5;
--role-btn-secondary-text: #F7F7F5;
--role-bg-dark: #222222;
--role-text: #0A0A0A;
}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.{
"crimson": "#E10600",
"charcoal": "#111111",
"white": "#FFFFFF",
"slate": "#7A7A7A",
"silver": "#D9D9D9",
"ivory": "#F7F7F5",
"graphite": "#222222",
"black": "#0A0A0A"
}