Medium color palette
SocialMedium's color identity is defined by a minimalist palette centered on black, white, and a range of neutral grays, reflecting its focus on clarity and readability. The brand uses green as an accent for interactive elements and highlights.
medium.comMedium colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Medium BlackPrimary0, 0, 0
- Medium WhiteSecondary255, 255, 255
- Medium GreenAccent2, 184, 117
Surfaces
Page, cards and dividers.- Medium WhiteBackground255, 255, 255
- Medium Light GraySurface249, 249, 249
- Medium Border GrayBorder229, 229, 229
Text
Three tiers of copy.- Medium CharcoalText36, 36, 36
- Medium GraySecondary text107, 107, 107
- Medium Muted GrayMuted text179, 179, 177
Semantic
Feedback and state colors.- Medium GreenSuccess2, 184, 117
- Medium YellowWarning255, 192, 23
- Medium RedError228, 87, 46
- Medium Info GreenInfo26, 137, 23
Use Medium's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
medium-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1A8917;
--error: #E4572E;
--accent: #02B875;
--border: #E5E5E5;
--primary: #000000;
--success: #02B875;
--surface: #F9F9F9;
--warning: #FFC017;
--secondary: #FFFFFF;
--text-muted: #B3B3B1;
--background: #FFFFFF;
--text-primary: #242424;
--text-secondary: #6B6B6B;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.5:1
Pass
Text on surface
Needs 4.5:1 for body text
14.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.1: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
Medium gray and neutral colors
The quiet part of the Medium palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Medium WhiteBackground
- HEX
- RGB
- HSL
- Medium Light GraySurface
- HEX
- RGB
- HSL
- Medium Border GrayBorder
- HEX
- RGB
- HSL
- Medium CharcoalText
- HEX
- RGB
- HSL
- Medium GraySecondary text
- HEX
- RGB
- HSL
- Medium Muted GrayMuted text
- HEX
- RGB
- HSL
About Medium's colors
Medium's palette is rooted in monochrome and neutral tones, with green as a distinctive accent. The restrained use of color emphasizes content and readability.
Primary black and white create strong contrast.
Accent green is used sparingly for calls to action.
Grays provide hierarchy and subtle separation.
Psychology
Black and white convey clarity, professionalism, and minimalism, supporting Medium's editorial focus. The green accent signals action and growth, drawing attention without overwhelming.
Evolution
Medium's palette has remained largely consistent since its launch, with only minor adjustments to gray tones for improved accessibility. The green accent has always been a core part of the brand's identity.
Where Medium uses each color
- Primary
Used for the Medium logo, navigation bar, and primary text.
- Secondary
Backgrounds and large content areas use white for maximum readability.
- Accent
Green highlights buttons, links, and interactive elements.
- Backgrounds
White and very light gray are used for page and card backgrounds.
- Text
Charcoal and gray tones provide hierarchy for headlines, body text, and metadata.
- Semantic
Green, yellow, and red are used for success, warning, and error messages respectively.
Medium color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Medium primary color hex code is #000000. This black is used for the logo and main text.
Medium Black (#000000) in RGB is (0, 0, 0) and in CMYK is (0, 0, 0, 100).
Medium uses a range of grays including #F9F9F9 for surfaces, #E5E5E5 for borders, #6B6B6B for secondary text, and #B3B3B1 for muted text.
Use black and white for primary elements and backgrounds, with green (#02B875) reserved for accents and calls to action. Grays establish hierarchy and should be used for supporting UI and text.
The secondary color is Medium White, #FFFFFF, and the accent is Medium Green, #02B875. 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 Medium's colors consistently when it generates UI.
Make something in the spirit of Medium
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.