Glide color palette
SaaSGlide uses a vibrant, modern color palette centered around its signature cyan, complemented by deep navy and clean neutrals for clarity and accessibility. The brand's UI leverages these colors for a fresh, approachable SaaS experience.
glideapps.comGlide colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Glide CyanPrimary24, 190, 212
- Glide NavySecondary0, 48, 73
- Glide YellowAccent255, 209, 102
Surfaces
Page, cards and dividers.- Glide LightBackground247, 250, 252
- Glide WhiteSurface255, 255, 255
- Glide Border GrayBorder226, 232, 240
Text
Three tiers of copy.- Glide Text DarkText34, 43, 69
- Glide Text GraySecondary text107, 119, 140
- Glide Muted GrayMuted text160, 174, 192
Semantic
Feedback and state colors.- Glide Success GreenSuccess67, 217, 173
- Glide Warning YellowWarning255, 209, 102
- Glide Error RedError242, 95, 92
- Glide Info CyanInfo24, 190, 212
Use Glide's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
glide-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #18BED4;
--error: #F25F5C;
--accent: #FFD166;
--border: #E2E8F0;
--primary: #18BED4;
--success: #43D9AD;
--surface: #FFFFFF;
--warning: #FFD166;
--secondary: #003049;
--text-muted: #A0AEC0;
--background: #F7FAFC;
--text-primary: #222B45;
--text-secondary: #6B778C;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
13.4:1
Pass
Text on surface
Needs 4.5:1 for body text
14.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.3:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.5: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.3:1
Fail
Glide background, border and text colors
The quiet part of the Glide palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Glide LightBackground
- HEX
- RGB
- HSL
- Glide WhiteSurface
- HEX
- RGB
- HSL
- Glide Border GrayBorder
- HEX
- RGB
- HSL
- Glide Text DarkText
- HEX
- RGB
- HSL
- Glide Text GraySecondary text
- HEX
- RGB
- HSL
- Glide Muted GrayMuted text
- HEX
- RGB
- HSL
About Glide's colors
Glide's palette is built around a bold cyan, providing a sense of innovation and clarity. Deep navy and soft neutrals create balance and legibility across digital interfaces.
Primary cyan contrasts with navy for navigation and callouts.
Accent yellow highlights interactive elements and notifications.
Neutral grays and whites maintain a clean, modern UI.
Psychology
The cyan primary evokes trust, freshness, and technological sophistication. Navy and gray tones ground the palette, supporting readability and professionalism.
Evolution
Glide's color system has remained consistent since its early branding, with minor refinements to gray tones for improved accessibility. The core cyan and navy have been stable anchors throughout the brand's evolution.
Where Glide uses each color
- Primary
Used for primary buttons, highlights, and key navigation elements.
- Secondary
Applied to headers, navigation backgrounds, and footers.
- Accent
Used for badges, notifications, and interactive highlights.
- Backgrounds
Light gray and white backgrounds appear on app screens and dashboard panels.
- Text
Dark and gray text colors are used for headings, body copy, and muted UI labels.
- Semantic
Success, warning, and error colors are used for alerts, toasts, and status indicators.
Glide color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Glide primary color hex code is #18BED4. This cyan is used prominently across the brand's UI.
Glide Cyan (#18BED4) has an RGB value of 24, 190, 212. This color is used for primary actions and highlights.
Glide uses #E2E8F0 (Glide Border Gray), #A0AEC0 (Glide Muted Gray), and #F7FAFC (Glide Light) for backgrounds and borders. These ensure clarity and separation in the interface.
Use #18BED4 for primary actions, #003049 for navigation, and #FFD166 for accents. Neutral grays and whites should be used for backgrounds and surfaces to maintain a clean look.
The secondary color is Glide Navy, #003049, and the accent is Glide Yellow, #FFD166. Together with the primary they make up the three brand colors at the top of this page.
3 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 Glide's colors consistently when it generates UI.
Make something in the spirit of Glide
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.