Softr color palette
SaaSSoftr's color identity centers around a vibrant magenta as its primary, paired with clean neutrals and subtle accent hues for a modern SaaS look. The palette is designed for clarity, accessibility, and a friendly, approachable feel.
softr.ioSoftr colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Softr MagentaPrimary255, 51, 102
- Softr IndigoSecondary79, 70, 229
- Softr PeachAccent253, 186, 116
Surfaces
Page, cards and dividers.- Softr WhiteBackground255, 255, 255
- Softr SurfaceSurface248, 250, 252
- Softr Border GrayBorder229, 231, 235
Text
Three tiers of copy.- Softr BlackText17, 24, 39
- Softr GraySecondary text107, 114, 128
- Softr Muted GrayMuted text156, 163, 175
Semantic
Feedback and state colors.- Softr GreenSuccess34, 197, 94
- Softr OrangeWarning245, 158, 66
- Softr RedError239, 68, 68
- Softr BlueInfo59, 130, 246
Use Softr's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
softr-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B82F6;
--error: #EF4444;
--accent: #FDBA74;
--border: #E5E7EB;
--primary: #FF3366;
--success: #22C55E;
--surface: #F8FAFC;
--warning: #F59E42;
--secondary: #4F46E5;
--text-muted: #9CA3AF;
--background: #FFFFFF;
--text-primary: #111827;
--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
17.7:1
Pass
Text on surface
Needs 4.5:1 for body text
17.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.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Softr background, border and text colors
The quiet part of the Softr palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Softr WhiteBackground
- HEX
- RGB
- HSL
- Softr SurfaceSurface
- HEX
- RGB
- HSL
- Softr Border GrayBorder
- HEX
- RGB
- HSL
- Softr BlackText
- HEX
- RGB
- HSL
- Softr GraySecondary text
- HEX
- RGB
- HSL
- Softr Muted GrayMuted text
- HEX
- RGB
- HSL
About Softr's colors
Softr's palette uses a bold magenta primary to stand out, complemented by indigo and soft neutrals for balance and accessibility. The colors are chosen for high contrast and a modern SaaS aesthetic.
Primary magenta contrasts with indigo for visual hierarchy.
Neutral backgrounds and surfaces keep interfaces clean.
Accent peach adds warmth and highlights calls to action.
Psychology
The magenta conveys energy and creativity, while indigo adds trust and professionalism. Neutrals and soft accents ensure the product feels approachable and easy to use.
Evolution
Softr's palette has remained consistent since launch, with minor adjustments to neutrals for improved accessibility. The core magenta and indigo have been stable brand anchors.
Where Softr uses each color
- Primary
Used for main call-to-action buttons and highlights across the website and app.
- Secondary
Appears in navigation elements, secondary buttons, and selected states.
- Accent
Applied to badges, notifications, and subtle highlights.
- Backgrounds
White and light gray backgrounds are used throughout the UI for clarity.
- Text
Primary text is dark for readability, with secondary and muted grays for less prominent information.
- Semantic
Green, orange, red, and blue are used for success, warning, error, and informational states respectively.
Softr color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Softr brand color is Softr Magenta, hex code #FF3366.
Softr Magenta (#FF3366) is RGB(255, 51, 102). For CMYK, use 0, 80, 60, 0.
Softr uses Softr White (#FFFFFF), Softr Surface (#F8FAFC), Softr Border Gray (#E5E7EB), and Softr Gray (#6B7280) for backgrounds, surfaces, borders, and secondary text.
Use Softr Magenta (#FF3366) for primary actions, with indigo and peach as supporting accents. Neutrals provide structure and clarity for backgrounds and text.
The secondary color is Softr Indigo, #4F46E5, and the accent is Softr Peach, #FDBA74. 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 Softr's colors consistently when it generates UI.
Make something in the spirit of Softr
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.