Casper color palette
ConsumerCasper's color identity centers around a calming, deep blue, reflecting trust and relaxation, with a supporting palette of soft neutrals and crisp whites. The palette is designed for clarity, comfort, and a restful brand experience across digital and physical touchpoints.
casper.comCasper colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Casper BluePrimary0, 80, 255
- Casper NavySecondary0, 43, 92
- Casper GoldAccent255, 215, 0
Surfaces
Page, cards and dividers.- Casper WhiteBackground255, 255, 255
- Casper Light GraySurface246, 247, 251
- Casper Border GrayBorder227, 230, 237
Text
Three tiers of copy.- Casper CharcoalText26, 26, 26
- Casper Medium GraySecondary text74, 74, 74
- Casper Muted GrayMuted text123, 123, 123
Semantic
Feedback and state colors.- Casper GreenSuccess35, 178, 109
- Casper YellowWarning255, 184, 0
- Casper RedError224, 60, 49
- Casper Info BlueInfo51, 153, 255
Use Casper's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
casper-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3399FF;
--error: #E03C31;
--accent: #FFD700;
--border: #E3E6ED;
--primary: #0050FF;
--success: #23B26D;
--surface: #F6F7FB;
--warning: #FFB800;
--secondary: #002B5C;
--text-muted: #7B7B7B;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #4A4A4A;
}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
8.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.3:1
Pass
Muted text on background
Needs 3:1 for large text
4.2:1
Pass
Muted text on surface
Needs 3:1 for large text
4.0:1
Pass
Casper background, border and text colors
The quiet part of the Casper palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Casper WhiteBackground
- HEX
- RGB
- HSL
- Casper Light GraySurface
- HEX
- RGB
- HSL
- Casper Border GrayBorder
- HEX
- RGB
- HSL
- Casper CharcoalText
- HEX
- RGB
- HSL
- Casper Medium GraySecondary text
- HEX
- RGB
- HSL
- Casper Muted GrayMuted text
- HEX
- RGB
- HSL
About Casper's colors
Casper's palette uses a dominant blue to evoke calm and trust, supported by soft neutrals for a restful, clean look. Accent colors are used sparingly to highlight actions or important information.
Primary blue pairs with white and light gray for high contrast.
Accent gold and yellow are reserved for calls to action.
Deep navy provides depth and anchors the palette.
Psychology
Blue is associated with tranquility, reliability, and sleep, aligning with Casper's mission. The soft neutrals reinforce a sense of cleanliness and comfort.
Evolution
Casper's palette has remained consistent since launch, with minor adjustments to neutral tones for improved accessibility. The brand has maintained its signature blue as the core identity color.
Where Casper uses each color
- Primary
Used for main navigation, primary buttons, and key brand moments.
- Secondary
Appears in headers, footers, and as a background for key sections.
- Accent
Used for call-to-action buttons, highlights, and promotional banners.
- Backgrounds
Casper White is the default background for web pages and product packaging.
- Text
Casper Charcoal is used for primary body text, with Medium and Muted Gray for secondary and supporting text.
- Semantic
Green, yellow, red, and info blue are used for system feedback, alerts, and status indicators.
Casper color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Casper brand color is Casper Blue, hex code #0050FF.
Casper Blue (#0050FF) in RGB is 0, 80, 255. In CMYK, it is 100, 69, 0, 0.
Casper uses Casper Light Gray (#F6F7FB), Casper Border Gray (#E3E6ED), and Casper Charcoal (#1A1A1A) for backgrounds, borders, and text.
Casper Blue (#0050FF) should dominate primary actions and navigation, while neutrals provide clarity and hierarchy. Accent and semantic colors are reserved for important highlights and system feedback.
The secondary color is Casper Navy, #002B5C, and the accent is Casper Gold, #FFD700. 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 Casper's colors consistently when it generates UI.
Make something in the spirit of Casper
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.