Segment Green Color Psychology & Meaning
Segment's green signals flow and connection — data moving between systems. It's reassuring and systematic, like a well-designed pipeline.
#FFFFFF
#52BD94
#1A1A1A
#6B6B6B
Background
Primary Accent
Secondary
Body Text
Segment Green
professionalfreshtech springsummer appdatabranding
AA
WCAG Grade
5.3:1
Contrast Ratio
1,600
Saves
4,200
AI Copies
Use #FFFFFF as the background. Use #52BD94 as the primary accent. Use #1A1A1A as secondary. Use #6B6B6B as body text/supporting color. Palette mood: Segment Green — professional, fresh, tech.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Segment Green color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% | ||
| Primary Accent Luminance: 40.3% | 82, 189, 148 | 57%, 0%, 22%, 26% | 157°, 45%, 53% | ||
| Secondary Luminance: 1.0% | 26, 26, 26 | 0%, 0%, 0%, 90% | 0°, 0%, 10% | ||
| Body Text Luminance: 14.7% | 107, 107, 107 | 0%, 0%, 0%, 58% | 0°, 0%, 42% |
Color Harmony: Split-Complementary Scheme
The Segment Green palette is built using a split-complementary relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A split-complementary palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Segment used green to suggest data health and connectivity. After Twilio acquired them in 2020, the identity was preserved as a distinct sub-brand.
Best Design Use Cases
White for all surfaces. Green for connected states, success indicators, and primary CTAs. Dark for all text. Gray for secondary info.
Industries This Palette Suits
Data infrastructure, CDP, developer tools, enterprise SaaS.
How to Implement the Segment Green Color Scheme
To use this Segment Green color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #FFFFFF for the main background and #52BD94 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #6B6B6B and #FFFFFF is 5.33:1 (AA). Ensure your body text remains legible.