Things color palette
SaaSThings uses a clean, minimal color palette centered around its signature blue, complemented by neutral greys and subtle accent hues. The palette is designed for clarity and focus in productivity software.
culturedcode.comThings colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Things BluePrimary25, 118, 210
- Things Deep BlueSecondary21, 101, 192
- Things Accent YellowAccent255, 179, 0
Surfaces
Page, cards and dividers.- Things Light BackgroundBackground247, 247, 247
- Things White SurfaceSurface255, 255, 255
- Things Light BorderBorder224, 224, 224
Text
Three tiers of copy.- Things Primary TextText34, 34, 34
- Things Secondary TextSecondary text117, 117, 117
- Things Muted TextMuted text189, 189, 189
Semantic
Feedback and state colors.- Things Success GreenSuccess67, 160, 71
- Things Warning OrangeWarning255, 160, 0
- Things Error RedError229, 57, 53
- Things Info BlueInfo2, 136, 209
Use Things's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
things-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0288D1;
--error: #E53935;
--accent: #FFB300;
--border: #E0E0E0;
--primary: #1976D2;
--success: #43A047;
--surface: #FFFFFF;
--warning: #FFA000;
--secondary: #1565C0;
--text-muted: #BDBDBD;
--background: #F7F7F7;
--text-primary: #222222;
--text-secondary: #757575;
}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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.3:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
1.8:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Things gray and neutral colors
The quiet part of the Things palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Things Light BackgroundBackground
- HEX
- RGB
- HSL
- Things White SurfaceSurface
- HEX
- RGB
- HSL
- Things Light BorderBorder
- HEX
- RGB
- HSL
- Things Primary TextText
- HEX
- RGB
- HSL
- Things Secondary TextSecondary text
- HEX
- RGB
- HSL
- Things Muted TextMuted text
- HEX
- RGB
- HSL
About Things's colors
Things' palette is built around a strong blue primary, paired with neutral greys for clarity and subtle accent colors for status and highlights. The overall effect supports focus and usability in a productivity context.
Primary blue is complemented by a deeper blue for hierarchy.
Accent yellow is used sparingly for highlights and notifications.
Neutrals provide structure and reduce visual noise.
Psychology
Blue conveys trust, calm, and reliability, fitting for a task management tool. The minimal use of accent colors helps users stay focused on their tasks.
Evolution
The Things palette has remained stable over time, with minor adjustments to grey tones for improved accessibility. The core blue has been consistent since early versions.
Where Things uses each color
- Primary
Used for main buttons, active states, and key navigation elements.
- Secondary
Applied to secondary buttons and less prominent UI elements.
- Accent
Highlights notifications, badges, and important status indicators.
- Backgrounds
Light grey and white backgrounds are used throughout the app interface.
- Text
Primary and secondary text colors are used for content and labels.
- Semantic
Success, warning, and error colors appear in status messages and alerts.
Things color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Things brand color is Things Blue, hex code #1976D2. This is used for primary actions and highlights.
Things Blue (#1976D2) in RGB is (25, 118, 210). For print, its approximate CMYK is (88, 44, 0, 18).
Things uses #F7F7F7 for light backgrounds, #E0E0E0 for borders, and #222222 for primary text. These provide a clean and readable interface.
Use Things Blue (#1976D2) for primary actions, neutrals for backgrounds and text, and accent colors only for highlights or status. Maintain high contrast for accessibility.
The secondary color is Things Deep Blue, #1565C0, and the accent is Things Accent Yellow, #FFB300. Together with the primary they make up the three brand colors at the top of this page.
3 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 Things's colors consistently when it generates UI.
Make something in the spirit of Things
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.