Lemon Squeezy color palette
SaaSLemon Squeezy's color identity centers on a vibrant yellow paired with deep darks and soft neutrals, reflecting its playful yet professional SaaS brand. The palette is consistent across web and product UI, emphasizing clarity and approachability.
lemonsqueezy.comLemon Squeezy colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Lemon Squeezy YellowPrimary255, 194, 51
- Lemon Squeezy CharcoalSecondary34, 39, 43
- Lemon Squeezy OrangeAccent255, 122, 0
Surfaces
Page, cards and dividers.- Lemon Squeezy LightBackground248, 249, 251
- Lemon Squeezy WhiteSurface255, 255, 255
- Lemon Squeezy Border GrayBorder228, 231, 236
Text
Three tiers of copy.- Lemon Squeezy CharcoalText34, 39, 43
- Lemon Squeezy GraySecondary text107, 114, 128
- Lemon Squeezy Muted GrayMuted text156, 163, 175
Semantic
Feedback and state colors.- Lemon Squeezy GreenSuccess34, 197, 94
- Lemon Squeezy Warning OrangeWarning245, 158, 66
- Lemon Squeezy RedError239, 68, 68
- Lemon Squeezy BlueInfo59, 130, 246
Use Lemon Squeezy's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
lemon-squeezy-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B82F6;
--error: #EF4444;
--accent: #FF7A00;
--border: #E4E7EC;
--primary: #FFC233;
--success: #22C55E;
--surface: #FFFFFF;
--warning: #F59E42;
--secondary: #22272B;
--text-muted: #9CA3AF;
--background: #F8F9FB;
--text-primary: #22272B;
--text-secondary: #6B7280;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.3:1
Pass
Text on surface
Needs 4.5:1 for body text
15.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.8: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.5:1
Fail
Lemon Squeezy background, border and text colors
The quiet part of the Lemon Squeezy palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Lemon Squeezy LightBackground
- HEX
- RGB
- HSL
- Lemon Squeezy WhiteSurface
- HEX
- RGB
- HSL
- Lemon Squeezy Border GrayBorder
- HEX
- RGB
- HSL
- Lemon Squeezy CharcoalText
- HEX
- RGB
- HSL
- Lemon Squeezy GraySecondary text
- HEX
- RGB
- HSL
- Lemon Squeezy Muted GrayMuted text
- HEX
- RGB
- HSL
About Lemon Squeezy's colors
Lemon Squeezy uses a high-contrast palette with a signature yellow, grounded by dark neutrals and supported by functional accent colors. The system is designed for clarity, accessibility, and brand recognition.
Primary yellow is complemented by deep charcoal for contrast.
Accent orange and green provide visual cues for actions and statuses.
Soft grays and white create a clean, modern UI foundation.
Psychology
The bright yellow evokes energy, optimism, and friendliness, making the brand approachable. Deep neutrals balance the vibrancy, lending trust and professionalism.
Evolution
The Lemon Squeezy palette has remained stable since launch, with minor refinements to neutral tones for improved accessibility. The yellow primary has always been the brand's defining color.
Where Lemon Squeezy uses each color
- Primary
Lemon Squeezy Yellow is used for primary buttons, highlights, and key brand elements.
- Secondary
Lemon Squeezy Charcoal appears in navigation bars, headers, and main text.
- Accent
Lemon Squeezy Orange is used for secondary buttons, links, and notifications.
- Backgrounds
Lemon Squeezy Light and White are used for page and card backgrounds throughout the UI.
- Text
Charcoal and Gray are used for primary and secondary text, with Muted Gray for less prominent information.
- Semantic
Green, Orange, Red, and Blue are used for success, warning, error, and informational states in the app.
Lemon Squeezy color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Lemon Squeezy primary color is #FFC233. This yellow is used for branding and key UI highlights.
Lemon Squeezy Yellow (#FFC233) is RGB(255, 194, 51) and CMYK(0, 24, 80, 0). Use this for accurate reproduction in digital and print.
Lemon Squeezy Charcoal (#22272B) and Lemon Squeezy Gray (#6B7280) are used for dark and neutral UI elements. These provide contrast and readability throughout the interface.
Use Lemon Squeezy Yellow (#FFC233) for primary actions and highlights, with Charcoal (#22272B) for text and backgrounds. Accent and semantic colors should be reserved for status indicators and secondary actions.
The secondary color is Lemon Squeezy Charcoal, #22272B, and the accent is Lemon Squeezy Orange, #FF7A00. 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 Lemon Squeezy's colors consistently when it generates UI.
Make something in the spirit of Lemon Squeezy
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.