Slack colors
The Slack color palette has 6 colors: Aubergine #4A154B, Slack Red #E01E5A, Slack Blue #36C5F0, Slack Green #2EB67D, Slack Yellow #ECB22E and Black 2 #1D1C1D. Below are HEX, RGB, HSL and OKLCH codes, contrast checks, CSS and Tailwind variables, all from its live website code checked on 16 October 2026.
Slack color codes
| Color | Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Aubergine | Primary | #4A154B | rgb(74, 21, 75) | hsl(299, 56%, 19%) | oklch(30.6% 0.108 327.1) |
| Slack Red | Accent | #E01E5A | rgb(224, 30, 90) | hsl(341, 76%, 50%) | oklch(58.8% 0.222 11.5) |
| Slack Blue | Accent | #36C5F0 | rgb(54, 197, 240) | hsl(194, 86%, 58%) | oklch(76.8% 0.13 223.2) |
| Slack Green | Accent | #2EB67D | rgb(46, 182, 125) | hsl(155, 60%, 45%) | oklch(69.1% 0.142 160.2) |
| Slack Yellow | Accent | #ECB22E | rgb(236, 178, 46) | hsl(42, 83%, 55%) | oklch(79.7% 0.152 82.7) |
| Black 2 | Text | #1D1C1D | rgb(29, 28, 29) | hsl(300, 2%, 11%) | oklch(22.8% 0.002 325.7) |
Select a color to open its own page with tints, shades, harmonies and every color format, or open the whole set in the palette generator.
Where the Slack colors come from
Slack does not publish hex values in public brand guidelines, so these were read from the code of its live website (stylesheets and the SVG files it serves) on 16 October 2026. They are the colors slack.com actually renders, which can differ slightly from print or logo colors.
- Source (live website CSS or SVG): https://cdn.prod.website-files.com/621c8d7ad9e04933c4e51ffb/css/slack-4e34f1.aed307a7f.css checked 2026-10-16
- Also: https://brand.slackhq.com/ checked 2026-10-16
Slack color contrast
White text on Slack aubergine has a contrast ratio of 13.99:1 and passes WCAG AAA for any text size. Used as a text color, Aubergine reaches 13.99:1 on white and 1.50:1 on black. Ratios are WCAG 2 (truncated, never rounded up); APCA Lc is shown as a second opinion.
| Pair | WCAG 2 ratio | WCAG 2 result | APCA | APCA guidance |
|---|---|---|---|---|
| White on Aubergine | 13.99:1 | AAA | Lc -103.2 | Preferred for body text |
| Black on Aubergine | 1.50:1 | Fails | Lc 0.0 | Not readable |
| White on Slack Red | 4.66:1 | AA | Lc -75.8 | Fine for body text |
| Black on Slack Red | 4.50:1 | AA | Lc 33.7 | Non-text elements, placeholder text |
| White on Slack Blue | 2.01:1 | Fails | Lc -43.2 | Non-text elements, placeholder text |
| Black on Slack Blue | 10.40:1 | AAA | Lc 65.2 | Content text, not long reading |
| White on Slack Green | 2.59:1 | Fails | Lc -55.3 | Large or bold text, headings |
| Black on Slack Green | 8.10:1 | AAA | Lc 53.8 | Large or bold text, headings |
| White on Slack Yellow | 1.91:1 | Fails | Lc -40.6 | Non-text elements, placeholder text |
| Black on Slack Yellow | 10.97:1 | AAA | Lc 67.6 | Content text, not long reading |
| White on Black 2 | 16.98:1 | AAA | Lc -106.3 | Preferred for body text |
| Black on Black 2 | 1.23:1 | Fails | Lc 0.0 | Not readable |
| Pair | WCAG 2 ratio | WCAG 2 result | APCA | APCA guidance |
|---|---|---|---|---|
| Black 2 on Slack Yellow | 8.87:1 | AAA | Lc 65.5 | Content text, not long reading |
| Black 2 on Slack Blue | 8.41:1 | AAA | Lc 63.0 | Content text, not long reading |
| Aubergine on Slack Yellow | 7.31:1 | AAA | Lc 61.6 | Content text, not long reading |
| Aubergine on Slack Blue | 6.93:1 | AA | Lc 59.2 | Large or bold text, headings |
Slack colors in CSS and Tailwind
Copy the Slack palette as CSS custom properties or as a Tailwind CSS v4 theme. The last snippet is an 11-step Tailwind scale (50 to 950) generated in OKLCH from Aubergine, for hover states, borders and tinted backgrounds.
:root {
--slack-aubergine: #4A154B;
--slack-red: #E01E5A;
--slack-blue: #36C5F0;
--slack-green: #2EB67D;
--slack-yellow: #ECB22E;
--slack-black-2: #1D1C1D;
}@import "tailwindcss";
@theme {
--color-slack-aubergine: #4A154B;
--color-slack-red: #E01E5A;
--color-slack-blue: #36C5F0;
--color-slack-green: #2EB67D;
--color-slack-yellow: #ECB22E;
--color-slack-black-2: #1D1C1D;
}@theme {
--color-slack-50: #FCF2FC;
--color-slack-100: #F8E2F7;
--color-slack-200: #F3C9F2;
--color-slack-300: #EDA2EC;
--color-slack-400: #E06AE2;
--color-slack-500: #D52FD9;
--color-slack-600: #BA00BE;
--color-slack-700: #9D00A1;
--color-slack-800: #820085;
--color-slack-900: #6C046F;
--color-slack-950: #4A154B;
}Named colors closest to the Slack palette
The nearest named color to each brand color, measured as perceptual distance (ΔE OK) in OKLab. Under 0.02 is hard to tell apart; above 0.05 the difference is easy to see.
| Brand color | HEX | Nearest named color | Named HEX | ΔE OK |
|---|---|---|---|---|
| Aubergine | #4A154B | Deep Violet | #490648 | 0.024 |
| Slack Red | #E01E5A | Cerise | #DE0C62 | 0.019 |
| Slack Blue | #36C5F0 | Vivid Sky Blue | #4CC9F0 | 0.017 |
| Slack Green | #2EB67D | Dark Seafoam | #1FB57A | 0.008 |
| Slack Yellow | #ECB22E | Macaroni And Cheese | #EFB435 | 0.008 |
| Black 2 | #1D1C1D | Jet | #212529 | 0.035 |
Palettes like Slack
Curated palettes that include a color close to Slack aubergine #4A154B.
How to use a Slack-style palette
- Lead with Aubergine #4A154B for buttons, links and key highlights, with white text on it.
- Give most of the layout to Black 2 #1D1C1D, about 60% of the screen, so Aubergine stands out.
- Keep Slack Red, Slack Blue, Slack Green and Slack Yellow for small accents (around 10%): status colors, illustrations or charts.
- As text on a white page, Aubergine reaches 13.99:1: it passes WCAG AAA for any text size.
To see how slack.com uses these colors today, including backgrounds, text and dark mode, run it through the website color extractor. To turn Aubergine into a full light and dark color system with accessible roles, open it in the Color System Studio.
More brand colors
- Google colors#4285F4 #EA4335 #FBBC05 #34A853
- Apple colors#0071E3 #0066CC #1D1D1F #F5F5F7
- T-Mobile colors#E20074 #A7005A #770141 #000000
- Microsoft colors#F25022 #7FBA00 #00A4EF #FFB900
- Figma colors#FF3737 #FF7237 #874FFF #00B6FF
- Shopify colors#95BF47 #5E8E3E #008060 #18181B
- Trello colors#0052CC #2684FF #253858
- Duolingo colors#58CC02 #1CB0F6 #FF4B4B #FFC800
- Dropbox colors#0061FE #1E1919 #F7F5F2 #14C8EB
- GitHub colors#0FBF3E #101411 #F2F5F3 #909692
- Notion colors#000000 #0075DE #191918 #FFB110
- Linear colors#5E6AD2 #7170FF #F4F5F8 #222326
Trademarks
Frequently asked questions
What is the Slack hex color?
The main Slack color is Aubergine #4A154B, which is rgb(74, 21, 75) in RGB. It comes from the CSS and SVG files of Slack's live website (Slack publishes no official hex values), checked on 16 October 2026.
What colors does Slack use?
Slack uses 6 core colors: Aubergine #4A154B, Slack Red #E01E5A, Slack Blue #36C5F0, Slack Green #2EB67D, Slack Yellow #ECB22E and Black 2 #1D1C1D.
What is Slack aubergine in RGB, HSL and OKLCH?
Slack aubergine #4A154B is rgb(74, 21, 75), hsl(299, 56%, 19%) and oklch(30.6% 0.108 327.1). The closest named color is Deep Violet #490648.
Should text on Slack aubergine be white or black?
White text reads better on Slack aubergine: it has a contrast ratio of 13.99:1, which passes WCAG AAA for any text size.
Where do these Slack colors come from?
The hex values were read from Slack's live website code at https://cdn.prod.website-files.com/621c8d7ad9e04933c4e51ffb/css/slack-4e34f1.aed307a7f.css on 16 October 2026. Contrast, RGB, HSL and OKLCH values on this page are calculated from those hex codes.
Can I use the Slack colors in my own design?
Colors on their own are not owned, but Slack's name, logo and the way it combines its colors are trademarks. Use these values to match Slack when you refer to it, follow its official guidelines, and do not imply a link to Slack in your own brand.
Use the Slack colors
Check slack.com live, build a color system from Aubergine, or remix the palette.