Algolia color palette
SaaSAlgolia's color system centers on a vibrant blue, complemented by a range of cool grays and accent blues, reflecting its focus on clarity and technology. The palette is designed for high contrast and usability across its SaaS platform and documentation.
algolia.comAlgolia colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Algolia BluePrimary0, 61, 255
- Algolia SkySecondary0, 174, 255
- Algolia NavyAccent10, 37, 64
Surfaces
Page, cards and dividers.- Algolia WhiteBackground255, 255, 255
- Algolia SurfaceSurface245, 247, 250
- Algolia Border GrayBorder229, 232, 237
Text
Three tiers of copy.- Algolia InkText26, 38, 58
- Algolia SlateSecondary text76, 87, 115
- Algolia MutedMuted text123, 134, 154
Semantic
Feedback and state colors.- Algolia Success GreenSuccess0, 196, 140
- Algolia Warning YellowWarning255, 184, 0
- Algolia Error RedError255, 59, 48
- Algolia Info BlueInfo0, 174, 255
Use Algolia's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
algolia-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00AEFF;
--error: #FF3B30;
--accent: #0A2540;
--border: #E5E8ED;
--primary: #003DFF;
--success: #00C48C;
--surface: #F5F7FA;
--warning: #FFB800;
--secondary: #00AEFF;
--text-muted: #7B869A;
--background: #FFFFFF;
--text-primary: #1A263A;
--text-secondary: #4C5773;
}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.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.7:1
Pass
Muted text on background
Needs 3:1 for large text
3.7:1
Pass
Muted text on surface
Needs 3:1 for large text
3.4:1
Pass
Algolia background, border and text colors
The quiet part of the Algolia palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Algolia WhiteBackground
- HEX
- RGB
- HSL
- Algolia SurfaceSurface
- HEX
- RGB
- HSL
- Algolia Border GrayBorder
- HEX
- RGB
- HSL
- Algolia InkText
- HEX
- RGB
- HSL
- Algolia SlateSecondary text
- HEX
- RGB
- HSL
- Algolia MutedMuted text
- HEX
- RGB
- HSL
About Algolia's colors
Algolia's palette is built around a strong, distinctive blue, supported by cool neutrals and functional accent colors. The system prioritizes clarity, accessibility, and a modern SaaS aesthetic.
Primary blue pairs with neutral backgrounds for high contrast.
Accent navy is used for depth and navigation.
Bright secondary and info blues highlight interactive elements.
Psychology
The dominant blue conveys trust, reliability, and technical expertise. Cool grays and whites reinforce a sense of clarity and focus.
Evolution
Algolia's palette has remained consistent, with blue always at its core. Minor adjustments have been made to neutrals and accent colors for improved accessibility and modern UI trends.
Where Algolia uses each color
- Primary
Used for main navigation, primary buttons, and brand highlights.
- Secondary
Appears in secondary buttons, links, and hover states.
- Accent
Used for headers, navigation backgrounds, and emphasis areas.
- Backgrounds
White and surface gray are used for app backgrounds and documentation.
- Text
Ink and slate tones are used for primary and secondary text across the UI.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators.
Algolia color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Algolia primary color is #003DFF, known as Algolia Blue. This is used for key brand and interface elements.
Algolia Blue (#003DFF) in RGB is (0, 61, 255). For CMYK, it is approximately (100, 76, 0, 0).
Algolia uses Algolia Surface (#F5F7FA), Algolia Border Gray (#E5E8ED), and Algolia Muted (#7B869A) for backgrounds, borders, and muted text. These ensure readability and a clean interface.
Use Algolia Blue (#003DFF) for primary actions and branding, with neutrals for backgrounds and text. Semantic colors like success (#00C48C) and error (#FF3B30) are reserved for status and alerts.
The secondary color is Algolia Sky, #00AEFF, and the accent is Algolia Navy, #0A2540. Together with the primary they make up the three brand colors at the top of this page.
6 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 Algolia's colors consistently when it generates UI.
Make something in the spirit of Algolia
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.