Tokopedia color palette
EcommerceTokopedia's color identity is defined by its distinctive green, representing growth and trust, complemented by a clean, modern neutral palette. The brand's UI leverages green for action and navigation, with supporting grays for clarity and accessibility.
tokopedia.comTokopedia colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Tokopedia GreenPrimary3, 172, 14
- Tokopedia Deep GreenSecondary0, 136, 12
- Tokopedia YellowAccent255, 214, 0
Surfaces
Page, cards and dividers.- Tokopedia WhiteBackground255, 255, 255
- Tokopedia Light GraySurface245, 245, 245
- Tokopedia Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Tokopedia BlackText33, 33, 33
- Tokopedia GraySecondary text117, 117, 117
- Tokopedia Muted GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- Tokopedia Success GreenSuccess3, 172, 14
- Tokopedia Warning OrangeWarning255, 179, 0
- Tokopedia Error RedError229, 57, 53
- Tokopedia Info BlueInfo2, 136, 209
Use Tokopedia's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
tokopedia-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0288D1;
--error: #E53935;
--accent: #FFD600;
--border: #E0E0E0;
--primary: #03AC0E;
--success: #03AC0E;
--surface: #F5F5F5;
--warning: #FFB300;
--secondary: #00880C;
--text-muted: #BDBDBD;
--background: #FFFFFF;
--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
16.1:1
Pass
Text on surface
Needs 4.5:1 for body text
14.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.2:1
Fail
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
1.7:1
Fail
Tokopedia gray and neutral colors
The quiet part of the Tokopedia palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Tokopedia WhiteBackground
- HEX
- RGB
- HSL
- Tokopedia Light GraySurface
- HEX
- RGB
- HSL
- Tokopedia Border GrayBorder
- HEX
- RGB
- HSL
- Tokopedia BlackText
- HEX
- RGB
- HSL
- Tokopedia GraySecondary text
- HEX
- RGB
- HSL
- Tokopedia Muted GrayMuted text
- HEX
- RGB
- HSL
About Tokopedia's colors
Tokopedia's palette is anchored by a vibrant green, symbolizing growth and reliability, with supporting neutrals for clarity. Accent yellow and semantic colors provide functional contrast and accessibility.
Primary green is complemented by yellow for highlights.
Neutral grays balance the vivid brand colors.
Semantic colors align with standard UI feedback patterns.
Psychology
Green evokes trust, safety, and prosperity, aligning with Tokopedia's marketplace values. Yellow adds energy and draws attention to key actions.
Evolution
Tokopedia's core green has remained consistent since its inception, reinforcing brand recognition. The supporting palette has evolved to include more nuanced grays and accessible semantic colors for digital interfaces.
Where Tokopedia uses each color
- Primary
Used for main navigation bars, primary buttons, and key brand elements.
- Secondary
Applied to secondary buttons, hover states, and some iconography.
- Accent
Highlights promotions, notifications, and call-to-action elements.
- Backgrounds
White and light gray backgrounds are used for app screens and website sections.
- Text
Primary black for main text, with gray and muted gray for secondary and disabled text.
- Semantic
Success, warning, error, and info colors are used for alerts, badges, and system feedback.
Tokopedia color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Tokopedia brand color is Tokopedia Green, hex code #03AC0E.
Tokopedia Green (#03AC0E) is RGB(3, 172, 14); for CMYK, it is approximately (98%, 0%, 92%, 33%).
Tokopedia uses #F5F5F5 (Light Gray), #E0E0E0 (Border Gray), #757575 (Gray), and #BDBDBD (Muted Gray) for its neutral palette.
Use Tokopedia Green (#03AC0E) for primary actions and navigation, with supporting grays for backgrounds and text. Accent and semantic colors should highlight key information and feedback only.
The secondary color is Tokopedia Deep Green, #00880C, and the accent is Tokopedia Yellow, #FFD600. 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 Tokopedia's colors consistently when it generates UI.
Make something in the spirit of Tokopedia
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.