Chime color palette
FinanceChime's color identity is centered around a distinctive green, conveying freshness and approachability in the fintech space. The palette is clean and minimal, with green accents and neutral grays for clarity and accessibility.
chime.comChime colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Chime GreenPrimary11, 183, 132
- Chime Deep GreenSecondary12, 155, 110
- Chime MintAccent45, 225, 166
Surfaces
Page, cards and dividers.- Chime WhiteBackground255, 255, 255
- Chime Light GraySurface246, 248, 248
- Chime Border GrayBorder226, 232, 231
Text
Three tiers of copy.- Chime BlackText34, 34, 34
- Chime GraySecondary text92, 95, 98
- Chime Muted GrayMuted text163, 167, 170
Semantic
Feedback and state colors.- Chime Success GreenSuccess11, 183, 132
- Chime Warning YellowWarning255, 192, 67
- Chime Error RedError224, 45, 60
- Chime Info BlueInfo45, 156, 219
Use Chime's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
chime-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2D9CDB;
--error: #E02D3C;
--accent: #2DE1A6;
--border: #E2E8E7;
--primary: #0BB784;
--success: #0BB784;
--surface: #F6F8F8;
--warning: #FFC043;
--secondary: #0C9B6E;
--text-muted: #A3A7AA;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #5C5F62;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.0:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Chime gray and neutral colors
The quiet part of the Chime palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Chime WhiteBackground
- HEX
- RGB
- HSL
- Chime Light GraySurface
- HEX
- RGB
- HSL
- Chime Border GrayBorder
- HEX
- RGB
- HSL
- Chime BlackText
- HEX
- RGB
- HSL
- Chime GraySecondary text
- HEX
- RGB
- HSL
- Chime Muted GrayMuted text
- HEX
- RGB
- HSL
About Chime's colors
Chime's palette uses green as a symbol of growth, trust, and financial wellness, balanced by neutral grays and white for clarity. The limited use of accent colors keeps the interface clean and focused.
Primary green is complemented by mint and deep green for hierarchy.
Neutral grays provide structure and accessibility.
Accent colors are reserved for status and feedback.
Psychology
Green evokes feelings of security, optimism, and financial health, which aligns with Chime's mission. The minimal palette reduces cognitive load and builds user trust.
Evolution
Chime's palette has remained consistent since launch, with minor adjustments to green shades for digital accessibility. The core green has always been central to the brand's identity.
Where Chime uses each color
- Primary
Used for logo, primary buttons, and key highlights in the app and website.
- Secondary
Appears in secondary buttons, navigation elements, and some illustrations.
- Accent
Used for highlights, active states, and subtle UI accents.
- Backgrounds
White and light gray backgrounds are used throughout app screens and web pages.
- Text
Primary black and gray tones are used for all text, ensuring readability and contrast.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators.
Chime color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Chime brand green is #0BB784. This color is used in the logo and as the primary accent throughout Chime's digital products.
Chime Green (#0BB784) is RGB(11, 183, 132) and approximately CMYK(94, 0, 56, 28). Always use the hex code #0BB784 for digital applications.
Chime uses several neutral tones: Chime Light Gray (#F6F8F8), Border Gray (#E2E8E7), and Muted Gray (#A3A7AA). These provide structure and contrast to the green accents.
Primary green (#0BB784) should be reserved for key actions and branding, while grays and white form the foundation of backgrounds and surfaces. Accent and semantic colors are used sparingly for status and feedback.
The secondary color is Chime Deep Green, #0C9B6E, and the accent is Chime Mint, #2DE1A6. 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 Chime's colors consistently when it generates UI.
Make something in the spirit of Chime
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.