Todoist color palette
SaaSTodoist uses a distinctive red-centric palette with clean neutrals and subtle accents, reflecting its focus on clarity and productivity. The color system is consistent across its web and mobile apps, emphasizing usability and brand recognition.
todoist.comTodoist colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Todoist RedPrimary228, 67, 50
- Todoist LightSecondary250, 250, 250
- Todoist OrangeAccent251, 160, 38
Surfaces
Page, cards and dividers.- Todoist WhiteBackground255, 255, 255
- Todoist Surface GraySurface245, 245, 245
- Todoist Border GrayBorder230, 230, 230
Text
Three tiers of copy.- Todoist Text BlackText32, 32, 32
- Todoist Text GraySecondary text102, 102, 102
- Todoist Muted GrayMuted text179, 179, 179
Semantic
Feedback and state colors.- Todoist GreenSuccess41, 159, 74
- Todoist OrangeWarning251, 160, 38
- Todoist RedError228, 67, 50
- Todoist BlueInfo36, 111, 224
Use Todoist's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
todoist-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #246FE0;
--error: #E44332;
--accent: #FBA026;
--border: #E6E6E6;
--primary: #E44332;
--success: #299F4A;
--surface: #F5F5F5;
--warning: #FBA026;
--secondary: #FAFAFA;
--text-muted: #B3B3B3;
--background: #FFFFFF;
--text-primary: #202020;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.3:1
Pass
Text on surface
Needs 4.5:1 for body text
14.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Todoist gray and neutral colors
The quiet part of the Todoist palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Todoist WhiteBackground
- HEX
- RGB
- HSL
- Todoist Surface GraySurface
- HEX
- RGB
- HSL
- Todoist Border GrayBorder
- HEX
- RGB
- HSL
- Todoist Text BlackText
- HEX
- RGB
- HSL
- Todoist Text GraySecondary text
- HEX
- RGB
- HSL
- Todoist Muted GrayMuted text
- HEX
- RGB
- HSL
About Todoist's colors
Todoist’s palette is anchored by a vibrant red, balanced with neutral grays and white for clarity and focus. Accent colors are used sparingly to guide attention and communicate status.
Primary red is complemented by neutral backgrounds.
Accent orange and blue are used for highlights and status.
Grays provide structure and readability.
Psychology
The dominant red conveys energy, urgency, and action, aligning with productivity themes. Neutrals ensure the interface feels calm and uncluttered, supporting focus.
Evolution
Todoist's palette has remained stable, with the signature red and clean neutrals consistently present. Minor adjustments have been made to accent and gray tones for improved accessibility and modernity.
Where Todoist uses each color
- Primary
Used for main action buttons, highlights, and the logo.
- Secondary
Applied to backgrounds and subtle UI elements for contrast.
- Accent
Used for priority indicators, warnings, and highlights.
- Backgrounds
White and light gray backgrounds are standard across app screens and web interfaces.
- Text
Primary and secondary text colors are used for content, navigation, and labels.
- Semantic
Green, orange, and blue indicate success, warning, and informational statuses respectively.
Todoist color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Todoist primary color is #E44332, known as Todoist Red.
Todoist Red (#E44332) is RGB(228, 67, 50) and approximately CMYK(0, 71, 78, 11).
Todoist uses several grays such as #F5F5F5 (Surface Gray), #E6E6E6 (Border Gray), and #B3B3B3 (Muted Gray) for backgrounds, borders, and muted text.
Use #E44332 for primary actions and branding, neutrals for backgrounds and surfaces, and accent colors for status or priority indicators. Maintain high contrast for accessibility.
The secondary color is Todoist Light, #FAFAFA, and the accent is Todoist Orange, #FBA026. 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 Todoist's colors consistently when it generates UI.
Make something in the spirit of Todoist
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.