Instagram color palette
SocialInstagram's color system is defined by a vibrant gradient and bold accent hues, with a focus on energetic magentas and oranges. The palette is supported by deep darks and clean neutrals for UI clarity.
instagram.comInstagram colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Instagram MagentaPrimary255, 0, 105
- Instagram YellowSecondary255, 220, 128
- Instagram PurpleAccent131, 58, 180
Surfaces
Page, cards and dividers.- Instagram WhiteBackground255, 255, 255
- Instagram Light GraySurface250, 250, 250
- Instagram Border GrayBorder219, 219, 219
Text
Three tiers of copy.- Instagram CharcoalText38, 38, 38
- Instagram Secondary GraySecondary text142, 142, 142
- Instagram Muted GrayMuted text199, 199, 199
Semantic
Feedback and state colors.- Instagram Success GreenSuccess39, 174, 96
- Instagram Warning YellowWarning247, 183, 49
- Instagram Error RedError237, 73, 86
- Instagram Info BlueInfo56, 151, 240
Use Instagram's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
instagram-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3897F0;
--error: #ED4956;
--accent: #833AB4;
--border: #DBDBDB;
--primary: #FF0069;
--success: #27AE60;
--surface: #FAFAFA;
--warning: #F7B731;
--secondary: #FFDC80;
--text-muted: #C7C7C7;
--background: #FFFFFF;
--text-primary: #262626;
--text-secondary: #8E8E8E;
}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.1:1
Pass
Text on surface
Needs 4.5:1 for body text
14.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
3.3:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
3.1:1
Fail
Muted text on background
Needs 3:1 for large text
1.7:1
Fail
Muted text on surface
Needs 3:1 for large text
1.6:1
Fail
Instagram gray and neutral colors
The quiet part of the Instagram palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Instagram WhiteBackground
- HEX
- RGB
- HSL
- Instagram Light GraySurface
- HEX
- RGB
- HSL
- Instagram Border GrayBorder
- HEX
- RGB
- HSL
- Instagram CharcoalText
- HEX
- RGB
- HSL
- Instagram Secondary GraySecondary text
- HEX
- RGB
- HSL
- Instagram Muted GrayMuted text
- HEX
- RGB
- HSL
About Instagram's colors
Instagram's palette is built around a dynamic gradient, blending magenta, orange, and purple for a lively, modern feel. Neutral grays and white provide balance and readability in the UI.
Primary magenta is complemented by yellow and purple in the gradient.
Neutrals anchor the vivid accent colors.
Semantic colors (green, red, blue) are reserved for status and feedback.
Psychology
The vibrant gradient evokes creativity, energy, and approachability, appealing to a youthful audience. Neutrals and deep grays ensure focus and usability in content-heavy interfaces.
Evolution
Instagram's palette evolved from a simple blue and white scheme to its current multicolor gradient in 2016. The core gradient and supporting neutrals have remained consistent since then.
Where Instagram uses each color
- Primary
Used in the app icon, key buttons, and highlight elements.
- Secondary
Appears in the gradient backgrounds and promotional graphics.
- Accent
Used in gradients, icons, and interactive UI elements.
- Backgrounds
White and light gray are used for main app backgrounds and feed surfaces.
- Text
Charcoal and gray tones are used for primary and secondary text throughout the app.
- Semantic
Green, yellow, red, and blue are used for status, alerts, and feedback messages.
Instagram color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Instagram primary color hex code is #FF0069. This vibrant magenta is central to the brand's visual identity.
Instagram Magenta (#FF0069) has an RGB value of (255, 0, 105) and a CMYK value of (0, 100, 59, 0).
Instagram uses #FAFAFA (Light Gray), #DBDBDB (Border Gray), #262626 (Charcoal), #8E8E8E (Secondary Gray), and #C7C7C7 (Muted Gray) for UI backgrounds and text. These neutrals ensure content clarity and accessibility.
The gradient and primary colors should be used for branding, key actions, and highlights, while neutrals and semantic colors structure the UI and feedback. Always use the exact hex codes to maintain brand consistency.
The secondary color is Instagram Yellow, #FFDC80, and the accent is Instagram Purple, #833AB4. 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 Instagram's colors consistently when it generates UI.
Make something in the spirit of Instagram
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.