Elastic color palette
SaaSElastic's color identity features a deep blue primary paired with a vibrant, multi-hued accent palette and neutral UI greys, reflecting its data-centric, approachable brand. The palette is designed for clarity and accessibility across digital products.
elastic.coElastic colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Elastic BluePrimary0, 85, 113
- Elastic YellowSecondary254, 197, 20
- Elastic TealAccent23, 205, 166
Surfaces
Page, cards and dividers.- Elastic Light GrayBackground245, 247, 250
- Elastic WhiteSurface255, 255, 255
- Elastic Border GrayBorder211, 218, 230
Text
Three tiers of copy.- Elastic CharcoalText52, 55, 65
- Elastic SlateSecondary text105, 112, 125
- Elastic Muted GrayMuted text169, 176, 188
Semantic
Feedback and state colors.- Elastic GreenSuccess84, 179, 153
- Elastic OrangeWarning245, 167, 0
- Elastic PinkError211, 96, 134
- Elastic Info BlueInfo96, 146, 192
Use Elastic's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
elastic-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #6092C0;
--error: #D36086;
--accent: #17CDA6;
--border: #D3DAE6;
--primary: #005571;
--success: #54B399;
--surface: #FFFFFF;
--warning: #F5A700;
--secondary: #FEC514;
--text-muted: #A9B0BC;
--background: #F5F7FA;
--text-primary: #343741;
--text-secondary: #69707D;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
11.1:1
Pass
Text on surface
Needs 4.5:1 for body text
11.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.0:1
Pass
Muted text on background
Needs 3:1 for large text
2.0:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Elastic background, border and text colors
The quiet part of the Elastic palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Elastic Light GrayBackground
- HEX
- RGB
- HSL
- Elastic WhiteSurface
- HEX
- RGB
- HSL
- Elastic Border GrayBorder
- HEX
- RGB
- HSL
- Elastic CharcoalText
- HEX
- RGB
- HSL
- Elastic SlateSecondary text
- HEX
- RGB
- HSL
- Elastic Muted GrayMuted text
- HEX
- RGB
- HSL
About Elastic's colors
Elastic's palette combines a strong blue with vibrant accent colors and soft neutrals to ensure clarity and accessibility. The system supports data visualization and UI clarity.
Primary blue anchors the brand and interfaces.
Accent colors provide visual hierarchy and highlight data.
Neutral greys support readability and reduce visual noise.
Psychology
The deep blue conveys trust and professionalism, while the bright accents add energy and approachability. The neutral tones create a calm, focused environment for users.
Evolution
Elastic's palette has remained consistent, with minor adjustments to accent colors for improved accessibility. The core blue and yellow have been stable since the brand's early years.
Where Elastic uses each color
- Primary
Used in navigation bars, primary buttons, and key brand elements.
- Secondary
Appears in highlights, charts, and secondary actions.
- Accent
Applied to data visualizations and interactive UI elements.
- Backgrounds
Elastic Light Gray is the main app and site background.
- Text
Elastic Charcoal and Slate are used for primary and secondary text.
- Semantic
Green, orange, pink, and info blue are used for status indicators and alerts.
Elastic color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Elastic primary color is Elastic Blue, with the hex code #005571. This color is used for navigation and primary actions.
Elastic Blue (#005571) in RGB is (0, 85, 113). For CMYK, it is approximately (100, 25, 0, 56).
Elastic uses Elastic Light Gray (#F5F7FA), Border Gray (#D3DAE6), and Muted Gray (#A9B0BC) throughout its UI for backgrounds, borders, and muted text.
Use Elastic Blue (#005571) for primary actions and navigation, with accent and semantic colors for highlights and status. Neutrals support backgrounds and text for clarity and accessibility.
The secondary color is Elastic Yellow, #FEC514, and the accent is Elastic Teal, #17CDA6. 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 Elastic's colors consistently when it generates UI.
Make something in the spirit of Elastic
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.