Tropicana color palette
Food & DrinkTropicana's color identity is centered around a vibrant green, reflecting freshness and natural ingredients, with supporting orange and yellow hues evoking citrus fruits. The palette is complemented by clean white and neutral grays for clarity and legibility.
tropicana.comTropicana colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Tropicana GreenPrimary0, 119, 73
- Tropicana OrangeSecondary245, 130, 32
- Tropicana YellowAccent255, 209, 0
Surfaces
Page, cards and dividers.- Tropicana WhiteBackground255, 255, 255
- Tropicana Light GraySurface245, 245, 245
- Tropicana Border GrayBorder209, 211, 212
Text
Three tiers of copy.- Tropicana CharcoalText34, 34, 34
- Tropicana Dark GraySecondary text77, 77, 79
- Tropicana Muted GrayMuted text140, 140, 140
Semantic
Feedback and state colors.- Tropicana Success GreenSuccess92, 184, 92
- Tropicana Warning YellowWarning255, 193, 7
- Tropicana Error RedError217, 83, 79
- Tropicana Info BlueInfo91, 192, 222
Use Tropicana's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
tropicana-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #5BC0DE;
--error: #D9534F;
--accent: #FFD100;
--border: #D1D3D4;
--primary: #007749;
--success: #5CB85C;
--surface: #F5F5F5;
--warning: #FFC107;
--secondary: #F58220;
--text-muted: #8C8C8C;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #4D4D4F;
}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.9: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
8.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.7:1
Pass
Muted text on background
Needs 3:1 for large text
3.4:1
Pass
Muted text on surface
Needs 3:1 for large text
3.1:1
Pass
Tropicana gray and neutral colors
The quiet part of the Tropicana palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Tropicana WhiteBackground
- HEX
- RGB
- HSL
- Tropicana Light GraySurface
- HEX
- RGB
- HSL
- Tropicana Border GrayBorder
- HEX
- RGB
- HSL
- Tropicana CharcoalText
- HEX
- RGB
- HSL
- Tropicana Dark GraySecondary text
- HEX
- RGB
- HSL
- Tropicana Muted GrayMuted text
- HEX
- RGB
- HSL
About Tropicana's colors
Tropicana's palette uses a dominant green to signal freshness and health, with orange and yellow accents to evoke citrus and vitality. White and gray neutrals provide balance and readability.
Primary green is complemented by orange and yellow for a citrus feel.
Neutrals support legibility and clean layouts.
Accent colors highlight calls to action and product features.
Psychology
Green communicates naturalness, growth, and health, aligning with Tropicana's brand promise. Orange and yellow evoke energy, optimism, and the flavor of citrus fruits.
Evolution
Tropicana's palette has remained consistent, with green as the anchor since the brand's inception. Recent updates have refined the supporting neutrals for a more modern and accessible UI.
Where Tropicana uses each color
- Primary
Tropicana Green is used in the logo, navigation, and key brand elements.
- Secondary
Tropicana Orange highlights packaging details and promotional banners.
- Accent
Tropicana Yellow is used for call-to-action buttons and product highlights.
- Backgrounds
Tropicana White and Light Gray are used for backgrounds on web and print materials.
- Text
Charcoal and Dark Gray are used for primary and secondary text, ensuring readability.
- Semantic
Success, warning, error, and info colors are used for alerts and status indicators in digital interfaces.
Tropicana color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Tropicana brand color is Tropicana Green, hex code #007749.
Tropicana Green (#007749) is RGB(0, 119, 73) and CMYK(100, 0, 39, 53).
Tropicana uses Tropicana Light Gray (#F5F5F5), Border Gray (#D1D3D4), Charcoal (#222222), Dark Gray (#4D4D4F), and Muted Gray (#8C8C8C) for UI and text elements.
Use Tropicana Green (#007749) for primary branding, with orange (#F58220) and yellow (#FFD100) as accents. Neutrals and semantic colors support UI clarity and accessibility.
The secondary color is Tropicana Orange, #F58220, and the accent is Tropicana Yellow, #FFD100. Together with the primary they make up the three brand colors at the top of this page.
6 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 Tropicana's colors consistently when it generates UI.
Make something in the spirit of Tropicana
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.