Threads color palette
SocialThreads uses a minimalist, high-contrast color system centered on black and white, reflecting its modern and text-focused social platform identity. Its palette is dominated by deep blacks, crisp whites, and subtle grays for UI clarity.
threads.netThreads colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Threads BlackPrimary0, 0, 0
- Threads WhiteSecondary255, 255, 255
- Threads Light GrayAccent247, 247, 248
Surfaces
Page, cards and dividers.- Threads Deep BackgroundBackground16, 16, 16
- Threads Surface GraySurface26, 26, 26
- Threads Border GrayBorder53, 53, 53
Text
Three tiers of copy.- Threads Text WhiteText255, 255, 255
- Threads Text GraySecondary text168, 168, 168
- Threads Muted GrayMuted text110, 110, 110
Semantic
Feedback and state colors.- Threads Success GreenSuccess37, 211, 102
- Threads Warning YellowWarning255, 214, 0
- Threads Error RedError255, 59, 48
- Threads Info BlueInfo55, 151, 240
Use Threads's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
threads-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3797F0;
--error: #FF3B30;
--accent: #F7F7F8;
--border: #353535;
--primary: #000000;
--success: #25D366;
--surface: #1A1A1A;
--warning: #FFD600;
--secondary: #FFFFFF;
--text-muted: #6E6E6E;
--background: #101010;
--text-primary: #FFFFFF;
--text-secondary: #A8A8A8;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.0:1
Pass
Text on surface
Needs 4.5:1 for body text
17.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.3:1
Pass
Muted text on background
Needs 3:1 for large text
3.7:1
Pass
Muted text on surface
Needs 3:1 for large text
3.4:1
Pass
Threads gray, dark and neutral colors
Threads 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.
- Threads Deep BackgroundBackground
- HEX
- RGB
- HSL
- Threads Surface GraySurface
- HEX
- RGB
- HSL
- Threads Border GrayBorder
- HEX
- RGB
- HSL
- Threads Text WhiteText
- HEX
- RGB
- HSL
- Threads Text GraySecondary text
- HEX
- RGB
- HSL
- Threads Muted GrayMuted text
- HEX
- RGB
- HSL
About Threads's colors
Threads’ color palette is rooted in stark monochrome, using black and white for maximum contrast and legibility. Subtle accent colors are reserved for system states and notifications.
Primary black and white create a bold, minimalist foundation.
Accent grays define surfaces and UI structure.
Semantic colors are used sparingly for status and feedback.
Psychology
The dominant black and white scheme communicates clarity, focus, and modernity. Minimal use of color draws attention to content and user interactions.
Evolution
Threads’ palette has remained stable since launch, maintaining its black-and-white identity. Minor adjustments to gray tones have improved accessibility and visual hierarchy.
Where Threads uses each color
- Primary
Used for the app’s navigation bar, backgrounds, and core UI elements.
- Secondary
Applied to text, icons, and backgrounds for contrast and readability.
- Accent
Used for cards, input fields, and subtle UI highlights.
- Backgrounds
Deep backgrounds appear in dark mode and main app screens.
- Text
White and gray text colors are used for primary, secondary, and muted text throughout the app.
- Semantic
Green, yellow, red, and blue are used for success, warning, error, and info states such as notifications and status indicators.
Threads color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Threads primary color is #000000, known as Threads Black. This is used throughout the app for backgrounds and navigation.
Threads Black (#000000) is RGB(0, 0, 0) and CMYK(0, 0, 0, 100).
Threads uses several neutral tones, including Threads Light Gray (#F7F7F8), Surface Gray (#1A1A1A), and Border Gray (#353535) for UI structure and separation.
Use Threads Black (#000000) and Threads White (#FFFFFF) for primary backgrounds and text, with accent grays for surfaces and semantic colors only for status or feedback elements.
The secondary color is Threads White, #FFFFFF, and the accent is Threads Light Gray, #F7F7F8. Together with the primary they make up the three brand colors at the top of this page.
6 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 Threads's colors consistently when it generates UI.
Make something in the spirit of Threads
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
