Slack

Brand colors

Slack's palette uses four distinct hues, historically drawn from its logo, alongside a deep aubergine used across its product UI.

slack.com →

These values are documented for reference and education. The trademark and brand identity belong to their owner; no affiliation or endorsement is implied, and using another company's brand identity in commercial work may require their permission.

Colors

Export color codes

Aubergine #4a154b

Blue #36c5f0

Green #2eb67d

Yellow #ecb22e

Pink #e01e5a

Accessibility snapshot

Each color's WCAG contrast ratio against white and black text — AA means it can carry normal-size text (≥4.5:1) on that background. Test your exact pairings in the contrast checker.

#4a154b White text: 14:1 AA Black text: 1.5:1 —

#36c5f0 White text: 2.02:1 — Black text: 10.4:1 AA

#2eb67d White text: 2.59:1 — Black text: 8.1:1 AA

#ecb22e White text: 1.91:1 — Black text: 10.97:1 AA

#e01e5a White text: 4.66:1 AA Black text: 4.5:1 AA

Color blindness safety

Every pair in this palette (10 pairs) checked with CIEDE2000 under normal vision plus the four strongest color vision deficiency types. A pair is flagged when it drops below ΔE 10 — the zone where colors get hard to tell apart at a glance.

#36c5f0 vs #ecb22e Achromatopsia ΔE 1.3 Effectively identical

#36c5f0 vs #2eb67d Achromatopsia ΔE 6 Hard to distinguish

#2eb67d vs #ecb22e Achromatopsia ΔE 7.4 Hard to distinguish

#ecb22e vs #e01e5a Deuteranopia ΔE 7.5 Hard to distinguish

Swatches show the pair as that viewer would see it. Flagged pairs are fine decoratively — just don’t make them the only difference between two states. Explore any pair in the simulator.

In a real interface

Roles assigned by lightness: the lightest color as background, the darkest as text, the first two palette colors as primary and accent.

Slack

This is how the palette reads when its colors take on interface roles.

Primary action Secondary Badge

CSS variables

CSS

--color-1: #4a154b;
--color-2: #36c5f0;
--color-3: #2eb67d;
--color-4: #ecb22e;
--color-5: #e01e5a;

Related tools

Colors

HEX to RGB Converter

Convert any HEX color code to its RGB and HSL equivalents, live, with copy-to-clipboard values.

Try it → Accessibility

Contrast Checker

Check the WCAG contrast ratio between any two colors, live, with AA/AAA pass-fail results.

Try it → Generators

Palette Generator

Generate complementary, analogous, triadic, split-complementary, tetradic, square, and monochromatic palettes from any base color.

Try it →

Make this palette your own

Turn it into a gradient with one click, or start fresh from any of its colors.

Build a gradient from these colors → Play Color Match