SendGrid color palette
SaaSSendGrid's color identity centers on a bright, approachable blue, complemented by a palette of cool neutrals and subtle accent tones for clarity and ease of use across its SaaS platform.
sendgrid.comSendGrid colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- SendGrid BluePrimary81, 169, 227
- SendGrid NavySecondary11, 53, 86
- SendGrid YellowAccent247, 201, 72
Surfaces
Page, cards and dividers.- SendGrid Light GrayBackground247, 250, 252
- SendGrid WhiteSurface255, 255, 255
- SendGrid Border GrayBorder217, 226, 236
Text
Three tiers of copy.- SendGrid Dark BlueText16, 42, 67
- SendGrid Medium GraySecondary text98, 125, 152
- SendGrid Muted GrayMuted text188, 204, 220
Semantic
Feedback and state colors.- SendGrid GreenSuccess45, 204, 167
- SendGrid YellowWarning247, 201, 72
- SendGrid RedError225, 45, 57
- SendGrid Info BlueInfo38, 128, 194
Use SendGrid's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
sendgrid-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2680C2;
--error: #E12D39;
--accent: #F7C948;
--border: #D9E2EC;
--primary: #51A9E3;
--success: #2DCCA7;
--surface: #FFFFFF;
--warning: #F7C948;
--secondary: #0B3556;
--text-muted: #BCCCDC;
--background: #F7FAFC;
--text-primary: #102A43;
--text-secondary: #627D98;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.0: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
4.1:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.3:1
Fail
Muted text on background
Needs 3:1 for large text
1.6:1
Fail
Muted text on surface
Needs 3:1 for large text
1.6:1
Fail
SendGrid background, border and text colors
The quiet part of the SendGrid palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- SendGrid Light GrayBackground
- HEX
- RGB
- HSL
- SendGrid WhiteSurface
- HEX
- RGB
- HSL
- SendGrid Border GrayBorder
- HEX
- RGB
- HSL
- SendGrid Dark BlueText
- HEX
- RGB
- HSL
- SendGrid Medium GraySecondary text
- HEX
- RGB
- HSL
- SendGrid Muted GrayMuted text
- HEX
- RGB
- HSL
About SendGrid's colors
SendGrid's palette is built around a vibrant blue, supported by deep navies and soft grays for a professional, trustworthy appearance. Accent colors are used sparingly for semantic clarity and visual hierarchy.
Primary blue pairs with navy for depth and contrast.
Grays provide neutral backgrounds and text legibility.
Accent yellow and green highlight actions and statuses.
Psychology
Blue conveys reliability and trust, key for a communications platform. The supporting neutrals and accents create a calm, clear user experience.
Evolution
SendGrid's palette has remained consistent, with blue always as the anchor. Minor adjustments have refined the gray and accent tones for improved accessibility.
Where SendGrid uses each color
- Primary
Used for main navigation, primary buttons, and key highlights.
- Secondary
Appears in headers, footers, and as a background for callouts.
- Accent
Used for notifications, highlights, and semantic feedback (warnings).
- Backgrounds
Light gray and white are used for app backgrounds and card surfaces.
- Text
Dark blue and medium gray are used for primary and secondary text, respectively.
- Semantic
Green, yellow, and red are used for success, warning, and error states in UI messages.
SendGrid color questions
Hex codes, RGB values, neutrals and how to use the palette.
The SendGrid primary color is #51A9E3, known as SendGrid Blue. It is used for key branding and interface elements.
The RGB value for #51A9E3 is (81, 169, 227). For print, the closest CMYK equivalent is (64, 21, 0, 11).
SendGrid uses a range of grays, including #F7FAFC (Light Gray), #D9E2EC (Border Gray), and #BCCCDC (Muted Gray), for backgrounds, borders, and muted text.
Use SendGrid Blue (#51A9E3) for primary actions and branding, with navy and grays for structure and readability. Accent colors like yellow and green should be reserved for semantic highlights and alerts.
The secondary color is SendGrid Navy, #0B3556, and the accent is SendGrid Yellow, #F7C948. 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 SendGrid's colors consistently when it generates UI.
Make something in the spirit of SendGrid
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.