UFC color palette
SportsUFC's color identity is bold and aggressive, centered around a striking red paired with black, white, and gray neutrals. The palette reflects the sport's intensity and modern, high-impact branding.
ufc.comUFC colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- UFC RedPrimary210, 10, 10
- UFC BlackSecondary0, 0, 0
- UFC WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- UFC Dark BackgroundBackground24, 24, 24
- UFC Surface GraySurface35, 35, 35
- UFC Border GrayBorder53, 53, 53
Text
Three tiers of copy.- UFC Text WhiteText255, 255, 255
- UFC Text GraySecondary text184, 184, 184
- UFC Muted GrayMuted text117, 117, 117
Semantic
Feedback and state colors.- UFC Success GreenSuccess39, 174, 96
- UFC Warning OrangeWarning242, 153, 74
- UFC Error RedError210, 10, 10
- UFC Info BlueInfo45, 156, 219
Use UFC's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
ufc-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2D9CDB;
--error: #D20A0A;
--accent: #FFFFFF;
--border: #353535;
--primary: #D20A0A;
--success: #27AE60;
--surface: #232323;
--warning: #F2994A;
--secondary: #000000;
--text-muted: #757575;
--background: #181818;
--text-primary: #FFFFFF;
--text-secondary: #B8B8B8;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.8:1
Pass
Text on surface
Needs 4.5:1 for body text
15.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
9.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.9:1
Pass
Muted text on background
Needs 3:1 for large text
3.9:1
Pass
Muted text on surface
Needs 3:1 for large text
3.4:1
Pass
UFC gray, dark and neutral colors
UFC runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- UFC Dark BackgroundBackground
- HEX
- RGB
- HSL
- UFC Surface GraySurface
- HEX
- RGB
- HSL
- UFC Border GrayBorder
- HEX
- RGB
- HSL
- UFC Text WhiteText
- HEX
- RGB
- HSL
- UFC Text GraySecondary text
- HEX
- RGB
- HSL
- UFC Muted GrayMuted text
- HEX
- RGB
- HSL
About UFC's colors
UFC's palette is dominated by high-contrast red, black, and white, creating a dramatic and energetic visual experience. The supporting grays provide structure and clarity in digital and broadcast environments.
Primary red contrasts with black and white for maximum impact.
Grays are used to balance and support the dominant tones.
Accent colors are reserved for functional UI signals.
Psychology
Red evokes energy, aggression, and excitement, aligning with UFC's brand values. Black and gray add authority and seriousness, while white ensures clarity and legibility.
Evolution
The UFC palette has remained largely stable since its early years, with minor refinements to red and gray tones for digital consistency. The core red, black, and white scheme has been a defining feature throughout the brand's history.
Where UFC uses each color
- Primary
UFC Red is used for logos, call-to-action buttons, and highlights across digital and broadcast assets.
- Secondary
UFC Black is the dominant background for websites, apps, and event graphics.
- Accent
UFC White is used for text, logos, and elements requiring high contrast.
- Backgrounds
UFC Dark Background and Surface Gray appear in UI backgrounds, overlays, and broadcast graphics.
- Text
UFC Text White and Text Gray are used for primary and secondary text on dark backgrounds.
- Semantic
Success, warning, error, and info colors are used for notifications, status indicators, and interactive elements.
UFC color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official UFC primary color is #D20A0A. This red is used for the logo and key highlights.
UFC Red (#D20A0A) in RGB is (210, 10, 10) and in CMYK is approximately (0, 95, 95, 18).
UFC uses several dark and gray tones: #181818 (Dark Background), #232323 (Surface Gray), #353535 (Border Gray), #B8B8B8 (Text Gray), and #757575 (Muted Gray). These provide structure and legibility in digital interfaces.
Use UFC Red (#D20A0A) for primary branding and action elements, black and dark grays for backgrounds, and white for text and logos. Semantic colors are reserved for UI states and notifications.
The secondary color is UFC Black, #000000, and the accent is UFC White, #FFFFFF. 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 UFC's colors consistently when it generates UI.
Make something in the spirit of UFC
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.