LaunchDarkly color palette
SaaSLaunchDarkly uses a distinctive blue as its primary brand color, complemented by a palette of dark neutrals and accent greens. The color system is designed for clarity and accessibility in SaaS environments.
launchdarkly.comLaunchDarkly colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- LaunchDarkly BluePrimary26, 115, 232
- LaunchDarkly CharcoalSecondary33, 39, 42
- LaunchDarkly TealAccent0, 199, 177
Surfaces
Page, cards and dividers.- LaunchDarkly Light GrayBackground246, 248, 250
- LaunchDarkly WhiteSurface255, 255, 255
- LaunchDarkly Border GrayBorder224, 227, 230
Text
Three tiers of copy.- LaunchDarkly CharcoalText33, 39, 42
- LaunchDarkly Medium GraySecondary text90, 90, 90
- LaunchDarkly Muted GrayMuted text138, 147, 153
Semantic
Feedback and state colors.- LaunchDarkly Success GreenSuccess0, 200, 83
- LaunchDarkly Warning YellowWarning255, 179, 0
- LaunchDarkly Error RedError229, 57, 53
- LaunchDarkly BlueInfo26, 115, 232
Use LaunchDarkly's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
launchdarkly-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1A73E8;
--error: #E53935;
--accent: #00C7B1;
--border: #E0E3E6;
--primary: #1A73E8;
--success: #00C853;
--surface: #FFFFFF;
--warning: #FFB300;
--secondary: #21272A;
--text-muted: #8A9399;
--background: #F6F8FA;
--text-primary: #21272A;
--text-secondary: #5A5A5A;
}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.2:1
Pass
Text on surface
Needs 4.5:1 for body text
15.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.9:1
Pass
Muted text on background
Needs 3:1 for large text
2.9:1
Fail
Muted text on surface
Needs 3:1 for large text
3.1:1
Pass
LaunchDarkly background, border and text colors
The quiet part of the LaunchDarkly palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- LaunchDarkly Light GrayBackground
- HEX
- RGB
- HSL
- LaunchDarkly WhiteSurface
- HEX
- RGB
- HSL
- LaunchDarkly Border GrayBorder
- HEX
- RGB
- HSL
- LaunchDarkly CharcoalText
- HEX
- RGB
- HSL
- LaunchDarkly Medium GraySecondary text
- HEX
- RGB
- HSL
- LaunchDarkly Muted GrayMuted text
- HEX
- RGB
- HSL
About LaunchDarkly's colors
LaunchDarkly's palette centers on a strong blue for trust and reliability, with dark neutrals for contrast and clarity. Accent colors are used sparingly for status and highlights.
Primary blue is paired with dark backgrounds for emphasis.
Accent teal and green are used for interactive elements and success states.
Neutrals provide a clean, modern UI foundation.
Psychology
Blue conveys trust, dependability, and professionalism, which are important for SaaS products. The use of dark neutrals supports focus and readability.
Evolution
The palette has remained stable, with minor adjustments to accent and neutral tones for accessibility. The primary blue has been consistent since the brand's early years.
Where LaunchDarkly uses each color
- Primary
Used for main navigation, primary buttons, and key highlights.
- Secondary
Appears in headers, footers, and dark UI sections.
- Accent
Used for links, active states, and feature highlights.
- Backgrounds
Light gray and white are used for app backgrounds and cards.
- Text
Charcoal and medium gray are used for primary and secondary text.
- Semantic
Green, yellow, and red indicate success, warning, and error states respectively.
LaunchDarkly color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official LaunchDarkly primary brand color is #1A73E8, known as LaunchDarkly Blue.
LaunchDarkly Blue (#1A73E8) is RGB(26, 115, 232). For print, its approximate CMYK is (89, 50, 0, 0).
LaunchDarkly uses #21272A (LaunchDarkly Charcoal) for dark UI elements and #F6F8FA (LaunchDarkly Light Gray) for backgrounds. These neutrals provide contrast and support readability.
Use #1A73E8 for primary actions and navigation, with neutrals for backgrounds and text. Accent and semantic colors should be reserved for status indicators and interactive elements.
The secondary color is LaunchDarkly Charcoal, #21272A, and the accent is LaunchDarkly Teal, #00C7B1. 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 LaunchDarkly's colors consistently when it generates UI.
Make something in the spirit of LaunchDarkly
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.