Fanta color palette
Food & DrinkFanta's color identity is defined by its vibrant orange, representing the drink's signature flavor and playful personality. The palette features bold, energetic hues with distinctive blue and white accents.
fanta.comFanta colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Fanta OrangePrimary255, 131, 0
- Fanta BlueSecondary0, 61, 165
- Fanta WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Fanta CreamBackground255, 243, 224
- Fanta Light GraySurface245, 245, 245
- Fanta Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Fanta CharcoalText34, 34, 34
- Fanta Medium GraySecondary text102, 102, 102
- Fanta Muted GrayMuted text166, 166, 166
Semantic
Feedback and state colors.- Fanta Lime GreenSuccess126, 217, 87
- Fanta YellowWarning255, 179, 0
- Fanta RedError229, 57, 53
- Fanta Sky BlueInfo38, 167, 222
Use Fanta's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
fanta-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #26A7DE;
--error: #E53935;
--accent: #FFFFFF;
--border: #E0E0E0;
--primary: #FF8300;
--success: #7ED957;
--surface: #F5F5F5;
--warning: #FFB300;
--secondary: #003DA5;
--text-muted: #A6A6A6;
--background: #FFF3E0;
--text-primary: #222222;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.5:1
Pass
Text on surface
Needs 4.5:1 for body text
14.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Fanta background, border and text colors
The quiet part of the Fanta palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Fanta CreamBackground
- HEX
- RGB
- HSL
- Fanta Light GraySurface
- HEX
- RGB
- HSL
- Fanta Border GrayBorder
- HEX
- RGB
- HSL
- Fanta CharcoalText
- HEX
- RGB
- HSL
- Fanta Medium GraySecondary text
- HEX
- RGB
- HSL
- Fanta Muted GrayMuted text
- HEX
- RGB
- HSL
About Fanta's colors
Fanta's palette is anchored by a vivid orange, complemented by deep blue and clean white for contrast and legibility. The use of bright, saturated colors reflects the brand's energetic and youthful image.
Orange and blue are complementary, creating visual impact.
White provides clarity and contrast for text and logos.
Secondary colors support flavor variants and UI feedback.
Psychology
Orange conveys fun, excitement, and refreshment, aligning with Fanta's playful brand. Blue adds trustworthiness and helps the orange stand out.
Evolution
Fanta's orange has remained consistent, with minor adjustments for digital clarity. The supporting palette has expanded to include more nuanced grays and accent colors for modern UI needs.
Where Fanta uses each color
- Primary
Fanta Orange is used for the logo, main buttons, and packaging backgrounds.
- Secondary
Fanta Blue appears in the logo shadow, navigation bars, and promotional graphics.
- Accent
Fanta White is used for text, icons, and highlights on packaging and digital assets.
- Backgrounds
Fanta Cream is used as a background on web pages and product displays.
- Text
Fanta Charcoal and Medium Gray are used for primary and secondary text in digital and print.
- Semantic
Lime Green, Yellow, Red, and Sky Blue are used for status indicators, flavor variants, and notifications.
Fanta color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Fanta brand color is Fanta Orange, with hex code #FF8300.
Fanta Orange (#FF8300) is RGB(255, 131, 0) and CMYK(0, 49, 100, 0).
Fanta uses Fanta Light Gray (#F5F5F5), Border Gray (#E0E0E0), Medium Gray (#666666), and Muted Gray (#A6A6A6) for UI backgrounds and text.
Use Fanta Orange (#FF8300) for primary branding elements, with Fanta Blue (#003DA5) and White (#FFFFFF) as supporting and accent colors. Grays and semantic colors are reserved for UI, text, and status indicators.
The secondary color is Fanta Blue, #003DA5, and the accent is Fanta White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
4 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 Fanta's colors consistently when it generates UI.
Make something in the spirit of Fanta
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.