Bolt color palette
SaaSBolt is a SaaS platform known for its streamlined checkout solutions, using a bold blue-centric color palette with clean neutrals for UI clarity. The brand identity relies on a distinctive electric blue paired with dark and light grays for contrast and accessibility.
bolt.comBolt colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Bolt Electric BluePrimary0, 91, 255
- Bolt NavySecondary0, 43, 86
- Bolt Cyan AccentAccent0, 225, 255
Surfaces
Page, cards and dividers.- Bolt WhiteBackground255, 255, 255
- Bolt Light GraySurface246, 248, 250
- Bolt Border GrayBorder227, 232, 238
Text
Three tiers of copy.- Bolt BlackText26, 26, 26
- Bolt Medium GraySecondary text75, 85, 99
- Bolt Muted GrayMuted text156, 163, 175
Semantic
Feedback and state colors.- Bolt Success GreenSuccess0, 196, 140
- Bolt Warning YellowWarning255, 184, 0
- Bolt Error RedError255, 59, 48
- Bolt Info BlueInfo59, 130, 246
Use Bolt's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
bolt-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B82F6;
--error: #FF3B30;
--accent: #00E1FF;
--border: #E3E8EE;
--primary: #005BFF;
--success: #00C48C;
--surface: #F6F8FA;
--warning: #FFB800;
--secondary: #002B56;
--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.3: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
Bolt background, border and text colors
The quiet part of the Bolt palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Bolt WhiteBackground
- HEX
- RGB
- HSL
- Bolt Light GraySurface
- HEX
- RGB
- HSL
- Bolt Border GrayBorder
- HEX
- RGB
- HSL
- Bolt BlackText
- HEX
- RGB
- HSL
- Bolt Medium GraySecondary text
- HEX
- RGB
- HSL
- Bolt Muted GrayMuted text
- HEX
- RGB
- HSL
About Bolt's colors
Bolt's color system is built around a high-contrast electric blue, supported by deep navy and clean neutrals to ensure accessibility and brand recognition. The palette is designed for clarity and modernity in digital interfaces.
Primary blue contrasts with white and light gray backgrounds.
Accent cyan is used sparingly for highlights and interactive elements.
Dark navy and muted grays provide depth and hierarchy.
Psychology
The electric blue conveys trust, innovation, and reliability, which are key to Bolt's SaaS positioning. Neutral grays and whites create a sense of simplicity and efficiency.
Evolution
Bolt's palette has remained stable, with electric blue as its core since launch. Minor adjustments have been made to gray tones for improved accessibility and UI clarity.
Where Bolt uses each color
- Primary
Used for main navigation bars, primary buttons, and key call-to-action elements.
- Secondary
Appears in headers, footers, and secondary navigation backgrounds.
- Accent
Applied to interactive highlights, links, and notification badges.
- Backgrounds
White and light gray are used for app screens and content backgrounds.
- Text
Primary text is nearly black for maximum readability, with medium and muted grays for secondary and disabled text.
- Semantic
Green, yellow, red, and info blue are used for status indicators, alerts, and feedback messages.
Bolt color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Bolt brand color is Bolt Electric Blue, hex code #005BFF.
Bolt Electric Blue (#005BFF) in RGB is (0, 91, 255); in CMYK it is (100, 64, 0, 0).
Bolt uses Bolt Light Gray (#F6F8FA), Bolt Border Gray (#E3E8EE), Bolt Medium Gray (#4B5563), and Bolt Muted Gray (#9CA3AF) for backgrounds, borders, and text hierarchy.
Use Bolt Electric Blue (#005BFF) for primary actions, navy and grays for structure, and accent cyan sparingly for highlights. Always maintain sufficient contrast for accessibility.
The secondary color is Bolt Navy, #002B56, and the accent is Bolt Cyan Accent, #00E1FF. 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 Bolt's colors consistently when it generates UI.
Make something in the spirit of Bolt
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.