Resend color palette
SaaSResend's brand color system is minimalist, focusing on a black and white palette with subtle gray accents for clarity and modernity. The identity emphasizes simplicity and high contrast for legibility and a professional SaaS appearance.
resend.comResend colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Resend BlackPrimary0, 0, 0
- Resend WhiteSecondary255, 255, 255
- Resend OrangeAccent255, 107, 0
Surfaces
Page, cards and dividers.- Resend Light GrayBackground249, 250, 251
- Resend Surface GraySurface243, 244, 246
- Resend Border GrayBorder229, 231, 235
Text
Three tiers of copy.- Resend Black TextText0, 0, 0
- Resend Secondary GraySecondary text107, 114, 128
- Resend Muted GrayMuted text156, 163, 175
Semantic
Feedback and state colors.- Resend Success GreenSuccess34, 197, 94
- Resend Warning OrangeWarning245, 158, 66
- Resend Error RedError239, 68, 68
- Resend Info BlueInfo37, 99, 235
Use Resend's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
resend-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2563EB;
--error: #EF4444;
--accent: #FF6B00;
--border: #E5E7EB;
--primary: #000000;
--success: #22C55E;
--surface: #F3F4F6;
--warning: #F59E42;
--secondary: #FFFFFF;
--text-muted: #9CA3AF;
--background: #F9FAFB;
--text-primary: #000000;
--text-secondary: #6B7280;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
20.1:1
Pass
Text on surface
Needs 4.5:1 for body text
19.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.4:1
Fail
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Resend background, border and text colors
The quiet part of the Resend palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Resend Light GrayBackground
- HEX
- RGB
- HSL
- Resend Surface GraySurface
- HEX
- RGB
- HSL
- Resend Border GrayBorder
- HEX
- RGB
- HSL
- Resend Black TextText
- HEX
- RGB
- HSL
- Resend Secondary GraySecondary text
- HEX
- RGB
- HSL
- Resend Muted GrayMuted text
- HEX
- RGB
- HSL
About Resend's colors
Resend's palette is rooted in high-contrast black and white, with orange as a distinct accent for calls to action. Subtle grays support a clean, neutral UI that prioritizes readability.
Primary black contrasts with white backgrounds for clarity.
Accent orange draws attention to interactive elements.
Grays provide depth and hierarchy without distraction.
Psychology
Black conveys professionalism and authority, while white and gray create a sense of openness and simplicity. Orange adds energy and highlights key actions.
Evolution
Resend's palette has remained consistent, with a focus on monochrome and a single accent color. The brand has maintained this minimal approach since its inception.
Where Resend uses each color
- Primary
Used for logos, navigation bars, and primary text.
- Secondary
Applied to backgrounds and negative space throughout the UI.
- Accent
Highlights buttons, links, and important interactive elements.
- Backgrounds
Light gray backgrounds are used for app screens and sections.
- Text
Primary black for main text, secondary and muted grays for supporting or less prominent text.
- Semantic
Green, orange, red, and blue are used for status indicators such as success, warning, error, and informational messages.
Resend color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Resend primary color hex code is #000000. This black is used for the logo and main text.
Resend Black (#000000) in RGB is (0, 0, 0) and in CMYK is (0, 0, 0, 100).
Resend uses several grays: #F9FAFB for light backgrounds, #F3F4F6 for surfaces, #E5E7EB for borders, #6B7280 for secondary text, and #9CA3AF for muted text.
Use black (#000000) for primary elements and text, white (#FFFFFF) for backgrounds, and orange (#FF6B00) for accents like buttons. Grays provide structure and hierarchy in the interface.
The secondary color is Resend White, #FFFFFF, and the accent is Resend Orange, #FF6B00. Together with the primary they make up the three brand colors at the top of this page.
3 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 Resend's colors consistently when it generates UI.
Make something in the spirit of Resend
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.