Phoenix from Valorant is a bold, streetwise radiance whose visual identity is defined by a tight, expressive palette. His primary flame-orange #F26B1D (Tango) and energetic gold #F7C948 (Casablanca) leap from a grounding deep navy #1B2A4A (Cloud Burst), creating instant contrast and personality. For UI/UX designers searching for Phoenix color codes or precise HEX values, this palette balances aggression and clarity: the warm tones convey heat and momentum while the cool navy and neutrals stabilize hierarchy and legibility in interface design.
Phoenix Valorant Color Codes: HEX, RGB, CMYK
| Preview | Color Name | HEX | RGB | CMYK |
|---|---|---|---|---|
| Tango | #F26B1D | 242, 107, 29 | 0, 56, 88, 5 | |
| Casablanca | #F7C948 | 247, 201, 72 | 0, 19, 71, 3 | |
| Cloud Burst | #1B2A4A | 27, 42, 74 | 64, 43, 0, 71 | |
| White | #FFFFFF | 255, 255, 255 | 0, 0, 0, 0 | |
| Mine Shaft | #2B2B2B | 43, 43, 43 | 0, 0, 0, 83 |
Phoenix CSS & Tailwind Color Variables
Select your preferred format and copy the ready-to-use CSS variables for your web projects.
:root {
/* Phoenix Valorant Palette */
--phoenix-valorant-tango: #F26B1D;
--phoenix-valorant-casablanca: #F7C948;
--phoenix-valorant-cloud-burst: #1B2A4A;
--phoenix-valorant-white: #FFFFFF;
--phoenix-valorant-mine-shaft: #2B2B2B;
}More Valorant Color Codes (Orange Palette)
Phoenix CSS Gradients
Beautiful gradient backgrounds inspired by Phoenix’s aesthetic. Click to copy the CSS code.
Phoenix Color Scheme Breakdown
Tango#F26B1D
A vivid flame-orange seen in Phoenix’s fire abilities and warm highlights on his jacket accents, communicating his fiery temperament, aggressive entry style, and the signature heat of his radiance.
Casablanca#F7C948
A bright golden-yellow used for inner flame tones and energetic accents around his abilities and detailing, reinforcing the sense of heat, optimism, and the explosive burst of his kit.
Cloud Burst#1B2A4A
A deep navy-blue that dominates his jacket and clothing base, grounding the design with cool contrast against the fire colors, signaling streetwear confidence and disciplined control beneath the flames.
White#FFFFFF
A clean white used in the jacket’s light panels and trim elements, adding crisp readability to the silhouette and symbolizing clarity and hero-like flair amid Phoenix’s chaotic fire visuals.
Mine Shaft#2B2B2B
A near-black charcoal present in undershirt, pants, and small gear details, providing strong value contrast, visual weight, and a practical tactical feel that balances his bright, showy flames.
Phoenix 60-30-10 Design Rule
Apply the classic 60-30-10 UI design rule using Phoenix’s palette for a perfectly balanced visual hierarchy.
Phoenix UI Component Preview
Here is a live example of how the Phoenix color palette looks when applied to a modern UI component.
Phoenix
Radiant Duelist
“I got the best seat in the house.”
Phoenix Gaming Setup (RGB Peripherals)
Sync your gaming gear! Use these exact RGB values for your Razer Chroma, Corsair iCUE, or Logitech G Hub software to match Phoenix’s aesthetic.
- Main LED: 242, 107, 29
- Accent LED: 247, 201, 72
The Design Philosophy behind Phoenix’s Palette
The design philosophy behind Phoenix uses a triadic approach to communicate narrative, temperament, and functionality. Bright notes like #F26B1D (Tango) and #F7C948 (Casablanca) mirror his incendiary abilities and brash charisma, while #1B2A4A (Cloud Burst) provides a disciplined backdrop that reads well at large scale and in UI components. Accents of #FFFFFF and near-black #2B2B2B control contrast and readability across HUD elements, ensuring accessibility and visual weight where needed. This combination succeeds because it pairs emotive signal colors with pragmatic neutrals, making these exact color codes ideal for designers seeking consistent, on-brand palettes and reliable HEX values for cross-platform implementation.
Best Phoenix Color Combinations
High Contrast Flare
A vivid orange against deep navy creates instant focal contrast perfect for call-to-action buttons and aggressive brand marks.
Warm Accent Pop
Gold highlights paired with near-black provide readable accents and premium, high-visibility UI cues.
Explore More Valorant Character Color Codes
Download Phoenix Valorant Color Palette
Phoenix .ASE Swatches
For Adobe Swatches & Procreate
Phoenix .SVG Palette
Vector Color Palette
Phoenix .PNG Image
High-Quality Palette Preview
FAQs about Phoenix Valorant Color Codes
What is the HEX color of Phoenix’s flame/fire ability?
Phoenix’s primary flame color is HEX #F26B1D (Tango).
What is the main jacket or clothing base HEX used for Phoenix?
The dominant clothing/base color is deep navy HEX #1B2A4A (Cloud Burst).
Which HEX is used for Phoenix’s bright accents and inner flame tones?
Bright accent and inner flame tones use HEX #F7C948 (Casablanca).