JetBrains color palette
TechJetBrains uses a bold, high-contrast color palette centered on black, with vibrant accent colors for product differentiation and a range of dark and gray tones for UI clarity. The palette is designed for strong visual impact and usability in developer tools.
jetbrains.comJetBrains colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- JetBrains BlackPrimary0, 0, 0
- JetBrains WhiteSecondary255, 255, 255
- JetBrains PinkAccent255, 49, 140
Surfaces
Page, cards and dividers.- JetBrains Dark GrayBackground35, 35, 35
- JetBrains Surface BlackSurface26, 26, 26
- JetBrains Border GrayBorder60, 63, 65
Text
Three tiers of copy.- JetBrains Text WhiteText255, 255, 255
- JetBrains Text GraySecondary text201, 201, 201
- JetBrains Muted GrayMuted text127, 139, 145
Semantic
Feedback and state colors.- JetBrains GreenSuccess33, 215, 137
- JetBrains YellowWarning255, 214, 0
- JetBrains RedError244, 67, 54
- JetBrains BlueInfo0, 154, 229
Use JetBrains's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
jetbrains-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009AE5;
--error: #F44336;
--accent: #FF318C;
--border: #3C3F41;
--primary: #000000;
--success: #21D789;
--surface: #1A1A1A;
--warning: #FFD600;
--secondary: #FFFFFF;
--text-muted: #7F8B91;
--background: #232323;
--text-primary: #FFFFFF;
--text-secondary: #C9C9C9;
}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.7:1
Pass
Text on surface
Needs 4.5:1 for body text
17.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
9.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
10.5:1
Pass
Muted text on background
Needs 3:1 for large text
4.5:1
Pass
Muted text on surface
Needs 3:1 for large text
5.0:1
Pass
JetBrains gray, dark and neutral colors
JetBrains 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.
- JetBrains Dark GrayBackground
- HEX
- RGB
- HSL
- JetBrains Surface BlackSurface
- HEX
- RGB
- HSL
- JetBrains Border GrayBorder
- HEX
- RGB
- HSL
- JetBrains Text WhiteText
- HEX
- RGB
- HSL
- JetBrains Text GraySecondary text
- HEX
- RGB
- HSL
- JetBrains Muted GrayMuted text
- HEX
- RGB
- HSL
About JetBrains's colors
JetBrains' palette is built on a foundation of deep black and dark neutrals, contrasted with vivid accent colors. This approach ensures high legibility and a modern, technical feel suitable for developer tools.
Primary black contrasts with white and vibrant accent hues.
Dark grays unify backgrounds and surfaces for focus.
Accent colors are used sparingly for highlights and branding.
Psychology
The dominant black and dark tones convey professionalism, focus, and technical sophistication. Bright accent colors inject energy and help differentiate products within the JetBrains ecosystem.
Evolution
JetBrains has consistently used black as its core brand color, with accent colors evolving to support new products and visual refreshes. The neutral and gray tones have remained stable, supporting a cohesive UI experience.
Where JetBrains uses each color
- Primary
Used in the JetBrains logo, main navigation bars, and primary backgrounds.
- Secondary
Applied to text, icons, and backgrounds for contrast against the primary black.
- Accent
Highlights key actions, product marks, and call-to-action buttons.
- Backgrounds
Dark gray backgrounds are used in web and app interfaces for depth and reduced eye strain.
- Text
White and gray tones are used for primary and secondary text to ensure readability on dark surfaces.
- Semantic
Green, yellow, red, and blue are used for status indicators, notifications, and UI feedback.
JetBrains color questions
Hex codes, RGB values, neutrals and how to use the palette.
The JetBrains primary color hex code is #000000. This black is central to the brand's identity.
JetBrains Black (#000000) is RGB(0, 0, 0) and CMYK(0, 0, 0, 100). Use these values for print and digital consistency.
JetBrains uses several dark and gray tones, including JetBrains Dark Gray (#232323), Surface Black (#1A1A1A), and Border Gray (#3C3F41). These are used for backgrounds, surfaces, and UI elements.
Use JetBrains Black (#000000) for primary branding and navigation, with accent colors like JetBrains Pink (#FF318C) for highlights. Gray tones support backgrounds and text for optimal contrast and usability.
The secondary color is JetBrains White, #FFFFFF, and the accent is JetBrains Pink, #FF318C. 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 JetBrains's colors consistently when it generates UI.
Make something in the spirit of JetBrains
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.