Paddle color palette
SaaSPaddle's color identity is defined by a vibrant yellow primary, supported by deep blues and neutral grays for a modern SaaS interface. The palette emphasizes clarity and energy across digital product surfaces.
paddle.comPaddle colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Paddle YellowPrimary253, 221, 53
- Paddle NavySecondary26, 34, 51
- Paddle BlueAccent62, 106, 225
Surfaces
Page, cards and dividers.- Paddle WhiteBackground255, 255, 255
- Paddle Light GraySurface246, 247, 249
- Paddle Border GrayBorder229, 231, 235
Text
Three tiers of copy.- Paddle Navy TextText26, 34, 51
- Paddle Mid Gray TextSecondary text91, 100, 117
- Paddle Muted GrayMuted text156, 163, 175
Semantic
Feedback and state colors.- Paddle GreenSuccess34, 197, 94
- Paddle OrangeWarning245, 158, 66
- Paddle RedError239, 68, 68
- Paddle Blue InfoInfo62, 106, 225
Use Paddle's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
paddle-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3E6AE1;
--error: #EF4444;
--accent: #3E6AE1;
--border: #E5E7EB;
--primary: #FDDD35;
--success: #22C55E;
--surface: #F6F7F9;
--warning: #F59E42;
--secondary: #1A2233;
--text-muted: #9CA3AF;
--background: #FFFFFF;
--text-primary: #1A2233;
--text-secondary: #5B6475;
}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.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.6: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
Paddle background, border and text colors
The quiet part of the Paddle palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Paddle WhiteBackground
- HEX
- RGB
- HSL
- Paddle Light GraySurface
- HEX
- RGB
- HSL
- Paddle Border GrayBorder
- HEX
- RGB
- HSL
- Paddle Navy TextText
- HEX
- RGB
- HSL
- Paddle Mid Gray TextSecondary text
- HEX
- RGB
- HSL
- Paddle Muted GrayMuted text
- HEX
- RGB
- HSL
About Paddle's colors
Paddle's palette centers on a bold yellow for energy, balanced by deep navy and cool blues for trust and clarity. Neutral grays provide structure and legibility for SaaS interfaces.
Yellow contrasts with navy for visual hierarchy.
Accent blue is used for interactive elements.
Grays unify backgrounds and surfaces.
Psychology
The yellow primary conveys optimism and approachability, while navy and blue reinforce reliability and professionalism. The palette supports a friendly yet trustworthy brand image.
Evolution
Paddle's core palette has remained stable, with yellow as the signature color since early brand iterations. Recent updates refined the grays and accent blue for improved accessibility and digital clarity.
Where Paddle uses each color
- Primary
Paddle Yellow is used for key highlights, CTAs, and brand marks.
- Secondary
Paddle Navy appears in navigation bars, footers, and primary text.
- Accent
Paddle Blue is applied to links, buttons, and interactive states.
- Backgrounds
Paddle White and Light Gray are used for app backgrounds and cards.
- Text
Paddle Navy and Mid Gray are used for primary and secondary text, with Muted Gray for placeholders.
- Semantic
Green, Orange, and Red are used for success, warning, and error states in UI feedback.
Paddle color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Paddle primary color is #FDDD35, known as Paddle Yellow. Use this exact hex for all primary brand applications.
Paddle Yellow (#FDDD35) is RGB(253, 221, 53) and CMYK(0, 13, 79, 1). Always match the hex for digital use.
Paddle uses Light Gray (#F6F7F9), Border Gray (#E5E7EB), and Muted Gray (#9CA3AF) for backgrounds, borders, and muted text. These ensure clarity and accessibility in the interface.
Apply Paddle Yellow for highlights and CTAs, Navy for text and navigation, and Blue for interactive elements. Use grays for backgrounds and to maintain a clean, modern look.
The secondary color is Paddle Navy, #1A2233, and the accent is Paddle Blue, #3E6AE1. 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 Paddle's colors consistently when it generates UI.
Make something in the spirit of Paddle
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.