Retool Color Psychology & Meaning
Retool's dark gray and blue is the palette of internal tools — not trying to be beautiful, optimized for people who need to get work done with data fast.
#1B1F23
#3B82F6
#FFFFFF
#9CA3AF
Background
Primary Accent
Secondary
Body Text
Retool
darktechnicalenterprise all developerenterpriseapp
AA
WCAG Grade
6.5:1
Contrast Ratio
2,000
Saves
5,400
AI Copies
Use #1B1F23 as the background. Use #3B82F6 as the primary accent. Use #FFFFFF as secondary. Use #9CA3AF as body text. Palette: Retool.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Retool color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 1.3% | 27, 31, 35 | 23%, 11%, 0%, 86% | 210°, 13%, 12% | ||
| Primary Accent Luminance: 23.5% | 59, 130, 246 | 76%, 47%, 0%, 4% | 217°, 91%, 60% | ||
| Secondary Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% | ||
| Body Text Luminance: 36.4% | 156, 163, 175 | 11%, 7%, 0%, 31% | 218°, 11%, 65% |
Color Harmony: Split-Complementary Scheme
The Retool palette is built using a split-complementary relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A split-complementary palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Retool launched in 2017 and grew to become the leading internal tools builder. The utilitarian dark aesthetic matches the product's philosophy: developers and operators over end consumers.
Best Design Use Cases
Very dark gray for backgrounds. Blue for interactive elements. White for content. Gray for secondary labels.
Industries This Palette Suits
Internal tools, enterprise software, developer platforms, B2B SaaS.
How to Implement the Retool Color Scheme
To use this Retool color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #1B1F23 for the main background and #3B82F6 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #9CA3AF and #1B1F23 is 6.53:1 (AA). Ensure your body text remains legible.