Bird color palette
TravelBird is a micromobility company known for its distinctive black and white branding, with a signature Bird Black as its primary color. The palette is minimal and modern, emphasizing clarity and simplicity in digital and physical touchpoints.
bird.coBird colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Bird BlackPrimary0, 0, 0
- Bird WhiteSecondary255, 255, 255
- Bird BlueAccent0, 178, 255
Surfaces
Page, cards and dividers.- Bird Light GrayBackground246, 246, 246
- Bird Surface GraySurface224, 224, 224
- Bird Border GrayBorder209, 209, 209
Text
Three tiers of copy.- Bird BlackText0, 0, 0
- Bird Dark GraySecondary text74, 74, 74
- Bird Muted GrayMuted text136, 136, 136
Semantic
Feedback and state colors.- Bird Success GreenSuccess0, 196, 140
- Bird Warning YellowWarning255, 184, 0
- Bird Error RedError255, 74, 74
- Bird BlueInfo0, 178, 255
Use Bird's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
bird-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B2FF;
--error: #FF4A4A;
--accent: #00B2FF;
--border: #D1D1D1;
--primary: #000000;
--success: #00C48C;
--surface: #E0E0E0;
--warning: #FFB800;
--secondary: #FFFFFF;
--text-muted: #888888;
--background: #F6F6F6;
--text-primary: #000000;
--text-secondary: #4A4A4A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.4:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.7:1
Pass
Muted text on background
Needs 3:1 for large text
3.3:1
Pass
Muted text on surface
Needs 3:1 for large text
2.7:1
Fail
Bird gray and neutral colors
The quiet part of the Bird palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Bird Light GrayBackground
- HEX
- RGB
- HSL
- Bird Surface GraySurface
- HEX
- RGB
- HSL
- Bird Border GrayBorder
- HEX
- RGB
- HSL
- Bird BlackText
- HEX
- RGB
- HSL
- Bird Dark GraySecondary text
- HEX
- RGB
- HSL
- Bird Muted GrayMuted text
- HEX
- RGB
- HSL
About Bird's colors
Bird's color system is built on a monochrome foundation, with black and white as core elements and blue as a digital accent. The palette is designed for maximum contrast and legibility in urban environments.
Primary black and white create strong visual hierarchy.
Accent blue is used for interactive elements and highlights.
Grays provide subtle separation for surfaces and borders.
Psychology
Black conveys sophistication, reliability, and authority, while white adds clarity and openness. Blue is used sparingly to signal action and trust in digital contexts.
Evolution
Bird's palette has remained consistent since launch, emphasizing black and white for brand recognition. The blue accent was introduced for digital clarity and to differentiate interactive elements.
Where Bird uses each color
- Primary
Bird Black is used for the logo, navigation bars, and primary text across the website and app.
- Secondary
Bird White serves as the main background color and is used extensively in app screens and vehicle branding.
- Accent
Bird Blue highlights call-to-action buttons, links, and active states in the digital interface.
- Backgrounds
Bird Light Gray is used for app and web backgrounds to provide a neutral, clean canvas.
- Text
Bird Black and Bird Dark Gray are used for primary and secondary text for optimal readability.
- Semantic
Bird Success Green, Warning Yellow, and Error Red are used for status indicators and alerts throughout the app.
Bird color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Bird brand color is Bird Black, with the hex code #000000. This color is central to Bird's visual identity.
Bird Black (#000000) in RGB is (0, 0, 0) and in CMYK is (0, 0, 0, 100). These values ensure consistent reproduction across digital and print.
Bird uses a range of grays including Bird Light Gray (#F6F6F6), Bird Surface Gray (#E0E0E0), Bird Border Gray (#D1D1D1), Bird Dark Gray (#4A4A4A), and Bird Muted Gray (#888888). These provide structure and hierarchy in the interface.
Use Bird Black and Bird White for core branding and backgrounds, with Bird Blue reserved for interactive elements. Semantic colors like green, yellow, and red are for status and alerts only.
The secondary color is Bird White, #FFFFFF, and the accent is Bird Blue, #00B2FF. Together with the primary they make up the three brand colors at the top of this page.
5 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 Bird's colors consistently when it generates UI.
Make something in the spirit of Bird
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.