Columbia color palette
FashionColumbia's color identity centers on a distinctive blue, reflecting its outdoor heritage and reliability. The palette is clean and functional, supporting a clear, approachable brand presence.
columbia.comColumbia colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Columbia BluePrimary39, 147, 209
- Columbia NavySecondary26, 76, 110
- Columbia GoldAccent244, 185, 66
Surfaces
Page, cards and dividers.- Columbia WhiteBackground255, 255, 255
- Columbia Light GraySurface245, 247, 250
- Columbia Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Columbia CharcoalText34, 34, 34
- Columbia SlateSecondary text75, 85, 99
- Columbia Muted GrayMuted text107, 114, 128
Semantic
Feedback and state colors.- Columbia Success GreenSuccess59, 170, 93
- Columbia Warning YellowWarning226, 166, 0
- Columbia Error RedError209, 67, 67
- Columbia Info BlueInfo39, 147, 209
Use Columbia's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
columbia-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2793D1;
--error: #D14343;
--accent: #F4B942;
--border: #D1D5DB;
--primary: #2793D1;
--success: #3BAA5D;
--surface: #F5F7FA;
--warning: #E2A600;
--secondary: #1A4C6E;
--text-muted: #6B7280;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #4B5563;
}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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.0:1
Pass
Muted text on background
Needs 3:1 for large text
4.8:1
Pass
Muted text on surface
Needs 3:1 for large text
4.5:1
Pass
Columbia background, border and text colors
The quiet part of the Columbia palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Columbia WhiteBackground
- HEX
- RGB
- HSL
- Columbia Light GraySurface
- HEX
- RGB
- HSL
- Columbia Border GrayBorder
- HEX
- RGB
- HSL
- Columbia CharcoalText
- HEX
- RGB
- HSL
- Columbia SlateSecondary text
- HEX
- RGB
- HSL
- Columbia Muted GrayMuted text
- HEX
- RGB
- HSL
About Columbia's colors
Columbia's palette is dominated by a signature blue, complemented by deep navy and neutral grays for clarity and trust. Accent colors like gold add warmth and highlight key actions or features.
Primary blue pairs with navy for hierarchy.
Gold accent contrasts blue for calls to action.
Neutrals provide balance and readability.
Psychology
Blue conveys trust, dependability, and connection to the outdoors. Gold accents introduce energy and optimism without overpowering the core identity.
Evolution
Columbia's palette has remained stable, with Columbia Blue as its anchor for decades. Minor adjustments have refined secondary and accent colors for digital clarity.
Where Columbia uses each color
- Primary
Columbia Blue is used in the logo, main navigation, and primary buttons.
- Secondary
Columbia Navy appears in headers, footers, and as a background for featured content.
- Accent
Columbia Gold highlights promotions, CTAs, and select icons.
- Backgrounds
Columbia White and Light Gray are used for page backgrounds and product grids.
- Text
Charcoal and Slate are used for body text and headings, with Muted Gray for secondary information.
- Semantic
Success Green, Warning Yellow, and Error Red are used for notifications and form feedback.
Columbia color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Columbia brand color is Columbia Blue, with the hex code #2793D1.
Columbia Blue (#2793D1) in RGB is 39, 147, 209. For CMYK, it is approximately 81, 30, 0, 18.
Columbia uses Light Gray (#F5F7FA), Border Gray (#D1D5DB), Slate (#4B5563), and Muted Gray (#6B7280) for backgrounds, borders, and secondary text.
Use Columbia Blue (#2793D1) for primary actions and branding, with Navy (#1A4C6E) and Gold (#F4B942) for emphasis. Neutrals support layout and readability, while semantic colors are reserved for status and feedback.
The secondary color is Columbia Navy, #1A4C6E, and the accent is Columbia Gold, #F4B942. 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 Columbia's colors consistently when it generates UI.
Make something in the spirit of Columbia
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.