Deel color palette
SaaSDeel's brand color system is defined by a distinctive blue primary, complemented by clean neutrals and subtle accent tones for a modern SaaS aesthetic. The palette emphasizes clarity, trust, and professionalism across its digital platforms.
deel.comDeel colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Deel BluePrimary0, 82, 255
- Deel TealSecondary0, 184, 169
- Deel YellowAccent255, 184, 0
Surfaces
Page, cards and dividers.- Deel WhiteBackground255, 255, 255
- Deel Surface GraySurface246, 248, 250
- Deel Border GrayBorder227, 231, 237
Text
Three tiers of copy.- Deel BlackText26, 26, 26
- Deel SlateSecondary text91, 102, 125
- Deel Muted GrayMuted text163, 173, 194
Semantic
Feedback and state colors.- Deel Success GreenSuccess0, 196, 140
- Deel Warning YellowWarning255, 184, 0
- Deel Error RedError255, 77, 79
- Deel Info BlueInfo0, 82, 255
Use Deel's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
deel-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0052FF;
--error: #FF4D4F;
--accent: #FFB800;
--border: #E3E7ED;
--primary: #0052FF;
--success: #00C48C;
--surface: #F6F8FA;
--warning: #FFB800;
--secondary: #00B8A9;
--text-muted: #A3ADC2;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #5B667D;
}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.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.4:1
Pass
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
Deel background, border and text colors
The quiet part of the Deel palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Deel WhiteBackground
- HEX
- RGB
- HSL
- Deel Surface GraySurface
- HEX
- RGB
- HSL
- Deel Border GrayBorder
- HEX
- RGB
- HSL
- Deel BlackText
- HEX
- RGB
- HSL
- Deel SlateSecondary text
- HEX
- RGB
- HSL
- Deel Muted GrayMuted text
- HEX
- RGB
- HSL
About Deel's colors
Deel's palette is anchored by a bold blue, conveying trust and reliability, with teal and yellow accents for vibrancy. Neutral grays and whites provide balance and clarity for digital interfaces.
Primary blue is complemented by teal for secondary actions.
Yellow accent is used for highlights and warnings.
Neutral grays support accessibility and content hierarchy.
Psychology
Blue communicates professionalism and security, which are essential for Deel's global payroll platform. Teal and yellow add approachability and energy without overwhelming the user.
Evolution
Deel's color palette has remained consistent since its rebrand, focusing on digital clarity and accessibility. Minor adjustments have been made to neutral tones for improved UI contrast.
Where Deel uses each color
- Primary
Deel Blue is used for main CTAs, navigation highlights, and key brand elements.
- Secondary
Deel Teal appears in secondary buttons, icons, and subtle UI highlights.
- Accent
Deel Yellow is reserved for notifications, highlights, and warning states.
- Backgrounds
Deel White and Surface Gray are used for app backgrounds and content areas.
- Text
Deel Black, Slate, and Muted Gray are used for primary, secondary, and disabled text respectively.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for status indicators and alerts.
Deel color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Deel brand color is #0052FF, known as Deel Blue.
Deel Blue (#0052FF) in RGB is (0, 82, 255) and in CMYK is (100, 68, 0, 0).
Deel uses Surface Gray (#F6F8FA), Border Gray (#E3E7ED), Slate (#5B667D), and Muted Gray (#A3ADC2) for UI backgrounds, borders, and text.
Use Deel Blue (#0052FF) for primary actions and navigation, with neutrals for backgrounds and text. Accents and semantic colors are reserved for notifications, highlights, and status indicators.
The secondary color is Deel Teal, #00B8A9, and the accent is Deel Yellow, #FFB800. 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 Deel's colors consistently when it generates UI.
Make something in the spirit of Deel
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.