Sprite color palette
Food & DrinkSprite's brand identity is defined by its vibrant green, accented with yellow and silver, reflecting its lemon-lime flavor and refreshing image. The palette is bold, energetic, and instantly recognizable across packaging and digital platforms.
sprite.comSprite colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Sprite GreenPrimary0, 133, 66
- Sprite YellowSecondary255, 214, 0
- Sprite LimeAccent200, 212, 0
Surfaces
Page, cards and dividers.- Sprite WhiteBackground255, 255, 255
- Sprite SilverSurface244, 244, 244
- Sprite GrayBorder209, 211, 212
Text
Three tiers of copy.- Sprite BlackText34, 34, 34
- Sprite Dark GraySecondary text94, 94, 94
- Sprite Light GrayMuted text167, 169, 172
Semantic
Feedback and state colors.- Sprite Success GreenSuccess67, 176, 42
- Sprite Warning YellowWarning255, 194, 14
- Sprite Error RedError224, 60, 49
- Sprite Info BlueInfo0, 156, 166
Use Sprite's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
sprite-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009CA6;
--error: #E03C31;
--accent: #C8D400;
--border: #D1D3D4;
--primary: #008542;
--success: #43B02A;
--surface: #F4F4F4;
--warning: #FFC20E;
--secondary: #FFD600;
--text-muted: #A7A9AC;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #5E5E5E;
}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.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.9:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
Sprite gray and neutral colors
The quiet part of the Sprite palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Sprite WhiteBackground
- HEX
- RGB
- HSL
- Sprite SilverSurface
- HEX
- RGB
- HSL
- Sprite GrayBorder
- HEX
- RGB
- HSL
- Sprite BlackText
- HEX
- RGB
- HSL
- Sprite Dark GraySecondary text
- HEX
- RGB
- HSL
- Sprite Light GrayMuted text
- HEX
- RGB
- HSL
About Sprite's colors
Sprite's palette is anchored by a vivid green, complemented by yellow and silver for freshness and energy. The colors evoke citrus, clarity, and a cool, refreshing sensation.
Primary green and yellow create a high-contrast, energetic pairing.
Silver and gray tones provide neutral balance for digital UI.
Accent lime highlights brand vibrancy and flavor cues.
Psychology
Green conveys freshness, health, and natural qualities, while yellow adds a sense of energy and optimism. The combination is designed to evoke thirst-quenching refreshment.
Evolution
Sprite's color palette has remained consistent since its early days, with only subtle adjustments to the green and yellow for digital clarity. The addition of silver and gray tones in recent years supports modern UI and packaging needs.
Where Sprite uses each color
- Primary
Sprite Green is used for logos, packaging backgrounds, and primary buttons on the website.
- Secondary
Sprite Yellow appears in the lemon-lime iconography and as a highlight on packaging and call-to-action elements.
- Accent
Sprite Lime is used for accent graphics, flavor cues, and secondary buttons.
- Backgrounds
Sprite White and Sprite Silver serve as backgrounds for web pages and product photography.
- Text
Sprite Black and Sprite Dark Gray are used for primary and secondary text on digital and print materials.
- Semantic
Success, warning, and error colors are used in forms, notifications, and interactive UI elements.
Sprite color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Sprite brand green is #008542. This color is used prominently in the logo and across all brand materials.
Sprite Green (#008542) in RGB is (0, 133, 66) and in CMYK is (100, 0, 50, 48). These values ensure consistency in both digital and print applications.
Sprite uses Sprite Silver (#F4F4F4), Sprite Gray (#D1D3D4), and Sprite Light Gray (#A7A9AC) for backgrounds, borders, and muted text. These neutrals provide balance to the vibrant primary and accent colors.
Use Sprite Green (#008542) for primary branding, Sprite Yellow (#FFD600) for highlights, and Sprite Lime (#C8D400) for accents. Neutrals and semantic colors support UI clarity and accessibility.
The secondary color is Sprite Yellow, #FFD600, and the accent is Sprite Lime, #C8D400. 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 Sprite's colors consistently when it generates UI.
Make something in the spirit of Sprite
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.