Charlotte’s visual identity in Fontaine pairs professional poise with theatrical flair, making her palette a favorite for designers seeking character-accurate UI assets. The signature violet #6E4AA7 (Studio) punctuates trims and accessories, while the deep utility tone #2B2F3A (Charade) anchors silhouettes; crisp highlights of #F2F3F7 (Athens Gray) keep details readable in small UI elements. For anyone searching Charlotte color codes or HEX palette references, this guide provides exact values and practical context for implementing her look in interfaces, mockups, and fan art with pixel-accurate consistency.
Charlotte Genshin Impact Color Codes: HEX, RGB, CMYK
| Preview | Color Name | HEX | RGB | CMYK |
|---|---|---|---|---|
| Studio | #6E4AA7 | 110, 74, 167 | 34, 56, 0, 35 | |
| Charade | #2B2F3A | 43, 47, 58 | 26, 19, 0, 77 | |
| Athens Gray | #F2F3F7 | 242, 243, 247 | 2, 2, 0, 3 | |
| Laser | #C8A26B | 200, 162, 107 | 0, 19, 46, 22 | |
| Yellow Metal | #7A5A3C | 122, 90, 60 | 0, 26, 51, 52 |
Charlotte CSS & Tailwind Color Variables
Select your preferred format and copy the ready-to-use CSS variables for your web projects.
:root {
/* Charlotte Genshin Impact Palette */
--charlotte-genshin-impact-studio: #6E4AA7;
--charlotte-genshin-impact-charade: #2B2F3A;
--charlotte-genshin-impact-athens-gray: #F2F3F7;
--charlotte-genshin-impact-laser: #C8A26B;
--charlotte-genshin-impact-yellow-metal: #7A5A3C;
}More Genshin Impact Color Codes (Purple Palette)
Charlotte CSS Gradients
Beautiful gradient backgrounds inspired by Charlotte’s aesthetic. Click to copy the CSS code.
Charlotte Color Scheme Breakdown
Studio#6E4AA7
This saturated violet is the signature hue of Charlotte’s outfit accents, conveying Fontaine’s elegant journalistic flair while adding a confident, slightly theatrical pop-culture contrast against her darker main garments.
Charade#2B2F3A
A deep charcoal navy used across her main clothing panels, giving a serious reporter vibe, grounding the design, and making her brighter accessory colors read clearly in silhouette and key art.
Athens Gray#F2F3F7
Clean off-white appears on shirt and trim details, suggesting crisp press attire and professional neatness, while also acting as a high-contrast frame for her purple motifs and accessories.
Laser#C8A26B
Warm muted gold shows up in metallic buttons, fasteners, and ornamental details, implying refined Fontaine craftsmanship and giving a premium, camera-and-press equipment feel without overpowering the palette.
Yellow Metal#7A5A3C
A medium warm brown appears in leather straps, belts, or accessory pieces, reinforcing a practical field-reporter aesthetic and adding earthy balance to the cooler navy and violet tones.
Charlotte 60-30-10 Design Rule
Apply the classic 60-30-10 UI design rule using Charlotte’s palette for a perfectly balanced visual hierarchy.
Charlotte UI Component Preview
Here is a live example of how the Charlotte color palette looks when applied to a modern UI component.
Charlotte
Fontaine Reporter
“Every story deserves the spotlight.”
Charlotte 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 Charlotte’s aesthetic.
- Main LED: 110, 74, 167
- Accent LED: 43, 47, 58
The Design Philosophy behind Charlotte’s Palette
The design philosophy behind Charlotte’s palette balances journalistic restraint with a single theatrical accent to tell a visual story: Charade (#2B2F3A) functions as the grounding field-reporter base, offering high legibility and silhouette clarity, while Studio (#6E4AA7) provides a confident, saturated focal point that signals personality and narrative role. Athens Gray (#F2F3F7) supplies crisp contrast for trims and type, and metallic notes like Laser (#C8A26B) and Yellow Metal (#7A5A3C) imply craftsmanship and equipment without overpowering the scheme. For UI and UX designers, these HEX codes translate narrative cues into usable color tokens and accessible contrast pairs, making the palette both evocative and practical for interface design.
Best Charlotte Color Combinations
Signature Accent
A saturated violet against an off-white provides a high-contrast accent ideal for CTAs, badges, and focus elements in UI.
Pressroom Contrast
Deep charcoal paired with warm muted gold gives professional, premium accents suitable for headers, icons, and borders.
Explore More Genshin Impact Character Color Codes
Download Charlotte Genshin Impact Color Palette
Charlotte .ASE Swatches
For Adobe Swatches & Procreate
Charlotte .SVG Palette
Vector Color Palette
Charlotte .PNG Image
High-Quality Palette Preview
FAQs about Charlotte Genshin Impact Color Codes
What is the HEX code for Charlotte’s signature violet accent?
Charlotte’s signature violet accent (Studio) uses HEX #6E4AA7.
Which HEX represents Charlotte’s main clothing color or base tone?
The main clothing/base tone is the deep charcoal navy Charade with HEX #2B2F3A.
What HEX values are used for Charlotte’s metallic or leather accents?
Metallic details use Laser (#C8A26B) and leather/straps use Yellow Metal (#7A5A3C).
