Bumble color palette
SocialBumble's brand identity centers on a vibrant yellow paired with clean white and soft gray neutrals, creating an inviting and energetic visual language. The palette is designed for clarity, warmth, and approachability across digital and physical touchpoints.
bumble.comBumble colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Bumble YellowPrimary255, 218, 0
- Bumble WhiteSecondary255, 255, 255
- Bumble CharcoalAccent38, 38, 38
Surfaces
Page, cards and dividers.- Bumble Light HoneyBackground255, 248, 231
- Bumble Soft GraySurface245, 245, 245
- Bumble Pale GrayBorder224, 224, 224
Text
Three tiers of copy.- Bumble CharcoalText38, 38, 38
- Bumble Medium GraySecondary text106, 106, 106
- Bumble Muted GrayMuted text166, 166, 166
Semantic
Feedback and state colors.- Bumble GreenSuccess58, 197, 105
- Bumble AmberWarning255, 184, 0
- Bumble CoralError255, 90, 95
- Bumble BlueInfo0, 147, 233
Use Bumble's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
bumble-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0093E9;
--error: #FF5A5F;
--accent: #262626;
--border: #E0E0E0;
--primary: #FFDA00;
--success: #3AC569;
--surface: #F5F5F5;
--warning: #FFB800;
--secondary: #FFFFFF;
--text-muted: #A6A6A6;
--background: #FFF8E7;
--text-primary: #262626;
--text-secondary: #6A6A6A;
}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.3: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
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.0:1
Pass
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Bumble background, border and text colors
The quiet part of the Bumble palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Bumble Light HoneyBackground
- HEX
- RGB
- HSL
- Bumble Soft GraySurface
- HEX
- RGB
- HSL
- Bumble Pale GrayBorder
- HEX
- RGB
- HSL
- Bumble CharcoalText
- HEX
- RGB
- HSL
- Bumble Medium GraySecondary text
- HEX
- RGB
- HSL
- Bumble Muted GrayMuted text
- HEX
- RGB
- HSL
About Bumble's colors
Bumble's palette is anchored by a bold yellow, symbolizing positivity and energy, complemented by neutral whites and grays for balance. The use of high contrast ensures accessibility and clarity in all digital contexts.
Primary yellow is paired with deep charcoal for text and icons.
Soft grays and off-whites create gentle backgrounds and surfaces.
Accent colors are used sparingly for status and feedback.
Psychology
Yellow evokes optimism, friendliness, and approachability, aligning with Bumble's empowering brand message. The neutrals support a clean, modern, and trustworthy interface.
Evolution
Bumble's yellow has remained consistent since launch, reinforcing strong brand recognition. The supporting palette has evolved to include more nuanced grays and off-whites for improved UI clarity.
Where Bumble uses each color
- Primary
Used for the app logo, primary buttons, and key highlights throughout the interface.
- Secondary
Backgrounds, cards, and modal surfaces often use Bumble White for clarity.
- Accent
Charcoal is used for navigation text, icons, and important UI elements.
- Backgrounds
Light Honey and Soft Gray are used as background colors in app screens and web pages.
- Text
Charcoal and Medium Gray are used for primary and secondary text, ensuring readability.
- Semantic
Green, Amber, Coral, and Blue are used for status indicators, alerts, and feedback messages.
Bumble color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Bumble brand color is Bumble Yellow, with the hex code #FFDA00.
Bumble Yellow (#FFDA00) in RGB is 255, 218, 0. In CMYK, it is approximately 0, 15, 100, 0.
Bumble uses several neutrals: Bumble Charcoal (#262626), Soft Gray (#F5F5F5), Pale Gray (#E0E0E0), Medium Gray (#6A6A6A), and Muted Gray (#A6A6A6) for backgrounds, borders, and text.
Bumble Yellow (#FFDA00) should be reserved for primary actions and highlights, while neutrals and accent colors provide structure and clarity. Use semantic colors for feedback and status only.
The secondary color is Bumble White, #FFFFFF, and the accent is Bumble Charcoal, #262626. 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 Bumble's colors consistently when it generates UI.
Make something in the spirit of Bumble
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.