Jollibee color palette
Food & DrinkJollibee's color identity centers on a vibrant, cheerful red paired with white and yellow, reflecting its joyful and family-friendly brand. The palette is bold and highly recognizable, used consistently across physical and digital touchpoints.
jollibee.comJollibee colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Jollibee RedPrimary214, 0, 28
- Jollibee YellowSecondary247, 209, 23
- Jollibee WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Jollibee Light GrayBackground247, 247, 247
- Jollibee Surface WhiteSurface255, 255, 255
- Jollibee Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Jollibee CharcoalText33, 33, 33
- Jollibee Medium GraySecondary text117, 117, 117
- Jollibee Muted GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- Jollibee Success GreenSuccess67, 160, 71
- Jollibee Warning OrangeWarning255, 160, 0
- Jollibee Error RedError211, 47, 47
- Jollibee Info BlueInfo25, 118, 210
Use Jollibee's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
jollibee-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #FFFFFF;
--border: #E0E0E0;
--primary: #D6001C;
--success: #43A047;
--surface: #FFFFFF;
--warning: #FFA000;
--secondary: #F7D117;
--text-muted: #BDBDBD;
--background: #F7F7F7;
--text-primary: #212121;
--text-secondary: #757575;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.0:1
Pass
Text on surface
Needs 4.5:1 for body text
16.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.3:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
1.8:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Jollibee gray and neutral colors
The quiet part of the Jollibee palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Jollibee Light GrayBackground
- HEX
- RGB
- HSL
- Jollibee Surface WhiteSurface
- HEX
- RGB
- HSL
- Jollibee Border GrayBorder
- HEX
- RGB
- HSL
- Jollibee CharcoalText
- HEX
- RGB
- HSL
- Jollibee Medium GraySecondary text
- HEX
- RGB
- HSL
- Jollibee Muted GrayMuted text
- HEX
- RGB
- HSL
About Jollibee's colors
Jollibee's palette is anchored by a vivid red, symbolizing energy and appetite, with yellow accents for warmth and happiness. The supporting neutrals ensure clarity and accessibility in digital and print applications.
Primary red and yellow are complementary for high contrast.
White and light gray provide clean backgrounds.
Dark grays are used for legible text.
Psychology
Red evokes excitement and appetite, making it ideal for a fast-food brand. Yellow adds a sense of friendliness and approachability.
Evolution
Jollibee's palette has remained largely unchanged since its inception, maintaining brand consistency. Minor adjustments have been made to the red for digital clarity.
Where Jollibee uses each color
- Primary
Used for logos, main navigation bars, and call-to-action buttons.
- Secondary
Appears in mascots, highlights, and promotional banners.
- Accent
Used for text, icons, and background fills to provide contrast.
- Backgrounds
Light gray and white are used for website and app backgrounds.
- Text
Charcoal and medium gray are used for primary and secondary text across digital and print.
- Semantic
Green, orange, red, and blue are used for success, warning, error, and informational states in UI.
Jollibee color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Jollibee red is #D6001C. This is the primary color used in logos and branding.
Jollibee Red (#D6001C) is RGB(214, 0, 28) and CMYK(0, 100, 87, 16). These values are used for digital and print consistency.
Jollibee uses Jollibee Light Gray (#F7F7F7), Border Gray (#E0E0E0), and Charcoal (#212121) for backgrounds, borders, and text. These ensure readability and a clean layout.
Use Jollibee Red (#D6001C) for primary actions and branding, with yellow (#F7D117) for highlights. Neutrals and semantic colors support UI clarity and accessibility.
The secondary color is Jollibee Yellow, #F7D117, and the accent is Jollibee White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
3 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Jollibee's colors consistently when it generates UI.
Make something in the spirit of Jollibee
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.