Lyft color palette
AutomotiveLyft's color identity is defined by its vibrant pink primary, complemented by a clean, modern neutral palette for UI clarity. The brand's colors are designed for high visibility and accessibility across digital and physical touchpoints.
lyft.comLyft colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Lyft PinkPrimary255, 0, 191
- Lyft MidnightSecondary17, 17, 31
- Lyft AquaAccent0, 242, 234
Surfaces
Page, cards and dividers.- Lyft WhiteBackground255, 255, 255
- Lyft Light GraySurface246, 246, 246
- Lyft Border GrayBorder226, 226, 234
Text
Three tiers of copy.- Lyft MidnightText17, 17, 31
- Lyft Secondary GraySecondary text110, 110, 126
- Lyft Muted GrayMuted text176, 176, 195
Semantic
Feedback and state colors.- Lyft Success GreenSuccess0, 196, 140
- Lyft Warning YellowWarning255, 214, 0
- Lyft Error RedError255, 59, 48
- Lyft Info BlueInfo0, 122, 255
Use Lyft's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
lyft-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #007AFF;
--error: #FF3B30;
--accent: #00F2EA;
--border: #E2E2EA;
--primary: #FF00BF;
--success: #00C48C;
--surface: #F6F6F6;
--warning: #FFD600;
--secondary: #11111F;
--text-muted: #B0B0C3;
--background: #FFFFFF;
--text-primary: #11111F;
--text-secondary: #6E6E7E;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.7:1
Pass
Text on surface
Needs 4.5:1 for body text
17.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
2.0:1
Fail
Lyft background, border and text colors
The quiet part of the Lyft palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Lyft WhiteBackground
- HEX
- RGB
- HSL
- Lyft Light GraySurface
- HEX
- RGB
- HSL
- Lyft Border GrayBorder
- HEX
- RGB
- HSL
- Lyft MidnightText
- HEX
- RGB
- HSL
- Lyft Secondary GraySecondary text
- HEX
- RGB
- HSL
- Lyft Muted GrayMuted text
- HEX
- RGB
- HSL
About Lyft's colors
Lyft's palette centers on a bold, energetic pink paired with deep neutrals and crisp accents for clarity and contrast. The color system is designed for accessibility and instant brand recognition.
Primary pink contrasts with dark neutrals for legibility.
Aqua accent adds vibrancy and highlights key actions.
Grays provide structure and hierarchy in UI elements.
Psychology
The primary pink conveys approachability, friendliness, and energy, distinguishing Lyft from competitors. Neutrals and accents support clarity, trust, and ease of use.
Evolution
Lyft's palette has remained consistent since its major rebrand in 2019, maintaining the signature pink as the core identity. Minor adjustments to neutrals and accent colors have improved accessibility and digital performance.
Where Lyft uses each color
- Primary
Lyft Pink is used for main buttons, highlights, and brand marks across digital and physical assets.
- Secondary
Lyft Midnight appears in navigation bars, footers, and as a primary text color.
- Accent
Lyft Aqua is used for interactive elements, notifications, and to draw attention to key actions.
- Backgrounds
Lyft White and Lyft Light Gray provide clean backgrounds for app screens and web pages.
- Text
Lyft Midnight, Secondary Gray, and Muted Gray are used for primary, secondary, and disabled text respectively.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for status indicators and alerts throughout the UI.
Lyft color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Lyft primary color is Lyft Pink, hex code #FF00BF. This should be used for all major brand and UI highlights.
Lyft Pink (#FF00BF) in RGB is (255, 0, 191) and in CMYK is (0, 100, 0, 0). Use these values for print and digital consistency.
Lyft uses Lyft Midnight (#11111F), Lyft Light Gray (#F6F6F6), Lyft Border Gray (#E2E2EA), Lyft Secondary Gray (#6E6E7E), and Lyft Muted Gray (#B0B0C3) for backgrounds, borders, and text. These neutrals provide structure and accessibility in the UI.
Always use the official hex codes for digital and print applications. Primary and accent colors highlight actions, while neutrals structure layouts and ensure readability.
The secondary color is Lyft Midnight, #11111F, and the accent is Lyft Aqua, #00F2EA. 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 Lyft's colors consistently when it generates UI.
Make something in the spirit of Lyft
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.