Adobe color palette
TechAdobe's color identity is defined by its bold Adobe Red, paired with a minimalist grayscale palette for digital products and branding. The palette emphasizes clarity, creativity, and strong visual presence.
adobe.comAdobe colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Adobe RedPrimary255, 0, 0
- Adobe ScarletSecondary250, 15, 0
- Adobe Light RedAccent255, 98, 99
Surfaces
Page, cards and dividers.- Adobe WhiteBackground255, 255, 255
- Adobe Light GraySurface245, 245, 245
- Adobe Border GrayBorder234, 234, 234
Text
Three tiers of copy.- Adobe CharcoalText34, 34, 34
- Adobe Medium GraySecondary text80, 80, 80
- Adobe Muted GrayMuted text117, 117, 117
Semantic
Feedback and state colors.- Adobe Success GreenSuccess39, 174, 96
- Adobe Warning OrangeWarning243, 156, 18
- Adobe Error RedError198, 40, 40
- Adobe Info BlueInfo41, 128, 185
Use Adobe's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
adobe-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2980B9;
--error: #C62828;
--accent: #FF6263;
--border: #EAEAEA;
--primary: #FF0000;
--success: #27AE60;
--surface: #F5F5F5;
--warning: #F39C12;
--secondary: #FA0F00;
--text-muted: #757575;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #505050;
}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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.4:1
Pass
Muted text on background
Needs 3:1 for large text
4.6:1
Pass
Muted text on surface
Needs 3:1 for large text
4.2:1
Pass
Adobe gray and neutral colors
The quiet part of the Adobe palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Adobe WhiteBackground
- HEX
- RGB
- HSL
- Adobe Light GraySurface
- HEX
- RGB
- HSL
- Adobe Border GrayBorder
- HEX
- RGB
- HSL
- Adobe CharcoalText
- HEX
- RGB
- HSL
- Adobe Medium GraySecondary text
- HEX
- RGB
- HSL
- Adobe Muted GrayMuted text
- HEX
- RGB
- HSL
About Adobe's colors
Adobe's palette centers on a vivid red, contrasted with a neutral grayscale to maintain focus and clarity. The use of red signifies creativity and energy, while grays provide balance and professionalism.
Primary red is complemented by neutral backgrounds.
Accent reds are used for highlights and calls to action.
Grayscale tones support legibility and visual hierarchy.
Psychology
Red evokes excitement, passion, and creativity, aligning with Adobe's creative audience. Grays and whites convey trust, stability, and a modern digital aesthetic.
Evolution
Adobe's core red has remained consistent, reinforcing brand recognition. The grayscale UI palette has evolved for accessibility and modern digital standards.
Where Adobe uses each color
- Primary
Adobe Red is used in the logo, key buttons, and primary navigation highlights.
- Secondary
Adobe Scarlet appears in hover states and promotional banners.
- Accent
Adobe Light Red is used for subtle highlights and notification badges.
- Backgrounds
Adobe White and Light Gray are used for app and website backgrounds.
- Text
Adobe Charcoal and Medium Gray are used for primary and secondary text across digital products.
- Semantic
Success Green, Warning Orange, Error Red, and Info Blue are used for status indicators and alerts.
Adobe color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Adobe brand color is Adobe Red, with the hex code #FF0000.
Adobe Red is RGB(255, 0, 0) and CMYK(0, 100, 100, 0). Its hex code is #FF0000.
Adobe uses a range of grays including Adobe Light Gray (#F5F5F5), Border Gray (#EAEAEA), and Charcoal (#222222) for backgrounds, borders, and text.
Use Adobe Red (#FF0000) for primary branding and calls to action, with grays and whites for backgrounds and text to ensure clarity and accessibility.
The secondary color is Adobe Scarlet, #FA0F00, and the accent is Adobe Light Red, #FF6263. 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 Adobe's colors consistently when it generates UI.
Make something in the spirit of Adobe
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.