Valorant color palette
GamingValorant's color system is defined by a bold red primary, deep dark backgrounds, and sharp high-contrast accents, reflecting its tactical shooter identity. The palette is consistent across the game, website, and esports branding.
playvalorant.comValorant colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Valorant RedPrimary250, 68, 84
- Valorant Dark NavySecondary15, 25, 35
- Valorant TealAccent23, 230, 195
Surfaces
Page, cards and dividers.- Valorant BlackBackground10, 10, 10
- Valorant Surface GraySurface26, 26, 26
- Valorant Border GrayBorder45, 45, 45
Text
Three tiers of copy.- Valorant WhiteText242, 242, 242
- Valorant Light GraySecondary text189, 189, 189
- Valorant Muted GrayMuted text122, 128, 135
Semantic
Feedback and state colors.- Valorant GreenSuccess79, 214, 123
- Valorant YellowWarning255, 184, 76
- Valorant RedError250, 68, 84
- Valorant TealInfo23, 230, 195
Use Valorant's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
valorant-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #17E6C3;
--error: #FA4454;
--accent: #17E6C3;
--border: #2D2D2D;
--primary: #FA4454;
--success: #4FD67B;
--surface: #1A1A1A;
--warning: #FFB84C;
--secondary: #0F1923;
--text-muted: #7A8087;
--background: #0A0A0A;
--text-primary: #F2F2F2;
--text-secondary: #BDBDBD;
}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.7:1
Pass
Text on surface
Needs 4.5:1 for body text
15.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
10.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
9.3:1
Pass
Muted text on background
Needs 3:1 for large text
5.0:1
Pass
Muted text on surface
Needs 3:1 for large text
4.4:1
Pass
Valorant gray, dark and neutral colors
Valorant 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.
- Valorant BlackBackground
- HEX
- RGB
- HSL
- Valorant Surface GraySurface
- HEX
- RGB
- HSL
- Valorant Border GrayBorder
- HEX
- RGB
- HSL
- Valorant WhiteText
- HEX
- RGB
- HSL
- Valorant Light GraySecondary text
- HEX
- RGB
- HSL
- Valorant Muted GrayMuted text
- HEX
- RGB
- HSL
About Valorant's colors
Valorant's palette uses a high-contrast combination of red, teal, and deep navy to evoke energy and clarity. The dark UI tones enhance focus and make key elements stand out.
Primary red is paired with teal for accent highlights.
Dark navy and black provide depth and contrast.
Neutral grays support legibility and hierarchy.
Psychology
The bold red signals urgency and aggression, fitting the game's competitive nature. Teal accents add a sense of technology and precision.
Evolution
Valorant's palette has remained stable since launch, with minor adjustments to neutral tones for accessibility. The core red and dark navy have been consistent across all brand touchpoints.
Where Valorant uses each color
- Primary
Used for main buttons, highlights, and key art elements.
- Secondary
Forms the background of the website, menus, and in-game UI panels.
- Accent
Applied to interactive elements, hover states, and call-to-action highlights.
- Backgrounds
Appears as the default background in the client, website, and esports overlays.
- Text
Primary text is white for contrast; secondary and muted grays are used for less prominent information.
- Semantic
Green, yellow, and red are used for status indicators like success, warnings, and errors in the UI.
Valorant color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Valorant primary color is #FA4454, known as Valorant Red. This is used for main highlights and branding.
Valorant Red (#FA4454) is RGB(250, 68, 84). In CMYK, it is approximately 0, 73, 66, 2.
Valorant uses #0F1923 (Valorant Dark Navy), #0A0A0A (Valorant Black), and #1A1A1A (Valorant Surface Gray) for backgrounds and surfaces. These provide the signature dark, high-contrast look.
Use Valorant Red (#FA4454) for primary actions and highlights, with dark navy and black for backgrounds. Teal (#17E6C3) is reserved for accents and interactive elements.
The secondary color is Valorant Dark Navy, #0F1923, and the accent is Valorant Teal, #17E6C3. 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 Valorant's colors consistently when it generates UI.
Make something in the spirit of Valorant
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.