Swiggy color palette
Food & DrinkSwiggy's color identity is defined by a vibrant orange, paired with deep dark tones and clean neutrals for clarity and contrast. The palette is energetic and instantly recognizable across digital and physical touchpoints.
swiggy.comSwiggy colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Swiggy OrangePrimary252, 128, 25
- Swiggy CharcoalSecondary38, 38, 38
- Swiggy Light GrayAccent245, 245, 245
Surfaces
Page, cards and dividers.- Swiggy WhiteBackground255, 255, 255
- Swiggy Off WhiteSurface249, 249, 249
- Swiggy Border GrayBorder226, 226, 226
Text
Three tiers of copy.- Swiggy Text BlackText40, 44, 63
- Swiggy Text GraySecondary text104, 107, 120
- Swiggy Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Swiggy Success GreenSuccess96, 178, 70
- Swiggy Warning YellowWarning244, 180, 0
- Swiggy Error RedError213, 0, 0
- Swiggy Info BlueInfo1, 118, 255
Use Swiggy's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
swiggy-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0176FF;
--error: #D50000;
--accent: #F5F5F5;
--border: #E2E2E2;
--primary: #FC8019;
--success: #60B246;
--surface: #F9F9F9;
--warning: #F4B400;
--secondary: #262626;
--text-muted: #A3A3A3;
--background: #FFFFFF;
--text-primary: #282C3F;
--text-secondary: #686B78;
}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.8:1
Pass
Text on surface
Needs 4.5:1 for body text
13.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.0:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Swiggy background, border and text colors
The quiet part of the Swiggy palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Swiggy WhiteBackground
- HEX
- RGB
- HSL
- Swiggy Off WhiteSurface
- HEX
- RGB
- HSL
- Swiggy Border GrayBorder
- HEX
- RGB
- HSL
- Swiggy Text BlackText
- HEX
- RGB
- HSL
- Swiggy Text GraySecondary text
- HEX
- RGB
- HSL
- Swiggy Muted GrayMuted text
- HEX
- RGB
- HSL
About Swiggy's colors
Swiggy's palette centers on a bold, energetic orange contrasted with deep charcoal and clean whites. This combination ensures high visibility and a modern, appetizing appeal.
Primary orange paired with deep charcoal for contrast.
Neutral grays and whites balance the vibrancy.
Accent and semantic colors support UI clarity.
Psychology
Orange evokes appetite, warmth, and approachability, making it ideal for a food delivery brand. The dark and neutral tones ground the palette, ensuring readability and professionalism.
Evolution
Swiggy's orange has remained consistent since launch, reinforcing brand recognition. Over time, supporting grays and semantic colors have been refined for improved digital accessibility.
Where Swiggy uses each color
- Primary
Used for logo, primary buttons, and key highlights across web and app.
- Secondary
Appears in navigation bars, footers, and overlays for depth.
- Accent
Used for backgrounds, cards, and subtle UI elements.
- Backgrounds
White and off-white backgrounds provide clarity for content.
- Text
Text Black and Text Gray are used for primary and secondary text throughout the UI.
- Semantic
Green, yellow, red, and blue are used for status indicators, alerts, and notifications.
Swiggy color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Swiggy primary color is Swiggy Orange, hex code #FC8019. This should be used for all primary brand applications.
Swiggy Orange (#FC8019) in RGB is (252, 128, 25). For CMYK, it is approximately (0, 49, 90, 1).
Swiggy uses Swiggy Charcoal (#262626) and Swiggy Text Black (#282C3F) for dark UI elements and text. Swiggy Light Gray (#F5F5F5) and Border Gray (#E2E2E2) are used for backgrounds and dividers.
Use Swiggy Orange (#FC8019) for primary actions and branding, with dark and neutral tones for backgrounds and text. Semantic colors are reserved for status, alerts, and notifications to maintain clarity.
The secondary color is Swiggy Charcoal, #262626, and the accent is Swiggy Light Gray, #F5F5F5. 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 Swiggy's colors consistently when it generates UI.
Make something in the spirit of Swiggy
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.