Bitbucket color palette
SaaSBitbucket's color identity centers on a strong blue primary, supported by a modern palette of cool neutrals and accent blues, reflecting its Atlassian heritage. The system is designed for clarity and usability in developer-focused interfaces.
bitbucket.orgBitbucket colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Bitbucket BluePrimary0, 82, 204
- Bitbucket NavySecondary23, 43, 77
- Bitbucket Accent BlueAccent38, 132, 255
Surfaces
Page, cards and dividers.- Bitbucket Light GrayBackground244, 245, 247
- Bitbucket WhiteSurface255, 255, 255
- Bitbucket Border GrayBorder223, 225, 230
Text
Three tiers of copy.- Bitbucket Text NavyText23, 43, 77
- Bitbucket Text GraySecondary text107, 119, 140
- Bitbucket Muted GrayMuted text165, 173, 186
Semantic
Feedback and state colors.- Bitbucket Success GreenSuccess54, 179, 126
- Bitbucket Warning YellowWarning255, 171, 0
- Bitbucket Error RedError255, 86, 48
- Bitbucket Info CyanInfo0, 184, 217
Use Bitbucket's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
bitbucket-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B8D9;
--error: #FF5630;
--accent: #2684FF;
--border: #DFE1E6;
--primary: #0052CC;
--success: #36B37E;
--surface: #FFFFFF;
--warning: #FFAB00;
--secondary: #172B4D;
--text-muted: #A5ADBA;
--background: #F4F5F7;
--text-primary: #172B4D;
--text-secondary: #6B778C;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
12.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.1:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.5:1
Pass
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Bitbucket background, border and text colors
The quiet part of the Bitbucket palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Bitbucket Light GrayBackground
- HEX
- RGB
- HSL
- Bitbucket WhiteSurface
- HEX
- RGB
- HSL
- Bitbucket Border GrayBorder
- HEX
- RGB
- HSL
- Bitbucket Text NavyText
- HEX
- RGB
- HSL
- Bitbucket Text GraySecondary text
- HEX
- RGB
- HSL
- Bitbucket Muted GrayMuted text
- HEX
- RGB
- HSL
About Bitbucket's colors
Bitbucket's palette is built on a foundation of blue tones, conveying trust and technical reliability. Neutral grays and accent colors support clarity and accessibility across its UI.
Primary blue is complemented by navy and accent blue for depth.
Neutrals provide contrast and structure for content.
Semantic colors highlight status and feedback.
Psychology
Blue is associated with trust, security, and professionalism, aligning with Bitbucket's developer audience. The use of cool grays and accent colors supports a modern, focused interface.
Evolution
Bitbucket's palette has remained largely stable, reflecting Atlassian's unified design language. Minor adjustments have been made for accessibility and consistency across Atlassian products.
Where Bitbucket uses each color
- Primary
Used for main navigation bars, primary buttons, and key highlights.
- Secondary
Appears in headers, footers, and as a background for sidebars.
- Accent
Used for interactive elements, links, and hover states.
- Backgrounds
Light gray backgrounds are used for app screens and content areas.
- Text
Navy and gray tones are used for primary and secondary text throughout the UI.
- Semantic
Green, yellow, red, and cyan indicate success, warnings, errors, and informational messages.
Bitbucket color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Bitbucket primary color is #0052CC. This blue is used for main branding and navigation elements.
Bitbucket Blue (#0052CC) is RGB(0, 82, 204) and approximately CMYK(100, 60, 0, 20). Use these values for print and digital consistency.
Bitbucket uses #F4F5F7 (Light Gray), #DFE1E6 (Border Gray), #6B778C (Text Gray), and #A5ADBA (Muted Gray) for backgrounds, borders, and secondary text. These neutrals provide structure and readability in the UI.
Apply the primary and accent blues for navigation and interactive elements, while neutrals form the background and support text. Semantic colors are reserved for status indicators and alerts.
The secondary color is Bitbucket Navy, #172B4D, and the accent is Bitbucket Accent Blue, #2684FF. Together with the primary they make up the three brand colors at the top of this page.
3 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 Bitbucket's colors consistently when it generates UI.
Make something in the spirit of Bitbucket
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.