Cursor color palette
SaaSCursor uses a minimalist, high-contrast color system centered on black and grayscale tones, reflecting its focus on clarity and modern SaaS design. The brand's palette is functional and restrained, supporting a clean user interface.
cursor.soCursor colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Cursor BlackPrimary0, 0, 0
- Cursor GraphiteSecondary24, 24, 27
- Cursor BlueAccent37, 99, 235
Surfaces
Page, cards and dividers.- Cursor Deep BlackBackground10, 10, 10
- Cursor SurfaceSurface30, 30, 32
- Cursor Border GrayBorder39, 39, 42
Text
Three tiers of copy.- Cursor WhiteText244, 244, 245
- Cursor Light GraySecondary text161, 161, 170
- Cursor Muted GrayMuted text82, 82, 91
Semantic
Feedback and state colors.- Cursor GreenSuccess34, 197, 94
- Cursor YellowWarning250, 204, 21
- Cursor RedError239, 68, 68
- Cursor Info BlueInfo56, 189, 248
Use Cursor's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
cursor-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #38BDF8;
--error: #EF4444;
--accent: #2563EB;
--border: #27272A;
--primary: #000000;
--success: #22C55E;
--surface: #1E1E20;
--warning: #FACC15;
--secondary: #18181B;
--text-muted: #52525B;
--background: #0A0A0A;
--text-primary: #F4F4F5;
--text-secondary: #A1A1AA;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.0:1
Pass
Text on surface
Needs 4.5:1 for body text
15.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.5:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Cursor gray, dark and neutral colors
Cursor 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.
- Cursor Deep BlackBackground
- HEX
- RGB
- HSL
- Cursor SurfaceSurface
- HEX
- RGB
- HSL
- Cursor Border GrayBorder
- HEX
- RGB
- HSL
- Cursor WhiteText
- HEX
- RGB
- HSL
- Cursor Light GraySecondary text
- HEX
- RGB
- HSL
- Cursor Muted GrayMuted text
- HEX
- RGB
- HSL
About Cursor's colors
Cursor's color system is built on a foundation of black and dark neutrals, accented by blue for interactive elements. The palette is designed for clarity, accessibility, and a modern SaaS aesthetic.
Primary black contrasts with white and light gray text.
Accent blue highlights actionable UI elements.
Grayscale tones structure backgrounds and surfaces.
Psychology
The dominant black and gray tones convey professionalism, focus, and a technical edge. Blue accents add a sense of trust and interactivity.
Evolution
Cursor's palette has remained stable, emphasizing consistency in its dark UI approach. Accent and semantic colors have been refined for improved accessibility and clarity.
Where Cursor uses each color
- Primary
Used for the logo, primary navigation bar, and key UI backgrounds.
- Secondary
Applied to secondary backgrounds and panel surfaces.
- Accent
Used for buttons, links, and interactive highlights.
- Backgrounds
Deep black and graphite tones form the main app and website backgrounds.
- Text
White and light gray are used for primary and secondary text on dark backgrounds.
- Semantic
Green, yellow, and red indicate status messages and alerts in the interface.
Cursor color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Cursor primary color hex code is #000000. This is used for the logo and main navigation.
The RGB value for Cursor Black (#000000) is 0, 0, 0. This color is used throughout the brand's core UI.
Cursor uses several grays, including Cursor Graphite (#18181B), Cursor Light Gray (#A1A1AA), and Cursor Muted Gray (#52525B). These provide structure and hierarchy in the dark-themed interface.
Use Cursor Black (#000000) and Deep Black (#0A0A0A) for primary backgrounds, with Cursor Blue (#2563EB) for interactive elements. Semantic colors like Cursor Green (#22C55E) and Cursor Red (#EF4444) are reserved for status and alerts.
The secondary color is Cursor Graphite, #18181B, and the accent is Cursor Blue, #2563EB. 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 Cursor's colors consistently when it generates UI.
Make something in the spirit of Cursor
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.