DocuSign color palette
SaaSDocuSign's color identity centers on a bold blue and strong neutrals, reflecting trust and clarity in digital agreements. The palette is designed for high accessibility and brand recognition across digital and print applications.
docusign.comDocuSign colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- DocuSign BluePrimary0, 87, 184
- DocuSign YellowSecondary255, 209, 0
- DocuSign SkyAccent0, 182, 240
Surfaces
Page, cards and dividers.- DocuSign WhiteBackground255, 255, 255
- DocuSign Light GraySurface244, 246, 248
- DocuSign Border GrayBorder213, 215, 218
Text
Three tiers of copy.- DocuSign BlackText26, 26, 26
- DocuSign Dark GraySecondary text90, 90, 90
- DocuSign Medium GrayMuted text140, 140, 140
Semantic
Feedback and state colors.- DocuSign GreenSuccess0, 184, 124
- DocuSign Warning YellowWarning255, 182, 0
- DocuSign RedError224, 58, 62
- DocuSign Info BlueInfo0, 119, 200
Use DocuSign's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
docusign-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0077C8;
--error: #E03A3E;
--accent: #00B6F0;
--border: #D5D7DA;
--primary: #0057B8;
--success: #00B87C;
--surface: #F4F6F8;
--warning: #FFB600;
--secondary: #FFD100;
--text-muted: #8C8C8C;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #5A5A5A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
16.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.4:1
Pass
Muted text on background
Needs 3:1 for large text
3.4:1
Pass
Muted text on surface
Needs 3:1 for large text
3.1:1
Pass
DocuSign background, border and text colors
The quiet part of the DocuSign palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- DocuSign WhiteBackground
- HEX
- RGB
- HSL
- DocuSign Light GraySurface
- HEX
- RGB
- HSL
- DocuSign Border GrayBorder
- HEX
- RGB
- HSL
- DocuSign BlackText
- HEX
- RGB
- HSL
- DocuSign Dark GraySecondary text
- HEX
- RGB
- HSL
- DocuSign Medium GrayMuted text
- HEX
- RGB
- HSL
About DocuSign's colors
DocuSign's palette uses a strong blue for trust and reliability, complemented by yellow for attention and action. Neutral grays provide clarity and support accessibility.
Primary blue and yellow are complementary and create visual hierarchy.
Accent blue and info blue provide tonal variation for UI elements.
Grays balance the palette and ensure legibility.
Psychology
Blue communicates security and professionalism, essential for digital agreements. Yellow adds energy and draws attention to calls to action.
Evolution
DocuSign's palette has remained stable, with blue and yellow as core colors since its early branding. Minor adjustments to gray tones and accent blues have improved accessibility and digital clarity.
Where DocuSign uses each color
- Primary
DocuSign Blue is used for the logo, primary buttons, and key navigation elements.
- Secondary
DocuSign Yellow highlights CTAs, links, and important notifications.
- Accent
DocuSign Sky is used for secondary actions, icons, and interactive elements.
- Backgrounds
DocuSign White and Light Gray are used for app backgrounds and content areas.
- Text
DocuSign Black and Dark Gray are used for primary and secondary text, ensuring high contrast.
- Semantic
Green, yellow, and red are used for status indicators, alerts, and feedback messages.
DocuSign color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official DocuSign brand color is DocuSign Blue, hex code #0057B8. This is used for the logo and primary actions.
DocuSign Blue (#0057B8) in RGB is (0, 87, 184) and in CMYK is (100, 53, 0, 28). These values are used for digital and print consistency.
DocuSign uses Light Gray (#F4F6F8), Border Gray (#D5D7DA), Dark Gray (#5A5A5A), and Medium Gray (#8C8C8C) for backgrounds, borders, and text. These ensure clarity and accessibility in the UI.
Use DocuSign Blue (#0057B8) for primary actions and branding, with yellow (#FFD100) for highlights. Grays and accent blues support UI structure and accessibility.
The secondary color is DocuSign Yellow, #FFD100, and the accent is DocuSign Sky, #00B6F0. 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 DocuSign's colors consistently when it generates UI.
Make something in the spirit of DocuSign
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.