Grab color palette
TravelGrab's color identity centers on a vibrant green, reflecting growth, trust, and mobility, complemented by a clean, neutral UI palette. The brand uses green as a signature across digital and physical touchpoints.
grab.comGrab colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Grab GreenPrimary0, 177, 79
- Grab Deep GreenSecondary0, 153, 67
- Grab YellowAccent255, 214, 0
Surfaces
Page, cards and dividers.- Grab WhiteBackground255, 255, 255
- Grab Light GraySurface245, 245, 245
- Grab Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Grab BlackText33, 33, 33
- Grab GraySecondary text117, 117, 117
- Grab Muted GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- Grab Success GreenSuccess0, 177, 79
- Grab Warning YellowWarning255, 214, 0
- Grab Error RedError229, 57, 53
- Grab Info BlueInfo2, 136, 209
Use Grab's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
grab-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0288D1;
--error: #E53935;
--accent: #FFD600;
--border: #E0E0E0;
--primary: #00B14F;
--success: #00B14F;
--surface: #F5F5F5;
--warning: #FFD600;
--secondary: #009943;
--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
Grab gray and neutral colors
The quiet part of the Grab palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Grab WhiteBackground
- HEX
- RGB
- HSL
- Grab Light GraySurface
- HEX
- RGB
- HSL
- Grab Border GrayBorder
- HEX
- RGB
- HSL
- Grab BlackText
- HEX
- RGB
- HSL
- Grab GraySecondary text
- HEX
- RGB
- HSL
- Grab Muted GrayMuted text
- HEX
- RGB
- HSL
About Grab's colors
Grab's palette is built around a lively green, supported by neutral grays and bright accent colors for clarity and accessibility. The scheme ensures strong brand recognition and functional UI contrast.
Primary green is paired with white for high contrast.
Accent yellow highlights calls to action.
Neutral grays support legibility and structure.
Psychology
Green conveys reliability, safety, and growth, aligning with Grab's role in transportation and services. Yellow adds energy and draws attention without overwhelming the core green.
Evolution
Grab's palette has remained stable since its rebrand, consistently using green as its anchor. Minor adjustments have been made to accent and neutral tones for improved digital accessibility.
Where Grab uses each color
- Primary
Grab Green is used for main navigation bars, app headers, and primary buttons.
- Secondary
Grab Deep Green appears in secondary buttons and hover states.
- Accent
Grab Yellow is used for highlights, badges, and promotional banners.
- Backgrounds
Grab White and Light Gray are used for app backgrounds and card surfaces.
- Text
Grab Black and Gray are used for primary and secondary text throughout the UI.
- Semantic
Success, warning, error, and info colors are used for status indicators and alerts.
Grab color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Grab primary color hex code is #00B14F. This green is used across all major brand assets.
Grab Green (#00B14F) in RGB is (0, 177, 79) and in CMYK is (100, 0, 55, 31). Use these for print and digital consistency.
Grab uses #F5F5F5 (Light Gray), #E0E0E0 (Border Gray), #212121 (Black), #757575 (Gray), and #BDBDBD (Muted Gray) for backgrounds, borders, and text. These neutrals ensure clarity and accessibility in the UI.
Use Grab Green (#00B14F) for primary actions and branding, with neutrals for backgrounds and text. Accent and semantic colors should highlight important information or statuses.
The secondary color is Grab Deep Green, #009943, and the accent is Grab 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 Grab's colors consistently when it generates UI.
Make something in the spirit of Grab
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.