Careem color palette
TravelCareem's color identity centers on its distinctive green, paired with clean neutrals and subtle accents for clarity and approachability across digital and physical touchpoints.
careem.comCareem colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Careem GreenPrimary0, 224, 123
- Careem TealSecondary0, 179, 134
- Careem YellowAccent255, 214, 0
Surfaces
Page, cards and dividers.- Careem WhiteBackground255, 255, 255
- Careem Light GraySurface245, 246, 246
- Careem Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Careem CharcoalText35, 39, 43
- Careem Medium GraySecondary text108, 117, 125
- Careem Muted GrayMuted text173, 181, 189
Semantic
Feedback and state colors.- Careem GreenSuccess0, 224, 123
- Careem YellowWarning255, 214, 0
- Careem RedError255, 59, 48
- Careem TealInfo0, 179, 134
Use Careem's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
careem-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B386;
--error: #FF3B30;
--accent: #FFD600;
--border: #E0E0E0;
--primary: #00E07B;
--success: #00E07B;
--surface: #F5F6F6;
--warning: #FFD600;
--secondary: #00B386;
--text-muted: #ADB5BD;
--background: #FFFFFF;
--text-primary: #23272B;
--text-secondary: #6C757D;
}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.0:1
Pass
Text on surface
Needs 4.5:1 for body text
13.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.3:1
Fail
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Careem gray and neutral colors
The quiet part of the Careem palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Careem WhiteBackground
- HEX
- RGB
- HSL
- Careem Light GraySurface
- HEX
- RGB
- HSL
- Careem Border GrayBorder
- HEX
- RGB
- HSL
- Careem CharcoalText
- HEX
- RGB
- HSL
- Careem Medium GraySecondary text
- HEX
- RGB
- HSL
- Careem Muted GrayMuted text
- HEX
- RGB
- HSL
About Careem's colors
Careem's palette is built around a vibrant green, evoking freshness and reliability, complemented by yellow for energy and grays for clarity. The system ensures high contrast and accessibility across digital and physical environments.
Primary green is paired with yellow for highlights.
Neutrals provide balance and readability.
Accent colors are used sparingly for calls to action.
Psychology
Green communicates growth, trust, and approachability, aligning with Careem's brand values. Yellow adds a sense of optimism and draws attention to key actions.
Evolution
Careem's palette has remained stable since its 2018 rebrand, focusing on consistency across platforms. Minor adjustments have been made to gray tones for improved UI contrast.
Where Careem uses each color
- Primary
Careem Green is used for main buttons, navigation highlights, and brand marks.
- Secondary
Careem Teal appears in secondary buttons and supporting UI elements.
- Accent
Careem Yellow is used for notifications, highlights, and promotional banners.
- Backgrounds
Careem White and Light Gray are used for app screens and web backgrounds.
- Text
Careem Charcoal is used for primary text, with Medium and Muted Grays for secondary and disabled text.
- Semantic
Green is used for success states, Yellow for warnings, and Red for errors in UI feedback.
Careem color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Careem brand color is Careem Green, with the hex code #00E07B.
Careem Green (#00E07B) in RGB is (0, 224, 123). For CMYK, it is approximately (100, 0, 45, 12).
Careem uses Careem Light Gray (#F5F6F6), Border Gray (#E0E0E0), Medium Gray (#6C757D), and Muted Gray (#ADB5BD) for backgrounds, borders, and text.
Use Careem Green (#00E07B) for primary actions and branding, with grays for backgrounds and text, and yellow or red only for highlights, warnings, or errors.
The secondary color is Careem Teal, #00B386, and the accent is Careem 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 Careem's colors consistently when it generates UI.
Make something in the spirit of Careem
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.