Slack color palette
SocialSlack's four-color palette of aubergine, blue, green, yellow, and red creates a distinctive, friendly identity that stands out in enterprise software.
slack.comSlack colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Slack AuberginePrimary74, 21, 75
- Slack BlueSecondary54, 197, 240
- Slack GreenAccent46, 182, 125
Surfaces
Page, cards and dividers.- Slack WhiteBackground255, 255, 255
- Slack SurfaceSurface248, 248, 248
- Slack BorderBorder221, 221, 221
Text
Three tiers of copy.- Slack TextText29, 28, 29
- Slack SecondarySecondary text97, 96, 97
- Slack MutedMuted text134, 134, 134
Semantic
Feedback and state colors.- Slack SuccessSuccess46, 182, 125
- Slack YellowWarning236, 178, 46
- Slack RedError224, 30, 90
- Slack InfoInfo54, 197, 240
Use Slack's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
slack-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #36C5F0;
--error: #E01E5A;
--accent: #2EB67D;
--border: #DDDDDD;
--primary: #4A154B;
--success: #2EB67D;
--surface: #F8F8F8;
--warning: #ECB22E;
--secondary: #36C5F0;
--text-muted: #868686;
--background: #FFFFFF;
--text-primary: #1D1C1D;
--text-secondary: #616061;
}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.0:1
Pass
Text on surface
Needs 4.5:1 for body text
16.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.9:1
Pass
Muted text on background
Needs 3:1 for large text
3.6:1
Pass
Muted text on surface
Needs 3:1 for large text
3.4:1
Pass
Slack gray and neutral colors
The quiet part of the Slack palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Slack WhiteBackground
- HEX
- RGB
- HSL
- Slack SurfaceSurface
- HEX
- RGB
- HSL
- Slack BorderBorder
- HEX
- RGB
- HSL
- Slack TextText
- HEX
- RGB
- HSL
- Slack SecondarySecondary text
- HEX
- RGB
- HSL
- Slack MutedMuted text
- HEX
- RGB
- HSL
About Slack's colors
Slack's unusual choice of aubergine (dark purple) as a primary color sets it apart from the sea of blue enterprise tools. The four accent colors (blue, green, yellow, red) from the hashtag logo add warmth and personality.
Aubergine (#4A154B) provides a distinctive dark anchor that no competitor uses
Four logo colors (blue, green, yellow, red) are equally saturated and balanced
The warm-cool interplay between aubergine and the bright accents creates energy
Psychology
Aubergine communicates sophistication and creativity, positioning Slack as more than basic enterprise software. The four bright colors suggest communication, connection, and the mixing of ideas — perfect for a messaging platform.
Evolution
Slack simplified from a rainbow/plaid logo to the current four-color mark in 2019. The aubergine has been refined from a brighter purple to the current deeper, more professional shade. The marketing has become cleaner while maintaining the playful spirit.
Where Slack uses each color
- Primary
Aubergine (#4A154B) defines the sidebar, dark sections, and primary brand presence — it's the most recognizable element of Slack's interface.
- Secondary
Slack Blue (#36C5F0) highlights active states, links, and notification badges.
- Accent
Slack Green (#2EB67D) signals online status, success confirmations, and positive actions.
- Backgrounds
White backgrounds with light gray surfaces keep the workspace clean and content-focused.
- Text
Near-black text (#1D1C1D) with warm gray secondaries maintain readability across themes.
- Semantic
The four logo colors naturally map to semantic roles: blue for info, green for success, yellow for warnings, and red (pink) for errors and important notifications.
Slack color questions
Hex codes, RGB values, neutrals and how to use the palette.
Slack's signature color is Aubergine (#4A154B), a deep purple used for the sidebar and brand identity. The four accent colors are Blue (#36C5F0), Green (#2EB67D), Yellow (#ECB22E), and Red-Pink (#E01E5A).
Aubergine was chosen to differentiate Slack from the typical blue-dominated enterprise software landscape. The deep purple conveys creativity and warmth while maintaining professionalism, helping Slack stand out as a more human-centered work tool.
Slack redesigned their logo in January 2019, simplifying from a plaid/hashtag pattern to a cleaner four-color mark. The rebrand maintained the core colors while making the logo more versatile and recognizable at small sizes.
Slack's primary color is Slack Aubergine, hex #4A154B (RGB 74, 21, 75). It is the color used for the logo and the most prominent brand moments.
The secondary color is Slack Blue, #36C5F0, and the accent is Slack Green, #2EB67D. Together with the primary they make up the three brand colors at the top of this page.
Slack uses #FFFFFF for backgrounds, #F8F8F8 for surfaces and #DDDDDD for borders. Text runs #1D1C1D, #616061 and #868686 from strongest to most muted.
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 Slack's colors consistently when it generates UI.
Make something in the spirit of Slack
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.