Lovable color palette
SaaSLovable uses a vibrant, modern color palette centered on a distinctive magenta as its primary brand color, complemented by soft neutrals and accent tones for UI clarity. The palette is designed for digital SaaS interfaces, balancing energy and approachability.
lovable.soLovable colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Lovable MagentaPrimary255, 61, 157
- Lovable PinkSecondary255, 179, 208
- Lovable IndigoAccent79, 70, 229
Surfaces
Page, cards and dividers.- Lovable WhiteBackground255, 255, 255
- Lovable SurfaceSurface249, 250, 251
- Lovable Border GrayBorder229, 231, 235
Text
Three tiers of copy.- Lovable CharcoalText30, 41, 59
- Lovable SlateSecondary text100, 116, 139
- Lovable Muted BlueMuted text148, 163, 184
Semantic
Feedback and state colors.- Lovable GreenSuccess16, 185, 129
- Lovable OrangeWarning245, 158, 66
- Lovable RedError239, 68, 68
- Lovable Sky BlueInfo56, 189, 248
Use Lovable's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
lovable-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #38BDF8;
--error: #EF4444;
--accent: #4F46E5;
--border: #E5E7EB;
--primary: #FF3D9D;
--success: #10B981;
--surface: #F9FAFB;
--warning: #F59E42;
--secondary: #FFB3D0;
--text-muted: #94A3B8;
--background: #FFFFFF;
--text-primary: #1E293B;
--text-secondary: #64748B;
}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.6:1
Pass
Text on surface
Needs 4.5:1 for body text
14.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.5:1
Fail
Lovable background, border and text colors
The quiet part of the Lovable palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Lovable WhiteBackground
- HEX
- RGB
- HSL
- Lovable SurfaceSurface
- HEX
- RGB
- HSL
- Lovable Border GrayBorder
- HEX
- RGB
- HSL
- Lovable CharcoalText
- HEX
- RGB
- HSL
- Lovable SlateSecondary text
- HEX
- RGB
- HSL
- Lovable Muted BlueMuted text
- HEX
- RGB
- HSL
About Lovable's colors
Lovable’s palette is anchored by a bold magenta, supported by soft pinks and deep indigos for contrast and visual interest. The neutrals provide clarity and accessibility for SaaS interfaces.
Primary magenta contrasts with indigo accent for CTAs.
Soft pinks and surface grays balance vibrancy with calm.
Success, warning, and error colors follow standard semantic conventions.
Psychology
Magenta conveys creativity, energy, and approachability, making the brand feel lively yet trustworthy. The supporting neutrals and blues reinforce clarity and professionalism.
Evolution
Lovable’s palette has remained consistent since launch, focusing on digital-first clarity. Minor adjustments in gray tones have improved accessibility and contrast.
Where Lovable uses each color
- Primary
Lovable Magenta is used for primary buttons, highlights, and key brand elements.
- Secondary
Lovable Pink appears in secondary buttons, backgrounds, and subtle UI accents.
- Accent
Lovable Indigo is used for links, icons, and interactive elements.
- Backgrounds
Lovable White and Surface are used for main app backgrounds and cards.
- Text
Charcoal, Slate, and Muted Blue are used for headings, body text, and secondary information.
- Semantic
Green, Orange, Red, and Sky Blue are used for status indicators, alerts, and notifications.
Lovable color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Lovable brand color is #FF3D9D, known as Lovable Magenta. This is used for main branding and key UI elements.
Lovable Magenta (#FF3D9D) in RGB is 255, 61, 157. For CMYK, it is approximately 0, 76, 38, 0.
Lovable uses #F9FAFB (Surface), #E5E7EB (Border Gray), #1E293B (Charcoal), #64748B (Slate), and #94A3B8 (Muted Blue) for backgrounds, borders, and text. These ensure UI clarity and accessibility.
Use Lovable Magenta (#FF3D9D) for primary actions and branding, with supporting colors for backgrounds, text, and states. Always maintain sufficient contrast for accessibility.
The secondary color is Lovable Pink, #FFB3D0, and the accent is Lovable Indigo, #4F46E5. 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 Lovable's colors consistently when it generates UI.
Make something in the spirit of Lovable
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.