Callaway color palette
SportsCallaway's brand color system is defined by a bold black primary and a distinctive green accent, reflecting its premium golf identity. The palette is minimal, using strong neutrals and signature green for emphasis.
callawaygolf.comCallaway colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Callaway BlackPrimary0, 0, 0
- Callaway WhiteSecondary255, 255, 255
- Callaway GreenAccent109, 190, 69
Surfaces
Page, cards and dividers.- Callaway Light GrayBackground245, 245, 245
- Callaway Surface GraySurface229, 229, 229
- Callaway Border GrayBorder194, 194, 194
Text
Three tiers of copy.- Callaway Text BlackText0, 0, 0
- Callaway Text GraySecondary text109, 109, 109
- Callaway Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- Callaway Success GreenSuccess109, 190, 69
- Callaway Warning YellowWarning255, 194, 14
- Callaway Error RedError208, 2, 27
- Callaway Info BlueInfo0, 114, 206
Use Callaway's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
callaway-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #D0021B;
--accent: #6DBE45;
--border: #C2C2C2;
--primary: #000000;
--success: #6DBE45;
--surface: #E5E5E5;
--warning: #FFC20E;
--secondary: #FFFFFF;
--text-muted: #A3A3A3;
--background: #F5F5F5;
--text-primary: #000000;
--text-secondary: #6D6D6D;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.3:1
Pass
Text on surface
Needs 4.5:1 for body text
16.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.1:1
Fail
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.0:1
Fail
Callaway gray and neutral colors
The quiet part of the Callaway palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Callaway Light GrayBackground
- HEX
- RGB
- HSL
- Callaway Surface GraySurface
- HEX
- RGB
- HSL
- Callaway Border GrayBorder
- HEX
- RGB
- HSL
- Callaway Text BlackText
- HEX
- RGB
- HSL
- Callaway Text GraySecondary text
- HEX
- RGB
- HSL
- Callaway Muted GrayMuted text
- HEX
- RGB
- HSL
About Callaway's colors
Callaway's color palette is grounded in strong black and white contrasts, accented by a vibrant green that signals energy and growth. The supporting grays provide a modern, neutral backdrop for product and content focus.
Primary black contrasts with white for clarity.
Green accent draws attention to key actions.
Grays unify UI elements and backgrounds.
Psychology
Black conveys premium quality and authority, while green evokes freshness and success, aligning with golf's outdoor spirit. The palette is designed to feel both professional and approachable.
Evolution
Callaway's palette has remained consistent, with black and green as enduring brand signatures. Minor adjustments to gray tones have modernized the interface over time.
Where Callaway uses each color
- Primary
Callaway Black is used for the logo, navigation bars, and primary text.
- Secondary
Callaway White is the main background color for websites and packaging.
- Accent
Callaway Green highlights buttons, CTAs, and select product details.
- Backgrounds
Light and surface grays are used for page backgrounds and UI surfaces.
- Text
Text colors range from black for headings to muted gray for secondary information.
- Semantic
Green, yellow, red, and blue are used for success, warning, error, and info states in digital interfaces.
Callaway color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Callaway brand color is black, hex code #000000. The signature accent green is #6DBE45.
Callaway Black is #000000, which is RGB(0,0,0) and CMYK(0,0,0,100).
Callaway uses several grays: Light Gray #F5F5F5, Surface Gray #E5E5E5, Border Gray #C2C2C2, and Text Gray #6D6D6D.
Use Callaway Black for primary elements and text, Callaway Green for accents and CTAs, and grays for backgrounds and borders. Maintain high contrast for accessibility and brand consistency.
The secondary color is Callaway White, #FFFFFF, and the accent is Callaway Green, #6DBE45. Together with the primary they make up the three brand colors at the top of this page.
3 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 Callaway's colors consistently when it generates UI.
Make something in the spirit of Callaway
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.