Dropbox color palette
TechDropbox's color system is defined by a vibrant blue primary, complemented by a range of neutral grays and subtle accent colors. The palette is designed for clarity, simplicity, and strong brand recognition across digital and print applications.
dropbox.comDropbox colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Dropbox BluePrimary0, 97, 255
- Dropbox NavySecondary10, 31, 68
- Dropbox YellowAccent255, 214, 0
Surfaces
Page, cards and dividers.- Dropbox WhiteBackground255, 255, 255
- Dropbox Light GraySurface247, 249, 250
- Dropbox Border GrayBorder229, 231, 235
Text
Three tiers of copy.- Dropbox CharcoalText33, 33, 36
- Dropbox Medium GraySecondary text99, 99, 99
- Dropbox Muted GrayMuted text162, 162, 162
Semantic
Feedback and state colors.- Dropbox GreenSuccess26, 196, 125
- Dropbox OrangeWarning255, 179, 0
- Dropbox RedError255, 59, 48
- Dropbox Info BlueInfo0, 147, 255
Use Dropbox's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
dropbox-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0093FF;
--error: #FF3B30;
--accent: #FFD600;
--border: #E5E7EB;
--primary: #0061FF;
--success: #1AC47D;
--surface: #F7F9FA;
--warning: #FFB300;
--secondary: #0A1F44;
--text-muted: #A2A2A2;
--background: #FFFFFF;
--text-primary: #212124;
--text-secondary: #636363;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.1:1
Pass
Text on surface
Needs 4.5:1 for body text
15.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Dropbox background, border and text colors
The quiet part of the Dropbox palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Dropbox WhiteBackground
- HEX
- RGB
- HSL
- Dropbox Light GraySurface
- HEX
- RGB
- HSL
- Dropbox Border GrayBorder
- HEX
- RGB
- HSL
- Dropbox CharcoalText
- HEX
- RGB
- HSL
- Dropbox Medium GraySecondary text
- HEX
- RGB
- HSL
- Dropbox Muted GrayMuted text
- HEX
- RGB
- HSL
About Dropbox's colors
Dropbox's palette centers on a bold blue, supported by neutrals and strategic accent colors for clarity and usability. The system is designed for high contrast and accessibility.
Primary blue is used for key actions and branding.
Neutrals provide structure and readability.
Accent yellow highlights important elements.
Psychology
The primary blue conveys trust, reliability, and professionalism. Accents like yellow add energy and draw attention to calls to action.
Evolution
Dropbox's palette has evolved from a monochromatic blue scheme to a more versatile system with neutrals and accents. The core blue has remained consistent, ensuring strong brand continuity.
Where Dropbox uses each color
- Primary
Used for primary buttons, links, and the Dropbox logo.
- Secondary
Appears in navigation bars and backgrounds of key UI sections.
- Accent
Highlights notifications, badges, and promotional banners.
- Backgrounds
White and light gray are used for app backgrounds and content areas.
- Text
Charcoal and medium gray are used for primary and secondary text across the UI.
- Semantic
Green, orange, and red are used for success, warning, and error states in notifications and forms.
Dropbox color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Dropbox primary color hex code is #0061FF. This blue is used for the logo and primary actions.
Dropbox Blue (#0061FF) in RGB is 0, 97, 255. For CMYK, it is approximately 100, 62, 0, 0.
Dropbox uses Dropbox Light Gray (#F7F9FA), Dropbox Border Gray (#E5E7EB), Dropbox Charcoal (#212124), Dropbox Medium Gray (#636363), and Dropbox Muted Gray (#A2A2A2) for UI structure and text. These neutrals provide clarity and hierarchy in the interface.
Use Dropbox Blue (#0061FF) for primary actions and branding, neutrals for backgrounds and text, and accent colors sparingly for highlights. Semantic colors are reserved for status indicators and alerts.
The secondary color is Dropbox Navy, #0A1F44, and the accent is Dropbox Yellow, #FFD600. Together with the primary they make up the three brand colors at the top of this page.
4 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 Dropbox's colors consistently when it generates UI.
Make something in the spirit of Dropbox
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.