Klaviyo color palette
SaaSKlaviyo's brand identity centers on a distinctive green primary color, complemented by a neutral and accessible UI palette. The color system reflects clarity, growth, and trust across its SaaS marketing platform.
klaviyo.comKlaviyo colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Klaviyo GreenPrimary46, 200, 102
- Klaviyo Deep TealSecondary10, 44, 43
- Klaviyo GoldAccent243, 182, 58
Surfaces
Page, cards and dividers.- Klaviyo WhiteBackground255, 255, 255
- Klaviyo Light GraySurface247, 249, 250
- Klaviyo Border GrayBorder226, 230, 234
Text
Three tiers of copy.- Klaviyo Deep TealText10, 44, 43
- Klaviyo Medium GraySecondary text90, 107, 106
- Klaviyo Muted GrayMuted text163, 178, 176
Semantic
Feedback and state colors.- Klaviyo GreenSuccess46, 200, 102
- Klaviyo GoldWarning243, 182, 58
- Klaviyo RedError247, 90, 74
- Klaviyo BlueInfo58, 141, 255
Use Klaviyo's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
klaviyo-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3A8DFF;
--error: #F75A4A;
--accent: #F3B63A;
--border: #E2E6EA;
--primary: #2EC866;
--success: #2EC866;
--surface: #F7F9FA;
--warning: #F3B63A;
--secondary: #0A2C2B;
--text-muted: #A3B2B0;
--background: #FFFFFF;
--text-primary: #0A2C2B;
--text-secondary: #5A6B6A;
}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.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
5.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
Klaviyo background, border and text colors
The quiet part of the Klaviyo palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Klaviyo WhiteBackground
- HEX
- RGB
- HSL
- Klaviyo Light GraySurface
- HEX
- RGB
- HSL
- Klaviyo Border GrayBorder
- HEX
- RGB
- HSL
- Klaviyo Deep TealText
- HEX
- RGB
- HSL
- Klaviyo Medium GraySecondary text
- HEX
- RGB
- HSL
- Klaviyo Muted GrayMuted text
- HEX
- RGB
- HSL
About Klaviyo's colors
Klaviyo's palette is built around a vibrant green, evoking growth and reliability, supported by deep teals and neutral grays for clarity and accessibility. The accent gold and supporting colors provide visual hierarchy and highlight key actions.
Primary green contrasts with deep teal for emphasis.
Gold accent is used sparingly for highlights and calls to action.
Neutral grays ensure content legibility and UI clarity.
Psychology
Green is associated with growth, trust, and success, aligning with Klaviyo's mission to empower businesses. The deep teal and neutral tones foster a sense of stability and professionalism.
Evolution
Klaviyo's core green has remained consistent since its early branding, with refinements to supporting neutrals for improved accessibility. The palette has evolved to include more nuanced grays and a gold accent for modern UI needs.
Where Klaviyo uses each color
- Primary
Used for main action buttons, highlights, and key brand elements across the website and app.
- Secondary
Appears in navigation bars, footers, and as a background for key sections.
- Accent
Applied to badges, notifications, and important UI highlights.
- Backgrounds
White and light gray backgrounds are used throughout dashboards and marketing pages.
- Text
Deep teal and medium gray are used for primary and secondary text, ensuring readability.
- Semantic
Green, gold, red, and blue indicate success, warning, error, and informational states in the UI.
Klaviyo color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Klaviyo brand color is #2EC866, known as Klaviyo Green.
Klaviyo Green (#2EC866) is RGB(46, 200, 102) and CMYK(77, 0, 49, 22).
Klaviyo uses #F7F9FA (Klaviyo Light Gray), #E2E6EA (Klaviyo Border Gray), #5A6B6A (Klaviyo Medium Gray), and #A3B2B0 (Klaviyo Muted Gray) for backgrounds, borders, and secondary text.
Use #2EC866 (Klaviyo Green) for primary actions, #0A2C2B (Deep Teal) for navigation and text, and neutral grays for backgrounds and UI surfaces to maintain brand consistency.
The secondary color is Klaviyo Deep Teal, #0A2C2B, and the accent is Klaviyo Gold, #F3B63A. Together with the primary they make up the three brand colors at the top of this page.
4 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 Klaviyo's colors consistently when it generates UI.
Make something in the spirit of Klaviyo
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.