ABC color palette
MediaABC's brand color system is defined by its iconic red primary, supported by a clean, neutral palette for UI and text. The color identity is instantly recognizable and has remained consistent for decades.
abc.comABC colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- ABC RedPrimary255, 0, 0
- ABC WhiteSecondary255, 255, 255
- ABC BlackAccent0, 0, 0
Surfaces
Page, cards and dividers.- ABC Light GrayBackground245, 245, 245
- ABC Surface GraySurface229, 229, 229
- ABC Border GrayBorder204, 204, 204
Text
Three tiers of copy.- ABC CharcoalText34, 34, 34
- ABC Medium GraySecondary text102, 102, 102
- ABC Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- ABC Success GreenSuccess46, 139, 87
- ABC Warning OrangeWarning255, 165, 0
- ABC Error RedError178, 34, 34
- ABC Info BlueInfo0, 114, 206
Use ABC's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
abc-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #B22222;
--accent: #000000;
--border: #CCCCCC;
--primary: #FF0000;
--success: #2E8B57;
--surface: #E5E5E5;
--warning: #FFA500;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F5F5F5;
--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.6: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
ABC gray and neutral colors
The quiet part of the ABC palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- ABC Light GrayBackground
- HEX
- RGB
- HSL
- ABC Surface GraySurface
- HEX
- RGB
- HSL
- ABC Border GrayBorder
- HEX
- RGB
- HSL
- ABC CharcoalText
- HEX
- RGB
- HSL
- ABC Medium GraySecondary text
- HEX
- RGB
- HSL
- ABC Muted GrayMuted text
- HEX
- RGB
- HSL
About ABC's colors
ABC uses a bold red as its primary color, symbolizing energy and visibility. The supporting palette is neutral, ensuring content clarity and accessibility.
Red is used for branding and highlights.
Neutrals balance the vibrant primary.
Accent black and white provide contrast.
Psychology
Red evokes urgency, excitement, and authority, fitting for a major media network. The neutrals convey trust and professionalism.
Evolution
ABC's palette has remained stable, with red as the core identity since its inception. Minor adjustments to gray tones have improved digital accessibility.
Where ABC uses each color
- Primary
ABC Red is used in the logo, navigation bars, and key calls to action.
- Secondary
ABC White appears as the main background and in the logo.
- Accent
ABC Black is used for text, overlays, and select UI elements.
- Backgrounds
ABC Light Gray is the default app and web background.
- Text
ABC Charcoal is used for primary headlines and body text.
- Semantic
Success, warning, error, and info colors are used for alerts and status indicators in digital products.
ABC color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official ABC brand color is ABC Red, hex code #FF0000. It is used prominently in the logo and key branding elements.
ABC Red is #FF0000 in hex, which is RGB(255, 0, 0). For print, the CMYK equivalent is (0, 100, 100, 0).
ABC uses Light Gray (#F5F5F5), Surface Gray (#E5E5E5), Border Gray (#CCCCCC), and Charcoal (#222222) for UI backgrounds and text. These ensure readability and a clean interface.
Use ABC Red (#FF0000) for primary branding and calls to action, with neutrals for backgrounds and text. Accent and semantic colors are reserved for highlights and status messaging.
The secondary color is ABC White, #FFFFFF, and the accent is ABC Black, #000000. 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 ABC's colors consistently when it generates UI.
Make something in the spirit of ABC
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.