Rippling color palette
SaaSRippling's brand color identity is centered around a distinctive deep purple, paired with gold accents and a neutral, modern UI palette. The colors convey professionalism and a sense of innovation in the SaaS space.
rippling.comRippling colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Rippling PurplePrimary81, 42, 138
- Rippling GoldSecondary245, 177, 0
- Rippling Accent GoldAccent255, 183, 0
Surfaces
Page, cards and dividers.- Rippling Light GrayBackground248, 248, 248
- Rippling WhiteSurface255, 255, 255
- Rippling Border GrayBorder227, 227, 227
Text
Three tiers of copy.- Rippling BlackText26, 26, 26
- Rippling Dark GraySecondary text91, 91, 91
- Rippling Muted GrayMuted text139, 139, 139
Semantic
Feedback and state colors.- Rippling Success GreenSuccess0, 182, 122
- Rippling Warning GoldWarning255, 183, 0
- Rippling Error RedError224, 58, 62
- Rippling Info BlueInfo58, 122, 254
Use Rippling's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
rippling-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3A7AFE;
--error: #E03A3E;
--accent: #FFB700;
--border: #E3E3E3;
--primary: #512A8A;
--success: #00B67A;
--surface: #FFFFFF;
--warning: #FFB700;
--secondary: #F5B100;
--text-muted: #8B8B8B;
--background: #F8F8F8;
--text-primary: #1A1A1A;
--text-secondary: #5B5B5B;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.4:1
Pass
Text on surface
Needs 4.5:1 for body text
17.4: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.8:1
Pass
Muted text on background
Needs 3:1 for large text
3.2:1
Pass
Muted text on surface
Needs 3:1 for large text
3.4:1
Pass
Rippling gray and neutral colors
The quiet part of the Rippling palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Rippling Light GrayBackground
- HEX
- RGB
- HSL
- Rippling WhiteSurface
- HEX
- RGB
- HSL
- Rippling Border GrayBorder
- HEX
- RGB
- HSL
- Rippling BlackText
- HEX
- RGB
- HSL
- Rippling Dark GraySecondary text
- HEX
- RGB
- HSL
- Rippling Muted GrayMuted text
- HEX
- RGB
- HSL
About Rippling's colors
Rippling's palette is built around a dominant purple, accented by gold and supported by neutral grays and whites. The scheme balances warmth and professionalism for a modern SaaS experience.
Primary purple contrasts with gold accent for visual hierarchy.
Neutrals provide clarity and focus for UI elements.
Accent colors highlight actions and notifications.
Psychology
Purple conveys creativity, sophistication, and trust, while gold adds a sense of value and optimism. The neutral tones ensure readability and a clean interface.
Evolution
Rippling's palette has remained stable, consistently using deep purple and gold as core brand colors. Minor adjustments to gray tones have improved accessibility and UI clarity.
Where Rippling uses each color
- Primary
Used for the logo, primary navigation, and key call-to-action buttons.
- Secondary
Appears in highlights, icons, and secondary buttons.
- Accent
Used for notifications, badges, and interactive UI elements.
- Backgrounds
Light gray and white backgrounds are used for app screens and web pages.
- Text
Black and dark gray are used for primary and secondary text throughout the UI.
- Semantic
Success, warning, error, and info colors are used for status indicators and alerts.
Rippling color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Rippling brand color is Rippling Purple, hex code #512A8A.
Rippling Purple (#512A8A) in RGB is 81, 42, 138. For CMYK, it is approximately 41, 70, 0, 46.
Rippling uses several neutrals: background (#F8F8F8), surface (#FFFFFF), border (#E3E3E3), and text-muted (#8B8B8B). These ensure a clean, accessible interface.
Primary and secondary colors should be used for branding and key actions, while neutrals support UI clarity. Semantic colors are reserved for status, alerts, and feedback.
The secondary color is Rippling Gold, #F5B100, and the accent is Rippling Accent Gold, #FFB700. 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 Rippling's colors consistently when it generates UI.
Make something in the spirit of Rippling
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.