Segment color palette
SaaSSegment's color identity centers on a distinctive green, complemented by deep blues and neutral grays for a clean, modern SaaS interface. The palette is designed for clarity and accessibility across digital products.
segment.comSegment colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Segment GreenPrimary50, 196, 141
- Segment Deep TealSecondary10, 71, 64
- Segment Accent TealAccent20, 112, 106
Surfaces
Page, cards and dividers.- Segment WhiteBackground255, 255, 255
- Segment Light GraySurface246, 248, 249
- Segment Border GrayBorder227, 231, 234
Text
Three tiers of copy.- Segment CharcoalText20, 32, 44
- Segment Medium GraySecondary text88, 96, 105
- Segment Muted GrayMuted text139, 148, 158
Semantic
Feedback and state colors.- Segment GreenSuccess50, 196, 141
- Segment YellowWarning255, 194, 71
- Segment RedError249, 94, 90
- Segment BlueInfo74, 144, 226
Use Segment's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
segment-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4A90E2;
--error: #F95E5A;
--accent: #14706A;
--border: #E3E7EA;
--primary: #32C48D;
--success: #32C48D;
--surface: #F6F8F9;
--warning: #FFC247;
--secondary: #0A4740;
--text-muted: #8B949E;
--background: #FFFFFF;
--text-primary: #14202C;
--text-secondary: #586069;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.5:1
Pass
Text on surface
Needs 4.5:1 for body text
15.5: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
6.0:1
Pass
Muted text on background
Needs 3:1 for large text
3.1:1
Pass
Muted text on surface
Needs 3:1 for large text
2.9:1
Fail
Segment background, border and text colors
The quiet part of the Segment palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Segment WhiteBackground
- HEX
- RGB
- HSL
- Segment Light GraySurface
- HEX
- RGB
- HSL
- Segment Border GrayBorder
- HEX
- RGB
- HSL
- Segment CharcoalText
- HEX
- RGB
- HSL
- Segment Medium GraySecondary text
- HEX
- RGB
- HSL
- Segment Muted GrayMuted text
- HEX
- RGB
- HSL
About Segment's colors
Segment's palette is built around a recognizable green, supported by deep teals and neutral grays for balance and legibility. The colors are chosen for digital clarity and to evoke trust and approachability.
Primary green contrasts with deep teal for emphasis.
Neutral grays provide structure and hierarchy.
Accent colors highlight actions and status.
Psychology
Green is associated with growth, reliability, and technology, fitting Segment's SaaS positioning. The supporting teals and grays reinforce professionalism and clarity.
Evolution
Segment's color palette has remained stable since its last major rebrand, with minor adjustments to green and gray tones for accessibility. The core identity has consistently centered on the primary green.
Where Segment uses each color
- Primary
Used for main navigation highlights, primary buttons, and key brand elements.
- Secondary
Appears in headers, secondary buttons, and backgrounds for contrast.
- Accent
Used for links, icons, and interactive states to draw attention.
- Backgrounds
White and light gray are used for app screens and content areas.
- Text
Charcoal and medium gray are used for primary and secondary text throughout the UI.
- Semantic
Green, yellow, red, and blue are used for success, warning, error, and informational statuses.
Segment color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Segment brand color is Segment Green, hex code #32C48D.
Segment Green (#32C48D) in RGB is (50, 196, 141). For CMYK, it is approximately (75, 0, 44, 23).
Segment uses Segment Light Gray (#F6F8F9), Segment Border Gray (#E3E7EA), Segment Charcoal (#14202C), and Segment Medium Gray (#586069) for backgrounds, borders, and text.
Use Segment Green (#32C48D) for primary actions and branding, with deep teal and accent teal for emphasis. Grays and whites provide structure and should be used for backgrounds, surfaces, and text.
The secondary color is Segment Deep Teal, #0A4740, and the accent is Segment Accent Teal, #14706A. 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 Segment's colors consistently when it generates UI.
Make something in the spirit of Segment
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.