TikTok color palette
SocialTikTok's color identity is defined by a bold black primary, accented by vibrant cyan and magenta, with crisp white and dark gray tones for contrast. The palette is instantly recognizable and supports high-impact visuals across digital platforms.
tiktok.comTikTok colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- TikTok BlackPrimary0, 0, 0
- TikTok WhiteSecondary255, 255, 255
- TikTok CyanAccent37, 244, 238
Surfaces
Page, cards and dividers.- TikTok Dark BackgroundBackground18, 18, 18
- TikTok Surface GraySurface34, 34, 34
- TikTok Border GrayBorder47, 47, 47
Text
Three tiers of copy.- TikTok Primary TextText255, 255, 255
- TikTok Secondary TextSecondary text163, 163, 163
- TikTok Muted TextMuted text102, 102, 102
Semantic
Feedback and state colors.- TikTok Success GreenSuccess78, 224, 125
- TikTok Warning YellowWarning255, 214, 0
- TikTok Error RedError255, 46, 46
- TikTok MagentaInfo254, 44, 85
Use TikTok's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
tiktok-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #FE2C55;
--error: #FF2E2E;
--accent: #25F4EE;
--border: #2F2F2F;
--primary: #000000;
--success: #4EE07D;
--surface: #222222;
--warning: #FFD600;
--secondary: #FFFFFF;
--text-muted: #666666;
--background: #121212;
--text-primary: #FFFFFF;
--text-secondary: #A3A3A3;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.7:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.3:1
Pass
Muted text on background
Needs 3:1 for large text
3.3:1
Pass
Muted text on surface
Needs 3:1 for large text
2.8:1
Fail
TikTok gray, dark and neutral colors
TikTok 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.
- TikTok Dark BackgroundBackground
- HEX
- RGB
- HSL
- TikTok Surface GraySurface
- HEX
- RGB
- HSL
- TikTok Border GrayBorder
- HEX
- RGB
- HSL
- TikTok Primary TextText
- HEX
- RGB
- HSL
- TikTok Secondary TextSecondary text
- HEX
- RGB
- HSL
- TikTok Muted TextMuted text
- HEX
- RGB
- HSL
About TikTok's colors
TikTok's palette is built around high-contrast black and white, energized by neon cyan and magenta accents. The colors are designed for digital vibrancy and visual clarity.
Primary black contrasts with white for readability.
Cyan and magenta accents highlight interactive elements.
Dark grays provide depth and separation in the UI.
Psychology
The black and white base conveys modernity and simplicity, while the neon accents evoke energy and creativity. The palette is youthful and dynamic, appealing to a global audience.
Evolution
TikTok's core palette has remained stable since its global launch, with slight adjustments to accent tones for improved accessibility. The brand has consistently used its signature cyan and magenta for recognizability.
Where TikTok uses each color
- Primary
Used for app backgrounds, navigation bars, and video frames.
- Secondary
Applied to text, icons, and content backgrounds for contrast.
- Accent
Highlights buttons, icons, and interactive elements throughout the app.
- Backgrounds
Dark backgrounds dominate the app interface and video feed.
- Text
Primary text is white on dark backgrounds, with secondary and muted grays for less prominent information.
- Semantic
Green, yellow, and red are used for status indicators such as success, warnings, and errors.
TikTok color questions
Hex codes, RGB values, neutrals and how to use the palette.
The TikTok primary color hex code is #000000, known as TikTok Black.
TikTok Black (#000000) is RGB(0, 0, 0) and CMYK(0, 0, 0, 100).
TikTok uses #121212 (Dark Background), #222222 (Surface Gray), and #2F2F2F (Border Gray) for its dark and neutral UI elements.
Use TikTok Black (#000000) for backgrounds and navigation, with cyan (#25F4EE) and magenta (#FE2C55) as accents. Whites and grays provide contrast and hierarchy for text and surfaces.
The secondary color is TikTok White, #FFFFFF, and the accent is TikTok Cyan, #25F4EE. Together with the primary they make up the three brand colors at the top of this page.
5 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 TikTok's colors consistently when it generates UI.
Make something in the spirit of TikTok
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
