Mastodon color palette
SocialMastodon uses a distinctive palette centered around a vibrant blue-violet, complemented by soft neutrals and subtle accent colors. The brand's color system is designed for clarity, accessibility, and a friendly, open social experience.
mastodon.socialMastodon colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Mastodon Blue-VioletPrimary99, 100, 255
- Mastodon CharcoalSecondary40, 44, 55
- Mastodon Pale BlueAccent155, 174, 200
Surfaces
Page, cards and dividers.- Mastodon WhiteBackground255, 255, 255
- Mastodon Light GraySurface244, 246, 250
- Mastodon Border GrayBorder217, 225, 232
Text
Three tiers of copy.- Mastodon CharcoalText40, 44, 55
- Mastodon SlateSecondary text97, 107, 122
- Mastodon Pale BlueMuted text155, 174, 200
Semantic
Feedback and state colors.- Mastodon Success GreenSuccess46, 204, 64
- Mastodon Warning OrangeWarning255, 173, 31
- Mastodon Error RedError223, 64, 90
- Mastodon Blue-VioletInfo99, 100, 255
Use Mastodon's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
mastodon-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #6364FF;
--error: #DF405A;
--accent: #9BAEC8;
--border: #D9E1E8;
--primary: #6364FF;
--success: #2ECC40;
--surface: #F4F6FA;
--warning: #FFAD1F;
--secondary: #282C37;
--text-muted: #9BAEC8;
--background: #FFFFFF;
--text-primary: #282C37;
--text-secondary: #616B7A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
13.9:1
Pass
Text on surface
Needs 4.5:1 for body text
12.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.0:1
Pass
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
Mastodon background, border and text colors
The quiet part of the Mastodon palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Mastodon WhiteBackground
- HEX
- RGB
- HSL
- Mastodon Light GraySurface
- HEX
- RGB
- HSL
- Mastodon Border GrayBorder
- HEX
- RGB
- HSL
- Mastodon CharcoalText
- HEX
- RGB
- HSL
- Mastodon SlateSecondary text
- HEX
- RGB
- HSL
- Mastodon Pale BlueMuted text
- HEX
- RGB
- HSL
About Mastodon's colors
Mastodon's color palette is built around a signature blue-violet, balanced by dark and light neutrals for readability and comfort. Accent colors are used sparingly for clarity and accessibility.
Primary blue-violet is contrasted with deep charcoal for UI elements.
Pale blue and light gray provide gentle highlights and backgrounds.
Semantic colors (green, orange, red) are reserved for status messaging.
Psychology
The blue-violet primary conveys trust, openness, and a sense of community. Neutral tones support a calm, readable interface.
Evolution
Mastodon's palette has remained consistent since its early versions, with minor adjustments to gray tones for improved accessibility. The signature blue-violet has always been central to the brand identity.
Where Mastodon uses each color
- Primary
Used for main action buttons, links, and key highlights across the Mastodon interface.
- Secondary
Appears in navigation bars, headers, and backgrounds for contrast.
- Accent
Used for subtle highlights, icons, and less prominent UI elements.
- Backgrounds
White and light gray are used for main backgrounds and content areas.
- Text
Charcoal and slate are used for primary and secondary text, ensuring readability.
- Semantic
Green, orange, and red are used for success, warning, and error states respectively.
Mastodon color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Mastodon primary color is #6364FF. This blue-violet is used for key interface elements and branding.
The RGB value for #6364FF is (99, 100, 255). For CMYK, it is approximately (61, 60, 0, 0).
Mastodon uses #282C37 (Charcoal) for dark UI elements and #F4F6FA (Light Gray) for backgrounds. These neutrals ensure good contrast and readability.
Use #6364FF for primary actions and highlights, with neutral tones for backgrounds and text. Reserve semantic colors for status indicators only.
The secondary color is Mastodon Charcoal, #282C37, and the accent is Mastodon Pale Blue, #9BAEC8. 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 Mastodon's colors consistently when it generates UI.
Make something in the spirit of Mastodon
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.