Ola color palette
TravelOla's brand color identity is centered around a distinctive, vibrant yellow paired with deep black and neutral greys, reflecting its energetic and urban mobility focus. The palette is simple, bold, and highly recognizable across digital and physical touchpoints.
olacabs.comOla colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Ola YellowPrimary249, 201, 0
- Ola BlackSecondary0, 0, 0
- Ola WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Ola Light GreyBackground245, 245, 245
- Ola Surface GreySurface224, 224, 224
- Ola Border GreyBorder209, 209, 209
Text
Three tiers of copy.- Ola Text BlackText33, 33, 33
- Ola Text GreySecondary text117, 117, 117
- Ola Muted GreyMuted text189, 189, 189
Semantic
Feedback and state colors.- Ola Success GreenSuccess67, 160, 71
- Ola Warning AmberWarning255, 160, 0
- Ola Error RedError211, 47, 47
- Ola Info BlueInfo25, 118, 210
Use Ola's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
ola-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #FFFFFF;
--border: #D1D1D1;
--primary: #F9C900;
--success: #43A047;
--surface: #E0E0E0;
--warning: #FFA000;
--secondary: #000000;
--text-muted: #BDBDBD;
--background: #F5F5F5;
--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
14.8:1
Pass
Text on surface
Needs 4.5:1 for body text
12.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.2:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
3.5:1
Fail
Muted text on background
Needs 3:1 for large text
1.7:1
Fail
Muted text on surface
Needs 3:1 for large text
1.4:1
Fail
Ola gray and neutral colors
The quiet part of the Ola palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Ola Light GreyBackground
- HEX
- RGB
- HSL
- Ola Surface GreySurface
- HEX
- RGB
- HSL
- Ola Border GreyBorder
- HEX
- RGB
- HSL
- Ola Text BlackText
- HEX
- RGB
- HSL
- Ola Text GreySecondary text
- HEX
- RGB
- HSL
- Ola Muted GreyMuted text
- HEX
- RGB
- HSL
About Ola's colors
Ola's color palette is built on high-contrast yellow and black, ensuring strong visibility and instant brand recognition. The supporting greys and accent colors maintain clarity and usability across digital interfaces.
Primary yellow paired with black for maximum contrast.
Neutral greys balance the vibrancy of yellow.
Accent white used for clarity and separation.
Psychology
Yellow conveys energy, optimism, and approachability, aligning with Ola's mission to make urban mobility accessible. Black adds a sense of reliability and sophistication.
Evolution
Ola's palette has remained consistent since its inception, with the yellow and black combination becoming synonymous with the brand. Minor adjustments to grey tones have been made for improved digital accessibility.
Where Ola uses each color
- Primary
Ola Yellow is used for key brand elements, CTAs, and vehicle livery.
- Secondary
Ola Black is prominent in navigation bars, app headers, and logo backgrounds.
- Accent
Ola White is used for text on colored backgrounds and as a neutral separator.
- Backgrounds
Ola Light Grey is the default background for app screens and web pages.
- Text
Ola Text Black and Text Grey are used for primary and secondary text respectively across all platforms.
- Semantic
Success, warning, error, and info colors are used in notifications, status indicators, and feedback messages.
Ola color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Ola brand color is Ola Yellow, hex code #F9C900.
Ola Yellow (#F9C900) is RGB(249, 201, 0). For CMYK, use (0, 19, 100, 2).
Ola uses Ola Black (#000000) for deep backgrounds and Ola Light Grey (#F5F5F5) for UI surfaces. These provide contrast and accessibility in digital interfaces.
Use Ola Yellow (#F9C900) for highlights and CTAs, Ola Black (#000000) for headers and backgrounds, and Ola Light Grey (#F5F5F5) for surfaces. Maintain high contrast for readability and brand consistency.
The secondary color is Ola Black, #000000, and the accent is Ola White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
2 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 Ola's colors consistently when it generates UI.
Make something in the spirit of Ola
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.