Bubble color palette
SaaSBubble's brand color system is centered around a distinctive purple, complemented by a clean white background and neutral grays for UI clarity. The palette is designed for a modern SaaS interface, emphasizing usability and brand recognition.
bubble.ioBubble colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Bubble PurplePrimary99, 91, 255
- Bubble Light GraySecondary243, 244, 248
- Bubble GoldAccent255, 180, 0
Surfaces
Page, cards and dividers.- Bubble WhiteBackground255, 255, 255
- Bubble Surface GraySurface247, 248, 250
- Bubble Border GrayBorder224, 227, 235
Text
Three tiers of copy.- Bubble BlackText26, 26, 26
- Bubble Medium GraySecondary text107, 114, 128
- Bubble Muted GrayMuted text160, 174, 192
Semantic
Feedback and state colors.- Bubble GreenSuccess0, 208, 132
- Bubble GoldWarning255, 180, 0
- Bubble RedError255, 77, 79
- Bubble BlueInfo59, 130, 246
Use Bubble's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
bubble-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B82F6;
--error: #FF4D4F;
--accent: #FFB400;
--border: #E0E3EB;
--primary: #635BFF;
--success: #00D084;
--surface: #F7F8FA;
--warning: #FFB400;
--secondary: #F3F4F8;
--text-muted: #A0AEC0;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #6B7280;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
16.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.5: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.1:1
Fail
Bubble background, border and text colors
The quiet part of the Bubble palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Bubble WhiteBackground
- HEX
- RGB
- HSL
- Bubble Surface GraySurface
- HEX
- RGB
- HSL
- Bubble Border GrayBorder
- HEX
- RGB
- HSL
- Bubble BlackText
- HEX
- RGB
- HSL
- Bubble Medium GraySecondary text
- HEX
- RGB
- HSL
- Bubble Muted GrayMuted text
- HEX
- RGB
- HSL
About Bubble's colors
Bubble's palette uses a vibrant purple as its anchor, with supporting neutrals and accent colors for clarity and accessibility. The system is optimized for digital interfaces, balancing brand distinctiveness with usability.
Purple and gold provide strong contrast for CTAs.
Neutrals support content hierarchy and readability.
Accent colors signal status and guide user actions.
Psychology
Purple conveys creativity and innovation, aligning with Bubble's mission to empower makers. The clean neutrals foster a sense of trust and modernity.
Evolution
Bubble's color system has remained stable, with purple as the core brand color since its early years. Minor adjustments to gray tones and accent colors have improved accessibility and modernized the UI.
Where Bubble uses each color
- Primary
Bubble Purple is used for primary buttons, navigation highlights, and key brand elements.
- Secondary
Bubble Light Gray appears in backgrounds, cards, and secondary UI surfaces.
- Accent
Bubble Gold is used for highlights, notifications, and status indicators.
- Backgrounds
Bubble White is the default background for most app screens and web pages.
- Text
Bubble Black and Medium Gray are used for primary and secondary text, ensuring readability.
- Semantic
Bubble Green, Gold, Red, and Blue are used for success, warning, error, and informational states respectively.
Bubble color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Bubble brand color is Bubble Purple, hex code #635BFF.
Bubble Purple (#635BFF) in RGB is (99, 91, 255). For CMYK, it is approximately (61, 64, 0, 0).
Bubble uses a range of grays: Bubble Light Gray (#F3F4F8), Surface Gray (#F7F8FA), Border Gray (#E0E3EB), Medium Gray (#6B7280), and Muted Gray (#A0AEC0) for UI clarity.
Use Bubble Purple (#635BFF) for primary actions and navigation, neutrals for backgrounds and surfaces, and accent or semantic colors for notifications and status. Maintain sufficient contrast for accessibility.
The secondary color is Bubble Light Gray, #F3F4F8, and the accent is Bubble Gold, #FFB400. 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 Bubble's colors consistently when it generates UI.
Make something in the spirit of Bubble
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.