Box color palette
SaaSBox uses a clean, professional color palette centered on a vivid blue, complemented by neutral grays and white for clarity and simplicity. The brand's color identity emphasizes trust, reliability, and a modern SaaS aesthetic.
box.comBox colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Box BluePrimary0, 97, 213
- Box Deep BlueSecondary0, 82, 163
- Box Sky BlueAccent0, 191, 255
Surfaces
Page, cards and dividers.- Box WhiteBackground255, 255, 255
- Box Light GraySurface245, 247, 250
- Box Border GrayBorder227, 230, 234
Text
Three tiers of copy.- Box CharcoalText34, 34, 34
- Box Medium GraySecondary text94, 108, 132
- Box Muted GrayMuted text163, 169, 183
Semantic
Feedback and state colors.- Box Success GreenSuccess40, 167, 69
- Box Warning YellowWarning255, 193, 7
- Box Error RedError215, 38, 61
- Box Info CyanInfo23, 162, 184
Use Box's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
box-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #17A2B8;
--error: #D7263D;
--accent: #00BFFF;
--border: #E3E6EA;
--primary: #0061D5;
--success: #28A745;
--surface: #F5F7FA;
--warning: #FFC107;
--secondary: #0052A3;
--text-muted: #A3A9B7;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #5E6C84;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.9:1
Pass
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.2:1
Fail
Box background, border and text colors
The quiet part of the Box palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Box WhiteBackground
- HEX
- RGB
- HSL
- Box Light GraySurface
- HEX
- RGB
- HSL
- Box Border GrayBorder
- HEX
- RGB
- HSL
- Box CharcoalText
- HEX
- RGB
- HSL
- Box Medium GraySecondary text
- HEX
- RGB
- HSL
- Box Muted GrayMuted text
- HEX
- RGB
- HSL
About Box's colors
Box's palette is dominated by blue tones, conveying trust and professionalism, with neutrals for balance and clarity. Accent colors are used sparingly for status and interactive elements.
Primary blue is complemented by deeper and lighter blue accents.
Neutral grays provide structure and hierarchy.
Semantic colors (green, yellow, red, cyan) are reserved for status and feedback.
Psychology
Blue is associated with security, reliability, and calm, aligning with Box's positioning as a trusted SaaS provider. The use of white and gray supports a clean, uncluttered interface.
Evolution
Box's core blue has remained consistent, reinforcing brand recognition. Over time, the supporting palette has shifted toward lighter grays and more subtle accent colors for a modern, minimal UI.
Where Box uses each color
- Primary
Used for main navigation, primary buttons, and key highlights across the Box platform.
- Secondary
Appears in headers, active states, and secondary buttons.
- Accent
Used for links, hover states, and interactive UI elements.
- Backgrounds
White and light gray backgrounds are used throughout app screens and dashboards.
- Text
Charcoal and gray tones are used for primary, secondary, and muted text across all interfaces.
- Semantic
Green, yellow, red, and cyan are used for success, warning, error, and informational statuses respectively.
Box color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Box primary color is #0061D5, known as Box Blue. This should be used for all main brand and UI highlights.
Box Blue (#0061D5) in RGB is 0, 97, 213. For print, the approximate CMYK is 100, 54, 0, 16.
Box uses a range of grays such as Box Light Gray (#F5F7FA), Box Border Gray (#E3E6EA), Box Medium Gray (#5E6C84), and Box Muted Gray (#A3A9B7) for backgrounds, borders, and text. These neutrals ensure clarity and hierarchy in the user interface.
Use Box Blue (#0061D5) for primary actions and navigation, with supporting blues and neutrals for structure. Reserve semantic colors like Box Success Green (#28A745) and Box Error Red (#D7263D) for status and feedback only.
The secondary color is Box Deep Blue, #0052A3, and the accent is Box Sky Blue, #00BFFF. 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 Box's colors consistently when it generates UI.
Make something in the spirit of Box
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.