PagerDuty color palette
SaaSPagerDuty's color identity is defined by a vibrant green primary, complemented by deep darks and neutral grays for a modern SaaS interface. The palette emphasizes clarity, accessibility, and a strong brand presence.
pagerduty.comPagerDuty colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- PagerDuty GreenPrimary6, 172, 56
- PagerDuty CharcoalSecondary36, 41, 46
- PagerDuty CyanAccent0, 184, 244
Surfaces
Page, cards and dividers.- PagerDuty WhiteBackground255, 255, 255
- PagerDuty Surface GraySurface245, 246, 247
- PagerDuty Border GrayBorder225, 228, 232
Text
Three tiers of copy.- PagerDuty CharcoalText36, 41, 46
- PagerDuty Secondary GraySecondary text87, 96, 106
- PagerDuty Muted GrayMuted text140, 149, 159
Semantic
Feedback and state colors.- PagerDuty GreenSuccess6, 172, 56
- PagerDuty AmberWarning255, 180, 0
- PagerDuty RedError229, 72, 77
- PagerDuty CyanInfo0, 184, 244
Use PagerDuty's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
pagerduty-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00B8F4;
--error: #E5484D;
--accent: #00B8F4;
--border: #E1E4E8;
--primary: #06AC38;
--success: #06AC38;
--surface: #F5F6F7;
--warning: #FFB400;
--secondary: #24292E;
--text-muted: #8C959F;
--background: #FFFFFF;
--text-primary: #24292E;
--text-secondary: #57606A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.7:1
Pass
Text on surface
Needs 4.5:1 for body text
13.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.9:1
Pass
Muted text on background
Needs 3:1 for large text
3.0:1
Pass
Muted text on surface
Needs 3:1 for large text
2.8:1
Fail
PagerDuty gray and neutral colors
The quiet part of the PagerDuty palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- PagerDuty WhiteBackground
- HEX
- RGB
- HSL
- PagerDuty Surface GraySurface
- HEX
- RGB
- HSL
- PagerDuty Border GrayBorder
- HEX
- RGB
- HSL
- PagerDuty CharcoalText
- HEX
- RGB
- HSL
- PagerDuty Secondary GraySecondary text
- HEX
- RGB
- HSL
- PagerDuty Muted GrayMuted text
- HEX
- RGB
- HSL
About PagerDuty's colors
PagerDuty's palette centers on a bold green, supported by dark neutrals and bright accent colors for clarity and accessibility. The system balances vibrancy with professionalism for SaaS interfaces.
Primary green is paired with dark charcoal for strong contrast.
Accent cyan and amber highlight key actions and statuses.
Neutral grays provide structure and hierarchy in the UI.
Psychology
Green conveys reliability, action, and a sense of operational readiness. Dark neutrals add seriousness, while bright accents signal alerts and interactivity.
Evolution
PagerDuty's palette has remained consistent, with green always central to its identity. Over time, accent colors and neutral grays have been refined for improved accessibility and digital clarity.
Where PagerDuty uses each color
- Primary
PagerDuty Green is used for primary buttons, highlights, and the logo.
- Secondary
PagerDuty Charcoal appears in navigation bars, headers, and footers.
- Accent
PagerDuty Cyan is used for links, notifications, and interactive elements.
- Backgrounds
PagerDuty White and Surface Gray are used for main app backgrounds and cards.
- Text
Charcoal and Secondary Gray are used for primary and secondary text, with Muted Gray for less prominent information.
- Semantic
Green, Amber, Red, and Cyan are used for status indicators, alerts, and informational messages.
PagerDuty color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official PagerDuty primary color is #06AC38. This green is used for branding and primary actions.
PagerDuty Green (#06AC38) in RGB is (6, 172, 56). For CMYK, it is approximately (97, 0, 67, 33).
PagerDuty uses Charcoal (#24292E), Surface Gray (#F5F6F7), and Border Gray (#E1E4E8) for backgrounds, borders, and text. These neutrals provide structure and contrast throughout the UI.
Use PagerDuty Green (#06AC38) for primary actions and branding, with Charcoal (#24292E) for navigation and text. Accent colors like Cyan (#00B8F4) and Amber (#FFB400) are for highlights, notifications, and semantic statuses.
The secondary color is PagerDuty Charcoal, #24292E, and the accent is PagerDuty Cyan, #00B8F4. Together with the primary they make up the three brand colors at the top of this page.
5 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 PagerDuty's colors consistently when it generates UI.
Make something in the spirit of PagerDuty
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.