Chick-fil-A color palette
Food & DrinkChick-fil-A's color identity centers on its iconic red, complemented by crisp white and deep gray tones for a clean, inviting look. The palette is simple and instantly recognizable, reflecting the brand's Southern hospitality and focus on quality.
chick-fil-a.comChick-fil-A colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Chick-fil-A RedPrimary229, 22, 54
- Chick-fil-A WhiteSecondary255, 255, 255
- Chick-fil-A BlackAccent0, 0, 0
Surfaces
Page, cards and dividers.- Chick-fil-A Light GrayBackground247, 247, 247
- Chick-fil-A Surface GraySurface242, 242, 242
- Chick-fil-A Border GrayBorder209, 209, 209
Text
Three tiers of copy.- Chick-fil-A CharcoalText34, 34, 34
- Chick-fil-A Medium GraySecondary text102, 102, 102
- Chick-fil-A Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Chick-fil-A Success GreenSuccess75, 170, 80
- Chick-fil-A Warning YellowWarning255, 180, 0
- Chick-fil-A Error RedError229, 22, 54
- Chick-fil-A Info BlueInfo0, 118, 192
Use Chick-fil-A's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
chick-fil-a-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0076C0;
--error: #E51636;
--accent: #000000;
--border: #D1D1D1;
--primary: #E51636;
--success: #4BAA50;
--surface: #F2F2F2;
--warning: #FFB400;
--secondary: #FFFFFF;
--text-muted: #A3A3A3;
--background: #F7F7F7;
--text-primary: #222222;
--text-secondary: #666666;
}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.9: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
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.1:1
Pass
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
Chick-fil-A gray and neutral colors
The quiet part of the Chick-fil-A palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Chick-fil-A Light GrayBackground
- HEX
- RGB
- HSL
- Chick-fil-A Surface GraySurface
- HEX
- RGB
- HSL
- Chick-fil-A Border GrayBorder
- HEX
- RGB
- HSL
- Chick-fil-A CharcoalText
- HEX
- RGB
- HSL
- Chick-fil-A Medium GraySecondary text
- HEX
- RGB
- HSL
- Chick-fil-A Muted GrayMuted text
- HEX
- RGB
- HSL
About Chick-fil-A's colors
Chick-fil-A's palette is built around a vivid red, paired with white and subtle grays for clarity and warmth. The colors are chosen for high contrast and legibility across digital and physical touchpoints.
Red and white provide strong brand recognition.
Grays support UI clarity and accessibility.
Accent black is used for text and emphasis.
Psychology
Red conveys energy, appetite, and approachability, aligning with the brand's friendly service. The white and gray tones add a sense of cleanliness and trust.
Evolution
Chick-fil-A's core palette has remained consistent, with red and white as the foundation since its early days. Recent updates have refined the gray tones for better digital accessibility.
Where Chick-fil-A uses each color
- Primary
Chick-fil-A Red is used in the logo, primary buttons, and promotional materials.
- Secondary
Chick-fil-A White appears as the main background and in packaging.
- Accent
Chick-fil-A Black is used for text, icons, and some navigation elements.
- Backgrounds
Chick-fil-A Light Gray and Surface Gray are used for backgrounds in web and app UIs.
- Text
Charcoal, Medium Gray, and Muted Gray are used for primary, secondary, and muted text respectively.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for alerts and status indicators in digital interfaces.
Chick-fil-A color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Chick-fil-A brand red is #E51636. This color is used in the logo and across key brand touchpoints.
Chick-fil-A Red (#E51636) is RGB(229, 22, 54) and CMYK(0, 90, 76, 10). Use these for accurate print and digital reproduction.
Chick-fil-A uses several grays: Light Gray (#F7F7F7), Surface Gray (#F2F2F2), Border Gray (#D1D1D1), Charcoal (#222222), Medium Gray (#666666), and Muted Gray (#A3A3A3). These provide structure and hierarchy in digital interfaces.
Use Chick-fil-A Red (#E51636) for primary actions and branding, with white and grays for backgrounds and text. Semantic colors are reserved for alerts and status messaging.
The secondary color is Chick-fil-A White, #FFFFFF, and the accent is Chick-fil-A Black, #000000. 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 Chick-fil-A's colors consistently when it generates UI.
Make something in the spirit of Chick-fil-A
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.