Raycast color palette
TechRaycast's color identity centers on a bold, energetic red paired with deep dark neutrals and subtle grays, reflecting its focus on productivity and clarity. The palette is minimal, emphasizing contrast and usability in its desktop and web interfaces.
raycast.comRaycast colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Raycast RedPrimary255, 99, 99
- Raycast BlackSecondary26, 26, 26
- Raycast YellowAccent255, 209, 102
Surfaces
Page, cards and dividers.- Raycast Deep CharcoalBackground24, 24, 26
- Raycast Surface GraySurface35, 35, 38
- Raycast Border GrayBorder44, 44, 46
Text
Three tiers of copy.- Raycast WhiteText255, 255, 255
- Raycast Light GraySecondary text177, 177, 179
- Raycast Muted GrayMuted text110, 110, 115
Semantic
Feedback and state colors.- Raycast GreenSuccess74, 222, 128
- Raycast YellowWarning255, 209, 102
- Raycast RedError255, 99, 99
- Raycast BlueInfo96, 175, 255
Use Raycast's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
raycast-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #60AFFF;
--error: #FF6363;
--accent: #FFD166;
--border: #2C2C2E;
--primary: #FF6363;
--success: #4ADE80;
--surface: #232326;
--warning: #FFD166;
--secondary: #1A1A1A;
--text-muted: #6E6E73;
--background: #18181A;
--text-primary: #FFFFFF;
--text-secondary: #B1B1B3;
}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.7:1
Pass
Text on surface
Needs 4.5:1 for body text
15.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.3:1
Pass
Muted text on background
Needs 3:1 for large text
3.5:1
Pass
Muted text on surface
Needs 3:1 for large text
3.1:1
Pass
Raycast gray, dark and neutral colors
Raycast runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- Raycast Deep CharcoalBackground
- HEX
- RGB
- HSL
- Raycast Surface GraySurface
- HEX
- RGB
- HSL
- Raycast Border GrayBorder
- HEX
- RGB
- HSL
- Raycast WhiteText
- HEX
- RGB
- HSL
- Raycast Light GraySecondary text
- HEX
- RGB
- HSL
- Raycast Muted GrayMuted text
- HEX
- RGB
- HSL
About Raycast's colors
Raycast’s palette is built around high-contrast red and deep neutrals for clarity and focus. The limited accent colors support semantic feedback and accessibility.
Primary red is complemented by dark backgrounds for strong contrast.
Accent yellow and blue are used for semantic feedback.
Grays provide hierarchy and subtlety in UI elements.
Psychology
The energetic red signals action and urgency, while dark neutrals create a focused, distraction-free environment. Accent colors provide clear, intuitive feedback for user actions.
Evolution
Raycast's palette has remained consistent since launch, with minor adjustments to gray tones for improved legibility. The core red and dark theme have been stable elements of the brand identity.
Where Raycast uses each color
- Primary
Raycast Red is used for the logo, primary buttons, and highlights in the app interface.
- Secondary
Raycast Black forms the main background for the app and website, providing a dark, modern look.
- Accent
Raycast Yellow and Blue are used for status indicators, notifications, and semantic highlights.
- Backgrounds
Raycast Deep Charcoal is the default background for app screens and panels.
- Text
Raycast White and Light Gray are used for primary and secondary text, ensuring readability against dark backgrounds.
- Semantic
Raycast Green, Yellow, and Red are used for success, warning, and error states throughout the UI.
Raycast color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Raycast primary color is #FF6363. This vibrant red is used for the logo and key interface elements.
Raycast Red (#FF6363) has an RGB value of (255, 99, 99) and a CMYK value of (0, 61, 61, 0).
Raycast uses #1A1A1A (Raycast Black), #18181A (Raycast Deep Charcoal), #232326 (Raycast Surface Gray), and #2C2C2E (Raycast Border Gray) for its dark and neutral UI backgrounds.
Use Raycast Red (#FF6363) for primary actions and highlights, with dark neutrals for backgrounds and surfaces. Accent and semantic colors should be reserved for feedback and status indicators.
The secondary color is Raycast Black, #1A1A1A, and the accent is Raycast Yellow, #FFD166. 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 Raycast's colors consistently when it generates UI.
Make something in the spirit of Raycast
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.