Airtable color palette
SaaSAirtable's brand color system is vibrant and modern, centered on a distinctive blue primary with a supporting palette of bright accent colors and neutral grays for UI clarity. The colors are designed for clarity, accessibility, and a playful yet professional feel across its SaaS platform.
airtable.comAirtable colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Airtable BluePrimary24, 191, 255
- Airtable PinkSecondary248, 43, 96
- Airtable YellowAccent255, 180, 0
Surfaces
Page, cards and dividers.- Airtable WhiteBackground255, 255, 255
- Airtable Light GraySurface247, 248, 250
- Airtable Border GrayBorder227, 230, 234
Text
Three tiers of copy.- Airtable CharcoalText34, 39, 43
- Airtable SlateSecondary text107, 119, 140
- Airtable Muted GrayMuted text161, 167, 179
Semantic
Feedback and state colors.- Airtable GreenSuccess45, 202, 140
- Airtable Warning YellowWarning255, 214, 0
- Airtable RedError255, 75, 75
- Airtable Info BlueInfo91, 158, 255
Use Airtable's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
airtable-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #5B9EFF;
--error: #FF4B4B;
--accent: #FFB400;
--border: #E3E6EA;
--primary: #18BFFF;
--success: #2DCA8C;
--surface: #F7F8FA;
--warning: #FFD600;
--secondary: #F82B60;
--text-muted: #A1A7B3;
--background: #FFFFFF;
--text-primary: #22272B;
--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
15.1: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
4.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.3:1
Fail
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
Airtable background, border and text colors
The quiet part of the Airtable palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Airtable WhiteBackground
- HEX
- RGB
- HSL
- Airtable Light GraySurface
- HEX
- RGB
- HSL
- Airtable Border GrayBorder
- HEX
- RGB
- HSL
- Airtable CharcoalText
- HEX
- RGB
- HSL
- Airtable SlateSecondary text
- HEX
- RGB
- HSL
- Airtable Muted GrayMuted text
- HEX
- RGB
- HSL
About Airtable's colors
Airtable's palette is built on a foundation of bright, approachable colors balanced by neutral grays for usability. The system emphasizes clarity, accessibility, and a sense of creative possibility.
Primary blue is complemented by pink and yellow for visual interest.
Neutral grays provide structure and readability.
Accent colors are used sparingly to highlight actions and statuses.
Psychology
The bright blue primary evokes trust, clarity, and modernity, while the accent colors add energy and approachability. The neutral grays ground the experience, ensuring focus remains on content.
Evolution
Airtable's color palette has remained largely consistent since its early years, with minor adjustments to improve accessibility and contrast. The brand has maintained its signature blue and vibrant accents throughout its growth.
Where Airtable uses each color
- Primary
Used for main navigation highlights, primary buttons, and key interactive elements.
- Secondary
Appears in secondary buttons, highlights, and select icons.
- Accent
Used for callouts, badges, and to draw attention to important UI elements.
- Backgrounds
White and light gray backgrounds are used for app screens and content areas.
- Text
Charcoal and slate grays are used for headings, body text, and muted UI labels.
- Semantic
Green, yellow, and red are used for success, warning, and error states respectively across notifications and statuses.
Airtable color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Airtable primary color hex code is #18BFFF. This blue is used prominently throughout the brand's digital interfaces.
Airtable Blue (#18BFFF) in RGB is (24, 191, 255). For print, the closest CMYK equivalent is (81, 0, 0, 0).
Airtable uses several neutral grays, including Airtable Light Gray (#F7F8FA), Border Gray (#E3E6EA), and Muted Gray (#A1A7B3). These provide structure and readability throughout the interface.
Primary and accent colors should be used for key actions and highlights, while neutrals are reserved for backgrounds and text. Always ensure sufficient contrast for accessibility, especially with text and interactive elements.
The secondary color is Airtable Pink, #F82B60, and the accent is Airtable Yellow, #FFB400. 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 Airtable's colors consistently when it generates UI.
Make something in the spirit of Airtable
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.