X color palette
SocialX (formerly Twitter) uses a stark, high-contrast palette centered around black and white, reflecting its minimalist and bold brand identity. The color system emphasizes clarity and simplicity across its social platform.
x.comX colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- X BlackPrimary0, 0, 0
- X WhiteSecondary255, 255, 255
- X BlueAccent29, 155, 240
Surfaces
Page, cards and dividers.- X Dark BackgroundBackground21, 32, 43
- X Surface GraySurface22, 24, 28
- X Border GrayBorder58, 59, 60
Text
Three tiers of copy.- X Primary TextText217, 217, 217
- X Secondary TextSecondary text113, 118, 123
- X Muted TextMuted text83, 100, 113
Semantic
Feedback and state colors.- X Success GreenSuccess0, 186, 124
- X Warning YellowWarning255, 212, 0
- X Error RedError244, 33, 46
- X Info BlueInfo29, 155, 240
Use X's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
x-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1D9BF0;
--error: #F4212E;
--accent: #1D9BF0;
--border: #3A3B3C;
--primary: #000000;
--success: #00BA7C;
--surface: #16181C;
--warning: #FFD400;
--secondary: #FFFFFF;
--text-muted: #536471;
--background: #15202B;
--text-primary: #D9D9D9;
--text-secondary: #71767B;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
11.7:1
Pass
Text on surface
Needs 4.5:1 for body text
12.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
3.6:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
3.9:1
Fail
Muted text on background
Needs 3:1 for large text
2.7:1
Fail
Muted text on surface
Needs 3:1 for large text
2.9:1
Fail
X background, border and text colors
X runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- X Dark BackgroundBackground
- HEX
- RGB
- HSL
- X Surface GraySurface
- HEX
- RGB
- HSL
- X Border GrayBorder
- HEX
- RGB
- HSL
- X Primary TextText
- HEX
- RGB
- HSL
- X Secondary TextSecondary text
- HEX
- RGB
- HSL
- X Muted TextMuted text
- HEX
- RGB
- HSL
About X's colors
X's color palette is grounded in monochrome tones with a signature blue accent, creating a modern and direct visual language. The use of black and white ensures maximum legibility and contrast.
Primary black contrasts with white for clarity.
Accent blue is used for interactive elements.
Grays provide depth and hierarchy.
Psychology
Black conveys authority and sophistication, while blue signals trust and reliability. The minimal palette supports a focus on content and user interaction.
Evolution
The palette shifted from Twitter's lighter blues to a more monochrome scheme after rebranding to X. The blue accent remains as a nod to the platform's legacy.
Where X uses each color
- Primary
X Black is used for the logo, navigation bar, and primary backgrounds in dark mode.
- Secondary
X White appears in light mode backgrounds and text.
- Accent
X Blue highlights links, buttons, and interactive elements.
- Backgrounds
X Dark Background is the main app background in dark mode.
- Text
X Primary Text is used for main content, while secondary and muted tones provide hierarchy.
- Semantic
Success, warning, and error colors are used for notifications and status indicators.
X color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary color for X is #000000, known as X Black. This is used for the logo and main navigation.
The RGB value for X Black is (0, 0, 0), and the CMYK value is (0, 0, 0, 100). This matches the hex code #000000.
X uses a range of dark grays such as #15202B for backgrounds and #16181C for surfaces. These provide depth and separate interface elements.
Use X Black (#000000) for primary branding and navigation, with X Blue (#1D9BF0) for interactive elements. Grays and semantic colors support UI hierarchy and feedback.
The secondary color is X White, #FFFFFF, and the accent is X Blue, #1D9BF0. Together with the primary they make up the three brand colors at the top of this page.
2 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 X's colors consistently when it generates UI.
Make something in the spirit of X
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
