Lyft colors
The Lyft color palette has 5 colors: Lyft Pink #FF00BF, Black Cherry #1D0C17, Interactive purple #820076, Off-white #F1F0EC and Orange #FF5312. Below are HEX, RGB, HSL and OKLCH codes, contrast checks, CSS and Tailwind variables, all from its live website code checked on 16 October 2026.
Lyft color codes
| Color | Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Lyft Pink | Primary | #FF00BF | rgb(255, 0, 191) | hsl(315, 100%, 50%) | oklch(66.8% 0.286 343.8) |
| Black Cherry | Text | #1D0C17 | rgb(29, 12, 23) | hsl(321, 41%, 8%) | oklch(18.5% 0.035 341.8) |
| Interactive purple | Secondary | #820076 | rgb(130, 0, 118) | hsl(306, 100%, 25%) | oklch(41.8% 0.187 333.4) |
| Off-white | Background | #F1F0EC | rgb(241, 240, 236) | hsl(48, 15%, 94%) | oklch(95.5% 0.005 95.1) |
| Orange | Accent | #FF5312 | rgb(255, 83, 18) | hsl(16, 100%, 54%) | oklch(67.4% 0.218 37.3) |
Select a color to open its own page with tints, shades, harmonies and every color format, or open the whole set in the palette generator.
Where the Lyft colors come from
Lyft does not publish hex values in public brand guidelines, so these were read from the code of its live website (stylesheets and the SVG files it serves) on 16 October 2026. They are the colors www.lyft.com actually renders, which can differ slightly from print or logo colors.
- Source (live website CSS or SVG): https://cdn.lyft.com/coreui/base.css checked 2026-10-16
Lyft color contrast
Black text on Lyft Pink has a contrast ratio of 6.00:1 and passes WCAG AA for body text. Used as a text color, Lyft Pink reaches 3.49:1 on white and 6.00:1 on black. Ratios are WCAG 2 (truncated, never rounded up); APCA Lc is shown as a second opinion.
| Pair | WCAG 2 ratio | WCAG 2 result | APCA | APCA guidance |
|---|---|---|---|---|
| White on Lyft Pink | 3.49:1 | AA large text | Lc -65.2 | Content text, not long reading |
| Black on Lyft Pink | 6.00:1 | AA | Lc 44.3 | Non-text elements, placeholder text |
| White on Black Cherry | 18.79:1 | AAA | Lc -107.3 | Preferred for body text |
| Black on Black Cherry | 1.11:1 | Fails | Lc 0.0 | Not readable |
| White on Interactive purple | 9.49:1 | AAA | Lc -94.3 | Preferred for body text |
| Black on Interactive purple | 2.21:1 | Fails | Lc 14.2 | Not readable |
| White on Off-white | 1.14:1 | Fails | Lc -7.6 | Not readable |
| Black on Off-white | 18.41:1 | AAA | Lc 97.1 | Preferred for body text |
| White on Orange | 3.23:1 | AA large text | Lc -63.7 | Content text, not long reading |
| Black on Orange | 6.49:1 | AA | Lc 45.8 | Large or bold text, headings |
| Pair | WCAG 2 ratio | WCAG 2 result | APCA | APCA guidance |
|---|---|---|---|---|
| Black Cherry on Off-white | 16.48:1 | AAA | Lc 96.3 | Preferred for body text |
| Interactive purple on Off-white | 8.32:1 | AAA | Lc 80.8 | Fine for body text |
| Black Cherry on Orange | 5.81:1 | AA | Lc 45.0 | Non-text elements, placeholder text |
| Black Cherry on Lyft Pink | 5.37:1 | AA | Lc 43.5 | Non-text elements, placeholder text |
Lyft colors in CSS and Tailwind
Copy the Lyft palette as CSS custom properties or as a Tailwind CSS v4 theme. The last snippet is an 11-step Tailwind scale (50 to 950) generated in OKLCH from Lyft Pink, for hover states, borders and tinted backgrounds.
:root {
--lyft-pink: #FF00BF;
--lyft-black-cherry: #1D0C17;
--lyft-interactive-purple: #820076;
--lyft-off-white: #F1F0EC;
--lyft-orange: #FF5312;
}@import "tailwindcss";
@theme {
--color-lyft-pink: #FF00BF;
--color-lyft-black-cherry: #1D0C17;
--color-lyft-interactive-purple: #820076;
--color-lyft-off-white: #F1F0EC;
--color-lyft-orange: #FF5312;
}@theme {
--color-lyft-50: #FFF1F8;
--color-lyft-100: #FFE0F1;
--color-lyft-200: #FFC5E6;
--color-lyft-300: #FF9BD7;
--color-lyft-400: #F958C3;
--color-lyft-500: #FF00BF;
--color-lyft-600: #C80095;
--color-lyft-700: #A9007D;
--color-lyft-800: #8C0067;
--color-lyft-900: #750056;
--color-lyft-950: #490034;
}Named colors closest to the Lyft palette
The nearest named color to each brand color, measured as perceptual distance (ΔE OK) in OKLab. Under 0.02 is hard to tell apart; above 0.05 the difference is easy to see.
| Brand color | HEX | Nearest named color | Named HEX | ΔE OK |
|---|---|---|---|---|
| Lyft Pink | #FF00BF | Bright Pink | #FE01B1 | 0.021 |
| Black Cherry | #1D0C17 | Almost Black | #070D0D | 0.054 |
| Interactive purple | #820076 | Purple | #800080 | 0.018 |
| Off-white | #F1F0EC | Anti-Flash White | #EDF2F4 | 0.011 |
| Orange | #FF5312 | Orange Pant | #FB5607 | 0.009 |
Palettes like Lyft
Curated palettes that include a color close to Lyft Pink #FF00BF.
How to use a Lyft-style palette
- Lead with Lyft Pink #FF00BF for buttons, links and key highlights, with black text on it.
- Give most of the layout to Black Cherry #1D0C17 and Off-white #F1F0EC, about 60% of the screen, so Lyft Pink stands out.
- Keep Interactive purple and Orange for small accents (around 10%): status colors, illustrations or charts.
- As text on a white page, Lyft Pink reaches 3.49:1: it passes WCAG AA only for large or bold text (18pt, or 14pt bold).
To see how www.lyft.com uses these colors today, including backgrounds, text and dark mode, run it through the website color extractor. To turn Lyft Pink into a full light and dark color system with accessible roles, open it in the Color System Studio.
More brand colors
- Uber colors#000000 #FFFFFF #111111 #F6F6F6
- The Home Depot colors#F96302 #BC4B02 #333333 #FFFFFF
- Target colors#CC0000 #FAF2ED #333333 #FFFFFF
- Amazon colors#FF9900 #131921 #232F3E #FEBD69
- Walmart colors#0053E2 #FFC220 #001E60 #4DBDF5
- FedEx colors#4D148C #FF6200
- UPS colors#351C15 #FFC400 #F2F2F2
- IKEA colors#0058A3 #FFDB00 #007CC1 #111111
- Tiffany colors#81D8D0 #000000 #00A4B7
- Pepsi colors#0000FE #0025FF #0E0E96 #FF1400
- John Deere colors#367C2B #FFDE00 #185F11 #1B1C1B
- Barbie colors#FF3EB5 #FFD8EF
Trademarks
Frequently asked questions
What is the Lyft hex color?
The main Lyft color is Lyft Pink #FF00BF, which is rgb(255, 0, 191) in RGB. It comes from the CSS and SVG files of Lyft's live website (Lyft publishes no official hex values), checked on 16 October 2026.
What colors does Lyft use?
Lyft uses 5 core colors: Lyft Pink #FF00BF, Black Cherry #1D0C17, Interactive purple #820076, Off-white #F1F0EC and Orange #FF5312.
What is Lyft Pink in RGB, HSL and OKLCH?
Lyft Pink #FF00BF is rgb(255, 0, 191), hsl(315, 100%, 50%) and oklch(66.8% 0.286 343.8). The closest named color is Bright Pink #FE01B1.
Should text on Lyft Pink be white or black?
Black text reads better on Lyft Pink: it has a contrast ratio of 6.00:1, which passes WCAG AA for body text.
Where do these Lyft colors come from?
The hex values were read from Lyft's live website code at https://cdn.lyft.com/coreui/base.css on 16 October 2026. Contrast, RGB, HSL and OKLCH values on this page are calculated from those hex codes.
Can I use the Lyft colors in my own design?
Colors on their own are not owned, but Lyft's name, logo and the way it combines its colors are trademarks. Use these values to match Lyft when you refer to it, follow its official guidelines, and do not imply a link to Lyft in your own brand.
Use the Lyft colors
Check www.lyft.com live, build a color system from Lyft Pink, or remix the palette.