ClickUp color palette
SaaSClickUp's color identity is defined by a vibrant purple primary, supported by a spectrum of accent and neutral tones for a modern, accessible SaaS interface. The palette emphasizes clarity, energy, and usability across digital platforms.
clickup.comClickUp colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- ClickUp PurplePrimary123, 104, 238
- ClickUp PinkSecondary255, 99, 212
- ClickUp TealAccent0, 196, 204
Surfaces
Page, cards and dividers.- ClickUp WhiteBackground255, 255, 255
- ClickUp Light GraySurface247, 248, 250
- ClickUp Border GrayBorder228, 231, 236
Text
Three tiers of copy.- ClickUp BlackText26, 26, 26
- ClickUp Secondary GraySecondary text107, 108, 126
- ClickUp Muted GrayMuted text177, 177, 184
Semantic
Feedback and state colors.- ClickUp GreenSuccess0, 200, 117
- ClickUp YellowWarning255, 199, 0
- ClickUp RedError255, 77, 79
- ClickUp BlueInfo59, 153, 252
Use ClickUp's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
clickup-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B99FC;
--error: #FF4D4F;
--accent: #00C4CC;
--border: #E4E7EC;
--primary: #7B68EE;
--success: #00C875;
--surface: #F7F8FA;
--warning: #FFC700;
--secondary: #FF63D4;
--text-muted: #B1B1B8;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #6B6C7E;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
16.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.9: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
2.0:1
Fail
ClickUp background, border and text colors
The quiet part of the ClickUp palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- ClickUp WhiteBackground
- HEX
- RGB
- HSL
- ClickUp Light GraySurface
- HEX
- RGB
- HSL
- ClickUp Border GrayBorder
- HEX
- RGB
- HSL
- ClickUp BlackText
- HEX
- RGB
- HSL
- ClickUp Secondary GraySecondary text
- HEX
- RGB
- HSL
- ClickUp Muted GrayMuted text
- HEX
- RGB
- HSL
About ClickUp's colors
ClickUp's palette is built around a bold purple, contrasted with energetic accents and balanced by soft neutrals. This combination supports both brand recognition and functional clarity in UI design.
Primary purple paired with pink and teal accents.
Neutral grays used for backgrounds and surfaces.
Semantic colors (green, yellow, red, blue) for status and feedback.
Psychology
The purple primary conveys creativity and innovation, while the pink and teal accents add vibrancy and approachability. Neutral grays maintain a clean, professional environment for productivity.
Evolution
ClickUp's palette has remained consistent since its major rebrand, with the purple primary and accent colors forming the core identity. Minor adjustments to neutrals and semantic colors have improved accessibility and contrast.
Where ClickUp uses each color
- Primary
Used for main actions, highlights, and the ClickUp logo across web and mobile apps.
- Secondary
Appears in buttons, links, and UI highlights to draw attention.
- Accent
Utilized for notifications, badges, and interactive elements.
- Backgrounds
White and light gray backgrounds are standard for app screens and dashboards.
- Text
Primary and secondary grays are used for headings, body text, and muted UI labels.
- Semantic
Green, yellow, red, and blue denote status, alerts, and informational messages throughout the interface.
ClickUp color questions
Hex codes, RGB values, neutrals and how to use the palette.
The ClickUp primary color is #7B68EE, known as ClickUp Purple. This color is central to the brand's identity and user interface.
The RGB value for #7B68EE is (123, 104, 238). For print, the approximate CMYK is (48, 56, 0, 7).
ClickUp uses #F7F8FA (ClickUp Light Gray), #E4E7EC (ClickUp Border Gray), #6B6C7E (ClickUp Secondary Gray), and #B1B1B8 (ClickUp Muted Gray) for backgrounds, borders, and text. These neutrals ensure readability and a clean interface.
Use ClickUp Purple (#7B68EE) for primary actions and branding, with pink (#FF63D4) and teal (#00C4CC) as accents. Neutrals and semantic colors should support usability and accessibility in all digital contexts.
The secondary color is ClickUp Pink, #FF63D4, and the accent is ClickUp Teal, #00C4CC. 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 ClickUp's colors consistently when it generates UI.
Make something in the spirit of ClickUp
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.