Retool color palette
SaaSRetool's color identity is built around a utilitarian, neutral palette with a focus on dark grays and subtle blue accents, reflecting its developer-centric SaaS platform. The colors are designed for clarity and usability in complex UI environments.
retool.comRetool colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Retool CharcoalPrimary61, 61, 61
- Retool BlackSecondary26, 26, 26
- Retool BlueAccent34, 150, 243
Surfaces
Page, cards and dividers.- Retool Light GrayBackground246, 247, 249
- Retool WhiteSurface255, 255, 255
- Retool Border GrayBorder224, 227, 230
Text
Three tiers of copy.- Retool Text BlackText35, 39, 47
- Retool Text GraySecondary text92, 95, 98
- Retool Muted GrayMuted text138, 143, 152
Semantic
Feedback and state colors.- Retool Success GreenSuccess0, 178, 111
- Retool Warning YellowWarning255, 176, 32
- Retool Error RedError244, 67, 54
- Retool Info BlueInfo34, 150, 243
Use Retool's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
retool-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2296F3;
--error: #F44336;
--accent: #2296F3;
--border: #E0E3E6;
--primary: #3D3D3D;
--success: #00B26F;
--surface: #FFFFFF;
--warning: #FFB020;
--secondary: #1A1A1A;
--text-muted: #8A8F98;
--background: #F6F7F9;
--text-primary: #23272F;
--text-secondary: #5C5F62;
}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.0:1
Pass
Text on surface
Needs 4.5:1 for body text
15.0: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
6.4:1
Pass
Muted text on background
Needs 3:1 for large text
3.0:1
Pass
Muted text on surface
Needs 3:1 for large text
3.2:1
Pass
Retool background, border and text colors
The quiet part of the Retool palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Retool Light GrayBackground
- HEX
- RGB
- HSL
- Retool WhiteSurface
- HEX
- RGB
- HSL
- Retool Border GrayBorder
- HEX
- RGB
- HSL
- Retool Text BlackText
- HEX
- RGB
- HSL
- Retool Text GraySecondary text
- HEX
- RGB
- HSL
- Retool Muted GrayMuted text
- HEX
- RGB
- HSL
About Retool's colors
Retool's palette is grounded in neutral grays with blue accents, supporting a functional and accessible UI. The color system prioritizes contrast and readability for complex application interfaces.
Primary and secondary grays provide structure and hierarchy.
Accent blue is used for highlights and interactive elements.
Semantic colors are reserved for status and feedback.
Psychology
The dominant grays convey professionalism, stability, and focus, aligning with developer workflows. Blue accents add a sense of trust and clarity without overwhelming the interface.
Evolution
Retool's palette has remained stable, with minor adjustments to gray tones for improved accessibility. The overall color identity has consistently emphasized neutrality and usability.
Where Retool uses each color
- Primary
Used for navigation bars, headers, and key UI elements.
- Secondary
Applied to sidebars, footers, and background panels.
- Accent
Highlights buttons, links, and active states.
- Backgrounds
Main app backgrounds and dashboard areas.
- Text
Primary and secondary text throughout the product UI.
- Semantic
Success, warning, error, and info colors are used for alerts, badges, and status indicators.
Retool color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Retool primary color is #3D3D3D, known as Retool Charcoal.
Retool Charcoal (#3D3D3D) in RGB is (61, 61, 61). For print, its approximate CMYK is (0, 0, 0, 76).
Retool uses a range of grays, including #1A1A1A (Retool Black), #F6F7F9 (Retool Light Gray), and #E0E3E6 (Retool Border Gray), to structure its interface.
Use Retool Charcoal (#3D3D3D) for primary navigation and interface elements, with blue (#2296F3) for accents and semantic colors for status indicators. Maintain high contrast for readability and accessibility.
The secondary color is Retool Black, #1A1A1A, and the accent is Retool Blue, #2296F3. Together with the primary they make up the three brand colors at the top of this page.
6 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 Retool's colors consistently when it generates UI.
Make something in the spirit of Retool
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.