This palette is inspired by the dynamic and bold contrasts in the image, balancing vivid orange with deep black and natural browns to create a visually impactful and versatile identity. It combines a triadic harmony of orange, brown, and black that establishes clear recognition, with complementary support colors that are warm and earthy to convey strength and elegance.
This palette is inspired by the dynamic and bold contrasts in the image, balancing vivid orange with deep black and natural browns to create a visually impactful and versatile identity. It combines a triadic harmony of orange, brown, and black that establishes clear recognition, with complementary support colors that are warm and earthy to convey strength and elegance.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The orange, brown, and black main colors form a triadic harmony that balances vibrancy with grounded darkness, creating a recognizable and bold brand expression.
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 orange, brown, and black main colors form a triadic harmony that balances vibrancy with grounded darkness, creating a recognizable and bold brand expression.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline
Princeton Orange adds energetic warmth and visibility, making it an ideal primary color for engagement and attention.
#FF7F11255, 127, 1728, 100, 530, 50, 93, 0RolesBtn Secondary Bg
Seal Brown provides a natural, grounded tone that balances the brightness of the orange with a rich, earthy depth.
#4B2E0075, 46, 037, 100, 150, 39, 100, 71RolesBg Dark
Rich Black ensures strong legibility and contrast, anchoring the palette with sophistication and clarity.
#10101016, 16, 160, 0, 60, 0, 0, 94The support colors are warm and textured shades that complement and soften the strong main colors, extending usability for icons, borders, and backgrounds without competing visually.
RolesIcon, Border, Divider, Outline
Goldenrod echoes the orange warmth in a subtler way, providing delicacy for accents such as icons and borders.
#DAA520218, 165, 3243, 74, 490, 24, 85, 15RolesBg Light
Khaki Web is a soft, muted beige that offers a light neutral background complementing the palette's warm tones.
#C7A17A199, 161, 12230, 41, 630, 19, 39, 22Utility colors for backgrounds, text, borders, and balance.
RolesBtn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F8F8F8248, 248, 2480, 0, 970, 0, 0, 3RolesText, Btn Primary Text
#1A1A1A26, 26, 260, 0, 100, 0, 0, 90Copy 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-princeton-orange: #FF7F11;
--color-seal-brown: #4B2E00;
--color-rich-black: #101010;
--color-goldenrod: #DAA520;
--color-khaki-web: #C7A17A;
--color-white: #FFFFFF;
--color-cultured: #F8F8F8;
--color-raisin-black: #1A1A1A;
}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: #FF7F11;
--role-link: #FF7F11;
--role-btn-primary-bg: #FF7F11;
--role-btn-outlined-border: #FF7F11;
--role-btn-outlined-text: #FF7F11;
--role-headline: #FF7F11;
--role-btn-secondary-bg: #4B2E00;
--role-bg-dark: #101010;
--role-icon: #DAA520;
--role-border: #DAA520;
--role-divider: #DAA520;
--role-outline: #DAA520;
--role-bg-light: #C7A17A;
--role-btn-secondary-text: #FFFFFF;
--role-text: #1A1A1A;
--role-btn-primary-text: #1A1A1A;
}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.{
"princeton-orange": "#FF7F11",
"seal-brown": "#4B2E00",
"rich-black": "#101010",
"goldenrod": "#DAA520",
"khaki-web": "#C7A17A",
"white": "#FFFFFF",
"cultured": "#F8F8F8",
"raisin-black": "#1A1A1A"
}