Chargebee color palette
SaaSChargebee's color identity centers on a distinctive purple, paired with vibrant accents and a modern, neutral UI palette. The brand uses these colors consistently across its SaaS platform and marketing materials.
chargebee.comChargebee colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Chargebee PurplePrimary114, 55, 179
- Chargebee GoldSecondary247, 181, 0
- Chargebee TealAccent0, 189, 165
Surfaces
Page, cards and dividers.- Chargebee WhiteBackground255, 255, 255
- Chargebee Surface GraySurface246, 246, 248
- Chargebee Border GrayBorder224, 224, 230
Text
Three tiers of copy.- Chargebee BlackText26, 26, 26
- Chargebee Dark GraySecondary text77, 77, 77
- Chargebee Muted GrayMuted text138, 138, 138
Semantic
Feedback and state colors.- Chargebee Success GreenSuccess0, 196, 140
- Chargebee Warning YellowWarning255, 184, 0
- Chargebee Error RedError255, 77, 79
- Chargebee Info BlueInfo45, 156, 219
Use Chargebee's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
chargebee-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2D9CDB;
--error: #FF4D4F;
--accent: #00BDA5;
--border: #E0E0E6;
--primary: #7237B3;
--success: #00C48C;
--surface: #F6F6F8;
--warning: #FFB800;
--secondary: #F7B500;
--text-muted: #8A8A8A;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #4D4D4D;
}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.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.8:1
Pass
Muted text on background
Needs 3:1 for large text
3.5:1
Pass
Muted text on surface
Needs 3:1 for large text
3.2:1
Pass
Chargebee gray and neutral colors
The quiet part of the Chargebee palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Chargebee WhiteBackground
- HEX
- RGB
- HSL
- Chargebee Surface GraySurface
- HEX
- RGB
- HSL
- Chargebee Border GrayBorder
- HEX
- RGB
- HSL
- Chargebee BlackText
- HEX
- RGB
- HSL
- Chargebee Dark GraySecondary text
- HEX
- RGB
- HSL
- Chargebee Muted GrayMuted text
- HEX
- RGB
- HSL
About Chargebee's colors
Chargebee's palette is anchored by a bold purple, complemented by gold and teal for vibrancy and contrast. Neutral grays and whites provide clarity and focus in the UI.
Primary purple is contrasted with gold and teal accents.
Neutrals balance the vibrancy of the accent colors.
Semantic colors (green, yellow, red, blue) are used for status and feedback.
Psychology
Purple conveys creativity and premium service, while gold and teal add energy and approachability. The neutral tones ensure readability and a professional, modern feel.
Evolution
Chargebee's palette has remained stable, with the purple and gold combination being a consistent hallmark. Minor adjustments have been made to accent and neutral tones for improved accessibility and digital clarity.
Where Chargebee uses each color
- Primary
Used for main navigation, primary buttons, and key highlights across the website and product UI.
- Secondary
Appears in call-to-action buttons, highlights, and graphic elements.
- Accent
Used for links, icons, and interactive elements to draw attention.
- Backgrounds
White and light gray backgrounds are used throughout app screens and marketing pages.
- Text
Text colors range from black for primary content to muted gray for secondary and disabled text.
- Semantic
Success, warning, error, and info colors are used for notifications, status badges, and alerts.
Chargebee color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Chargebee brand color is Chargebee Purple, hex code #7237B3. This is used as the primary color across brand assets.
Chargebee Purple (#7237B3) in RGB is 114, 55, 179. For CMYK, it is approximately 36, 69, 0, 30.
Chargebee uses Chargebee Surface Gray (#F6F6F8), Border Gray (#E0E0E6), and Muted Gray (#8A8A8A) for backgrounds, borders, and muted text. These provide a clean, modern interface.
Use Chargebee Purple (#7237B3) for primary actions and highlights, with gold and teal as supporting accents. Neutrals and semantic colors ensure clarity and accessibility throughout the UI.
The secondary color is Chargebee Gold, #F7B500, and the accent is Chargebee Teal, #00BDA5. Together with the primary they make up the three brand colors at the top of this page.
6 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 Chargebee's colors consistently when it generates UI.
Make something in the spirit of Chargebee
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.