Cisco color palette
TechCisco's color identity is defined by its signature blue, complemented by a palette of supporting blues, teals, and neutral grays. The system emphasizes clarity, professionalism, and technological innovation.
cisco.comCisco colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Cisco BluePrimary27, 160, 215
- Cisco Deep BlueSecondary0, 80, 115
- Cisco Light CyanAccent0, 188, 235
Surfaces
Page, cards and dividers.- Cisco Light GrayBackground247, 247, 247
- Cisco WhiteSurface255, 255, 255
- Cisco Soft GrayBorder209, 211, 212
Text
Three tiers of copy.- Cisco CharcoalText34, 34, 34
- Cisco Medium GraySecondary text90, 90, 90
- Cisco Muted GrayMuted text140, 140, 140
Semantic
Feedback and state colors.- Cisco Success GreenSuccess67, 176, 42
- Cisco Warning YellowWarning255, 181, 0
- Cisco Error RedError226, 35, 26
- Cisco Info TealInfo0, 156, 166
Use Cisco's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
cisco-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009CA6;
--error: #E2231A;
--accent: #00BCEB;
--border: #D1D3D4;
--primary: #1BA0D7;
--success: #43B02A;
--surface: #FFFFFF;
--warning: #FFB500;
--secondary: #005073;
--text-muted: #8C8C8C;
--background: #F7F7F7;
--text-primary: #222222;
--text-secondary: #5A5A5A;
}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
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.9:1
Pass
Muted text on background
Needs 3:1 for large text
3.1:1
Pass
Muted text on surface
Needs 3:1 for large text
3.4:1
Pass
Cisco gray and neutral colors
The quiet part of the Cisco palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Cisco Light GrayBackground
- HEX
- RGB
- HSL
- Cisco WhiteSurface
- HEX
- RGB
- HSL
- Cisco Soft GrayBorder
- HEX
- RGB
- HSL
- Cisco CharcoalText
- HEX
- RGB
- HSL
- Cisco Medium GraySecondary text
- HEX
- RGB
- HSL
- Cisco Muted GrayMuted text
- HEX
- RGB
- HSL
About Cisco's colors
Cisco's palette is centered around blue, symbolizing trust and technology, with supporting neutrals and functional colors for clarity. The color system is designed for accessibility and brand consistency.
Primary blue is complemented by deep and light blues.
Neutral grays provide balance and support legibility.
Functional colors (green, yellow, red) are reserved for status and alerts.
Psychology
Blue conveys reliability, intelligence, and calm, aligning with Cisco's technology leadership. The use of neutral grays and whites ensures a professional and modern appearance.
Evolution
Cisco's color palette has remained stable, with minor refinements to blue shades for digital clarity. The supporting neutrals have been updated for improved accessibility and UI consistency.
Where Cisco uses each color
- Primary
Cisco Blue is used for main navigation, primary buttons, and key brand elements.
- Secondary
Cisco Deep Blue appears in headers, footers, and secondary navigation.
- Accent
Cisco Light Cyan is used for highlights, icons, and interactive states.
- Backgrounds
Cisco Light Gray and White are used for page backgrounds and card surfaces.
- Text
Cisco Charcoal and Medium Gray are used for primary and secondary text, with Muted Gray for disabled or less prominent text.
- Semantic
Success Green, Warning Yellow, and Error Red are used for status indicators, alerts, and notifications.
Cisco color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Cisco primary color is Cisco Blue, hex code #1BA0D7. This color is used for main branding and primary actions.
Cisco Blue (#1BA0D7) in RGB is (27, 160, 215) and in CMYK is (87, 25, 0, 16). Use these values for print and digital consistency.
Cisco uses several grays: Cisco Light Gray (#F7F7F7), Soft Gray (#D1D3D4), Medium Gray (#5A5A5A), and Muted Gray (#8C8C8C) for backgrounds, borders, and text. These ensure readability and a clean UI.
Use Cisco Blue (#1BA0D7) for primary actions, Deep Blue (#005073) for secondary elements, and neutrals for backgrounds and text. Reserve semantic colors for status and alerts only.
The secondary color is Cisco Deep Blue, #005073, and the accent is Cisco Light Cyan, #00BCEB. 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 Cisco's colors consistently when it generates UI.
Make something in the spirit of Cisco
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.