Trello color palette
SaaSTrello's color identity centers around a bold blue primary, complemented by a clean, modern palette of secondary blues, teals, and neutral grays. The system supports clear UI hierarchy and accessibility across its productivity platform.
trello.comTrello colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Trello BluePrimary0, 82, 204
- Trello Light BlueSecondary38, 132, 255
- Trello TealAccent0, 199, 230
Surfaces
Page, cards and dividers.- Trello CloudBackground244, 245, 247
- Trello WhiteSurface255, 255, 255
- Trello Light GrayBorder223, 225, 230
Text
Three tiers of copy.- Trello NavyText23, 43, 77
- Trello SlateSecondary text66, 82, 110
- Trello GrayMuted text107, 119, 140
Semantic
Feedback and state colors.- Trello GreenSuccess97, 189, 79
- Trello YellowWarning255, 171, 0
- Trello RedError235, 90, 70
- Trello Info BlueInfo0, 184, 217
Use Trello's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
trello-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B8D9;
--error: #EB5A46;
--accent: #00C7E6;
--border: #DFE1E6;
--primary: #0052CC;
--success: #61BD4F;
--surface: #FFFFFF;
--warning: #FFAB00;
--secondary: #2684FF;
--text-muted: #6B778C;
--background: #F4F5F7;
--text-primary: #172B4D;
--text-secondary: #42526E;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
12.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.9:1
Pass
Muted text on background
Needs 3:1 for large text
4.1:1
Pass
Muted text on surface
Needs 3:1 for large text
4.5:1
Pass
Trello background, border and text colors
The quiet part of the Trello palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Trello CloudBackground
- HEX
- RGB
- HSL
- Trello WhiteSurface
- HEX
- RGB
- HSL
- Trello Light GrayBorder
- HEX
- RGB
- HSL
- Trello NavyText
- HEX
- RGB
- HSL
- Trello SlateSecondary text
- HEX
- RGB
- HSL
- Trello GrayMuted text
- HEX
- RGB
- HSL
About Trello's colors
Trello's palette is built around a strong blue, evoking trust and clarity, with supporting teals and neutrals for balance. The color system is designed for high usability and visual organization.
Primary blue is complemented by lighter blues and teals for UI hierarchy.
Neutral grays provide structure and readability.
Accent and semantic colors highlight statuses and actions.
Psychology
Blue communicates reliability and calm, supporting Trello's role as a productivity tool. The use of green, yellow, and red for statuses aligns with universal color associations for success, warning, and error.
Evolution
Trello's core blue and neutral palette has remained stable since its early years. Minor adjustments have been made to accent and semantic colors for improved accessibility.
Where Trello uses each color
- Primary
Used for main navigation bars, primary buttons, and key highlights.
- Secondary
Appears in secondary buttons, links, and hover states.
- Accent
Used for highlights, selected states, and onboarding elements.
- Backgrounds
Trello Cloud and White are used for app backgrounds and card surfaces.
- Text
Trello Navy and Slate are used for primary and secondary text throughout the UI.
- Semantic
Green, yellow, and red indicate card statuses, notifications, and alerts.
Trello color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Trello primary color is #0052CC, known as Trello Blue. It is used for navigation and primary actions.
Trello Blue (#0052CC) in RGB is (0, 82, 204). For CMYK, it is approximately (100, 60, 0, 20).
Trello uses #F4F5F7 (Trello Cloud), #DFE1E6 (Trello Light Gray), and #6B778C (Trello Gray) for backgrounds, borders, and muted text. These neutrals support clarity and readability in the UI.
Use Trello Blue (#0052CC) for primary actions and navigation, with supporting blues and neutrals for structure. Semantic colors like #61BD4F (Green) and #EB5A46 (Red) are reserved for status and alerts.
The secondary color is Trello Light Blue, #2684FF, and the accent is Trello Teal, #00C7E6. 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 Trello's colors consistently when it generates UI.
Make something in the spirit of Trello
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.