Ramp color palette
SaaSRamp uses a minimalist color palette centered around a distinctive green, complemented by neutral grays and off-whites for a clean, modern SaaS interface. The brand's visual identity emphasizes clarity and simplicity.
ramp.comRamp colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Ramp GreenPrimary26, 60, 52
- Ramp MintSecondary229, 246, 240
- Ramp Light MintAccent183, 245, 223
Surfaces
Page, cards and dividers.- Ramp WhiteBackground255, 255, 255
- Ramp Surface GraySurface246, 247, 249
- Ramp Border GrayBorder229, 231, 235
Text
Three tiers of copy.- Ramp BlackText26, 26, 26
- Ramp GraySecondary text75, 85, 99
- Ramp Muted GrayMuted text156, 163, 175
Semantic
Feedback and state colors.- Ramp Success GreenSuccess0, 184, 124
- Ramp Warning YellowWarning255, 192, 67
- Ramp Error RedError255, 86, 48
- Ramp Info BlueInfo38, 132, 255
Use Ramp's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
ramp-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2684FF;
--error: #FF5630;
--accent: #B7F5DF;
--border: #E5E7EB;
--primary: #1A3C34;
--success: #00B87C;
--surface: #F6F7F9;
--warning: #FFC043;
--secondary: #E5F6F0;
--text-muted: #9CA3AF;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #4B5563;
}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.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.1:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Ramp background, border and text colors
The quiet part of the Ramp palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Ramp WhiteBackground
- HEX
- RGB
- HSL
- Ramp Surface GraySurface
- HEX
- RGB
- HSL
- Ramp Border GrayBorder
- HEX
- RGB
- HSL
- Ramp BlackText
- HEX
- RGB
- HSL
- Ramp GraySecondary text
- HEX
- RGB
- HSL
- Ramp Muted GrayMuted text
- HEX
- RGB
- HSL
About Ramp's colors
Ramp's palette is built around a deep green, symbolizing growth and financial clarity, paired with soft mint and neutral grays for a modern, trustworthy feel. The use of minimal color supports a focus on content and usability.
Primary green contrasts with white and gray backgrounds.
Accent mint highlights interactive elements.
Neutral grays provide structure and hierarchy.
Psychology
Green evokes trust, stability, and financial responsibility, aligning with Ramp's fintech positioning. The muted tones create a calm, professional environment for business users.
Evolution
Ramp's color palette has remained consistent since launch, with minor adjustments to gray tones for improved accessibility. The core green and mint accents have been stable, reinforcing brand recognition.
Where Ramp uses each color
- Primary
Ramp Green is used for the logo, primary buttons, and key highlights across the dashboard.
- Secondary
Ramp Mint appears in backgrounds, badges, and subtle UI highlights.
- Accent
Ramp Light Mint is used for hover states, notifications, and progress indicators.
- Backgrounds
Ramp White and Surface Gray are used for main app backgrounds and card surfaces.
- Text
Ramp Black is used for primary text, with Ramp Gray and Muted Gray for secondary and disabled text.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for alerts, statuses, and feedback messages.
Ramp color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Ramp brand color is #1A3C34, known as Ramp Green.
Ramp Green (#1A3C34) in RGB is 26, 60, 52. For CMYK, it is approximately 57, 0, 13, 76.
Ramp uses Ramp Surface Gray (#F6F7F9), Ramp Border Gray (#E5E7EB), Ramp Gray (#4B5563), and Ramp Muted Gray (#9CA3AF) for its neutral interface elements.
Use Ramp Green (#1A3C34) for primary actions and branding, with mint and gray tones for backgrounds, surfaces, and secondary elements. Semantic colors like Success Green (#00B87C) and Error Red (#FF5630) are reserved for status and feedback.
The secondary color is Ramp Mint, #E5F6F0, and the accent is Ramp Light Mint, #B7F5DF. 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 Ramp's colors consistently when it generates UI.
Make something in the spirit of Ramp
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.