Celtic color palette
SportsCeltic Football Club's color identity is defined by its iconic green and white palette, with deep green as the primary color. The club's branding uses these colors consistently across kits, digital, and physical assets.
celticfc.comCeltic colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Celtic GreenPrimary0, 128, 0
- Celtic WhiteSecondary255, 255, 255
- Celtic GoldAccent255, 215, 0
Surfaces
Page, cards and dividers.- Celtic Light GrayBackground246, 246, 246
- Celtic Surface GraySurface229, 229, 229
- Celtic Border GrayBorder176, 176, 176
Text
Three tiers of copy.- Celtic CharcoalText34, 34, 34
- Celtic Medium GraySecondary text102, 102, 102
- Celtic Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Celtic GreenSuccess0, 128, 0
- Celtic GoldWarning255, 215, 0
- Celtic Error RedError211, 47, 47
- Celtic Info BlueInfo25, 118, 210
Use Celtic's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
celtic-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #FFD700;
--border: #B0B0B0;
--primary: #008000;
--success: #008000;
--surface: #E5E5E5;
--warning: #FFD700;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F6F6F6;
--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.7:1
Pass
Text on surface
Needs 4.5:1 for body text
12.6: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
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Celtic gray and neutral colors
The quiet part of the Celtic palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Celtic Light GrayBackground
- HEX
- RGB
- HSL
- Celtic Surface GraySurface
- HEX
- RGB
- HSL
- Celtic Border GrayBorder
- HEX
- RGB
- HSL
- Celtic CharcoalText
- HEX
- RGB
- HSL
- Celtic Medium GraySecondary text
- HEX
- RGB
- HSL
- Celtic Muted GrayMuted text
- HEX
- RGB
- HSL
About Celtic's colors
Celtic's palette is built around a strong green and white contrast, symbolizing heritage and clarity. Gold is used as an accent for prestige and highlights.
Green and white are used in stripes for maximum contrast.
Gold accents are reserved for highlights and special elements.
Neutral grays support UI clarity and text legibility.
Psychology
Green represents tradition, growth, and the Irish heritage of the club. White conveys purity and balance, while gold adds a sense of achievement.
Evolution
Celtic's color palette has remained consistent for decades, with green and white always at the core. Minor adjustments to accent and neutral tones have been made for digital use.
Where Celtic uses each color
- Primary
Celtic Green is used for the home kit, club crest, and primary navigation elements.
- Secondary
Celtic White appears in the iconic hooped jersey, backgrounds, and text.
- Accent
Celtic Gold is used for trim on kits, trophies, and special merchandise.
- Backgrounds
Celtic Light Gray and Surface Gray are used for website backgrounds and UI panels.
- Text
Celtic Charcoal and Medium Gray are used for body text and headings across digital and print.
- Semantic
Green is used for success states, gold for warnings or highlights, and red for errors in digital interfaces.
Celtic color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Celtic brand color is Celtic Green, with hex code #008000.
Celtic Green (#008000) is RGB(0, 128, 0) and CMYK(100, 0, 100, 50).
Celtic uses light and medium grays such as #F6F6F6 (Celtic Light Gray) and #E5E5E5 (Celtic Surface Gray) for backgrounds and UI elements.
Use Celtic Green (#008000) and White (#FFFFFF) as the dominant colors, with Gold (#FFD700) for accents and grays for backgrounds and text. Always maintain high contrast for legibility and brand consistency.
The secondary color is Celtic White, #FFFFFF, and the accent is Celtic Gold, #FFD700. 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 Celtic's colors consistently when it generates UI.
Make something in the spirit of Celtic
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.