Genius color palette
EntertainmentGenius uses a bold, high-contrast color palette centered on its signature yellow, paired with deep black and neutral grays for a distinctive, readable UI. The palette is designed for clarity and strong brand recognition in the music and entertainment space.
genius.comGenius colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Genius YellowPrimary255, 255, 100
- Genius BlackSecondary0, 0, 0
- Genius PinkAccent255, 0, 64
Surfaces
Page, cards and dividers.- Genius WhiteBackground255, 255, 255
- Genius Light GraySurface247, 247, 247
- Genius Border GrayBorder228, 228, 228
Text
Three tiers of copy.- Genius Black TextText0, 0, 0
- Genius Medium Gray TextSecondary text102, 102, 102
- Genius Muted Gray TextMuted text160, 160, 160
Semantic
Feedback and state colors.- Genius GreenSuccess0, 200, 83
- Genius Warning YellowWarning255, 214, 0
- Genius Error RedError255, 23, 68
- Genius BlueInfo41, 121, 255
Use Genius's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
genius-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2979FF;
--error: #FF1744;
--accent: #FF0040;
--border: #E4E4E4;
--primary: #FFFF64;
--success: #00C853;
--surface: #F7F7F7;
--warning: #FFD600;
--secondary: #000000;
--text-muted: #A0A0A0;
--background: #FFFFFF;
--text-primary: #000000;
--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
21.0:1
Pass
Text on surface
Needs 4.5:1 for body text
19.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.4: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.4:1
Fail
Genius gray and neutral colors
The quiet part of the Genius palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Genius WhiteBackground
- HEX
- RGB
- HSL
- Genius Light GraySurface
- HEX
- RGB
- HSL
- Genius Border GrayBorder
- HEX
- RGB
- HSL
- Genius Black TextText
- HEX
- RGB
- HSL
- Genius Medium Gray TextSecondary text
- HEX
- RGB
- HSL
- Genius Muted Gray TextMuted text
- HEX
- RGB
- HSL
About Genius's colors
Genius’s palette is built around a vibrant yellow paired with deep black, creating a striking, high-contrast look. Neutral grays and accent colors support readability and highlight key actions.
Primary yellow contrasts with black for maximum legibility.
Accent pink is used sparingly for calls to action.
Grays provide structure and hierarchy in the UI.
Psychology
The yellow conveys energy, creativity, and approachability, while black grounds the interface and adds authority. Accent colors add vibrancy and draw attention to interactive elements.
Evolution
The core yellow and black combination has been consistent since Genius's early branding. Over time, the supporting gray and accent colors have been refined for improved accessibility and digital clarity.
Where Genius uses each color
- Primary
Genius Yellow is used for the logo, highlights, and key interactive elements.
- Secondary
Genius Black appears in navigation bars, headers, and text.
- Accent
Genius Pink is reserved for important buttons and notifications.
- Backgrounds
Genius White and Light Gray are used for page backgrounds and content areas.
- Text
Black and gray tones are used for primary, secondary, and muted text throughout the UI.
- Semantic
Green, yellow, red, and blue are used for status indicators such as success, warning, error, and information messages.
Genius color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Genius primary color is #FFFF64, known as Genius Yellow. This color is used prominently in the brand's logo and highlights.
Genius Yellow (#FFFF64) in RGB is (255, 255, 100). For CMYK, it is approximately (0, 0, 61, 0).
Genius uses several neutral tones: Light Gray (#F7F7F7), Border Gray (#E4E4E4), Medium Gray Text (#666666), and Muted Gray Text (#A0A0A0). These provide structure and hierarchy in the interface.
Use Genius Yellow (#FFFF64) for highlights and branding, Black (#000000) for text and navigation, and grays for backgrounds and borders. Accent and semantic colors should be applied sparingly to maintain clarity and focus.
The secondary color is Genius Black, #000000, and the accent is Genius Pink, #FF0040. 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 Genius's colors consistently when it generates UI.
Make something in the spirit of Genius
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.