Grammarly color palette
SaaSGrammarly's color system is centered around a distinctive teal green, complemented by a clear, modern palette of neutrals and accent greens. The palette emphasizes clarity, accessibility, and a calm, professional tone throughout its UI.
grammarly.comGrammarly colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Grammarly GreenPrimary2, 126, 111
- Grammarly Light GreenSecondary45, 165, 138
- Grammarly MintAccent25, 207, 163
Surfaces
Page, cards and dividers.- Grammarly WhiteBackground255, 255, 255
- Grammarly SurfaceSurface249, 250, 251
- Grammarly Border GrayBorder227, 230, 232
Text
Three tiers of copy.- Grammarly CharcoalText35, 38, 39
- Grammarly SlateSecondary text107, 111, 118
- Grammarly Muted GrayMuted text166, 168, 171
Semantic
Feedback and state colors.- Grammarly Success GreenSuccess25, 207, 163
- Grammarly Warning YellowWarning255, 194, 75
- Grammarly Error RedError255, 90, 95
- Grammarly Info GreenInfo45, 165, 138
Use Grammarly's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
grammarly-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2DA58A;
--error: #FF5A5F;
--accent: #19CFA3;
--border: #E3E6E8;
--primary: #027E6F;
--success: #19CFA3;
--surface: #F9FAFB;
--warning: #FFC24B;
--secondary: #2DA58A;
--text-muted: #A6A8AB;
--background: #FFFFFF;
--text-primary: #232627;
--text-secondary: #6B6F76;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.2:1
Pass
Text on surface
Needs 4.5:1 for body text
14.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.8:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Grammarly background, border and text colors
The quiet part of the Grammarly palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Grammarly WhiteBackground
- HEX
- RGB
- HSL
- Grammarly SurfaceSurface
- HEX
- RGB
- HSL
- Grammarly Border GrayBorder
- HEX
- RGB
- HSL
- Grammarly CharcoalText
- HEX
- RGB
- HSL
- Grammarly SlateSecondary text
- HEX
- RGB
- HSL
- Grammarly Muted GrayMuted text
- HEX
- RGB
- HSL
About Grammarly's colors
Grammarly's palette is built around a signature teal green, conveying trust and clarity. The supporting colors are neutral and soft, ensuring accessibility and a modern, approachable interface.
Primary green is complemented by lighter greens and mint for hierarchy.
Neutral grays provide structure and readability.
Accent and semantic colors are used for feedback and highlights.
Psychology
The prominent green tones evoke growth, confidence, and clarity, aligning with Grammarly's mission to improve communication. The neutral backgrounds and text colors maintain a professional, distraction-free environment.
Evolution
Grammarly's palette has remained consistent, with minor adjustments to green and neutral tones for improved accessibility and digital clarity. The core green has been stable since the brand's major redesign.
Where Grammarly uses each color
- Primary
Used for main navigation highlights, primary buttons, and brand marks.
- Secondary
Appears in secondary buttons, hover states, and subtle highlights.
- Accent
Used for interactive elements, callouts, and success states.
- Backgrounds
White and light surface colors are used for app backgrounds and cards.
- Text
Charcoal and slate grays are used for primary and secondary text throughout the UI.
- Semantic
Success, warning, and error colors are used for feedback, alerts, and status indicators.
Grammarly color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Grammarly primary color is #027E6F, known as Grammarly Green.
Grammarly Green (#027E6F) in RGB is (2, 126, 111). For CMYK, it is approximately (98, 0, 12, 51).
Grammarly uses #232627 (Charcoal), #6B6F76 (Slate), and #A6A8AB (Muted Gray) for text and UI elements.
Use #027E6F for primary actions and branding, with supporting greens and neutrals for UI structure and feedback. Always maintain sufficient contrast for accessibility.
The secondary color is Grammarly Light Green, #2DA58A, and the accent is Grammarly Mint, #19CFA3. 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 Grammarly's colors consistently when it generates UI.
Make something in the spirit of Grammarly
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.