Barbara is the cheerful Hydro idol-healer from Genshin Impact whose costume reads as both devotional and stage-ready. Her core Cerulean Blue #2C5FB5 anchors the design with a strong Hydro identity, balanced by crisp White #FFFFFF for purity and readability, and refreshed by pale aqua Sail #B7E4F6 in effects and highlights. For UI/UX designers and artists searching for Barbara color codes or HEX palette references, these exact values help recreate her look for character mockups, fan UI skins, and accurate color systems in design tools.
Barbara Genshin Impact Color Codes: HEX, RGB, CMYK
| Preview | Color Name | HEX | RGB | CMYK |
|---|---|---|---|---|
| Cerulean Blue | #2C5FB5 | 44, 95, 181 | 76, 48, 0, 29 | |
| White | #FFFFFF | 255, 255, 255 | 0, 0, 0, 0 | |
| Cream Can | #F5C94A | 245, 201, 74 | 0, 18, 70, 4 | |
| Wewak | #F3A6B6 | 243, 166, 182 | 0, 32, 25, 5 | |
| Sail | #B7E4F6 | 183, 228, 246 | 26, 7, 0, 4 |
Barbara CSS & Tailwind Color Variables
Select your preferred format and copy the ready-to-use CSS variables for your web projects.
:root {
/* Barbara Genshin Impact Palette */
--barbara-genshin-impact-cerulean-blue: #2C5FB5;
--barbara-genshin-impact-white: #FFFFFF;
--barbara-genshin-impact-cream-can: #F5C94A;
--barbara-genshin-impact-wewak: #F3A6B6;
--barbara-genshin-impact-sail: #B7E4F6;
}Barbara CSS Gradients
Beautiful gradient backgrounds inspired by Barbara’s aesthetic. Click to copy the CSS code.
Barbara Color Scheme Breakdown
Cerulean Blue#2C5FB5
This saturated royal blue appears on Barbara’s dress bodice and skirt panels, forming her primary outfit identity and visually linking her to Hydro-themed aesthetics and calm, devotional energy.
White#FFFFFF
Crisp white is used in her frilled collar, apron-like front, sleeves, and nun-idol accents, communicating purity, cleanliness, and the healer role associated with the Church of Favonius.
Cream Can#F5C94A
Warm golden yellow shows up in small trims, buttons, and decorative details on her outfit, adding cheerful idol-like sparkle and highlighting key costume lines without overpowering the Hydro palette.
Wewak#F3A6B6
Soft pastel pink is present in ribbon elements and accessory accents, reinforcing Barbara’s cute pop-idol branding while balancing the colder blues with friendly warmth and approachable charm.
Sail#B7E4F6
Pale aqua blue appears in Hydro skill effects and watery highlights around her healing abilities, signaling freshness and restorative magic while staying harmonious with the cool blue focus of her costume.
Barbara 60-30-10 Design Rule
Apply the classic 60-30-10 UI design rule using Barbara’s palette for a perfectly balanced visual hierarchy.
Barbara UI Component Preview
Here is a live example of how the Barbara color palette looks when applied to a modern UI component.
Barbara
Hydro Healer Idol
“I’ll do my best!”
Barbara 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 Barbara’s aesthetic.
- Main LED: 44, 95, 181
- Accent LED: 255, 255, 255
The Design Philosophy behind Barbara’s Palette
The design philosophy behind Barbara’s palette uses color to communicate role, temperament, and elemental theme. Cerulean Blue (#2C5FB5) signals Hydro energy and calm devotion, while White (#FFFFFF) conveys purity, healer status, and clear visual hierarchy in costume panels. Small warm elements like Cream Can (#F5C94A) and soft Wewak pink (#F3A6B6) add idol charm and focal contrast, guiding the eye to buttons and trims. Pale Sail (#B7E4F6) works for watery effects and accessibility-friendly highlights. This curated HEX-driven approach balances contrast, emotional tone, and functional readability—ideal for UI/UX implementations that need faithful character palettes and reliable color codes.
Best Barbara Color Combinations
Primary & Accent Harmony
Cerulean Blue with Cream Can creates a high-impact focal pair—usable for CTAs and emphasis against a calm Hydro background.
Soft Idol Duo
Wewak pink and Sail aqua form a gentle, friendly combo ideal for UI highlights, tooltips, and secondary buttons that echo idol charm.
Download Barbara Genshin Impact Color Palette
Barbara .ASE Swatches
For Adobe Swatches & Procreate
Barbara .SVG Palette
Vector Color Palette
Barbara .PNG Image
High-Quality Palette Preview
FAQs about Barbara Genshin Impact Color Codes
What is the main color of Barbara’s dress?
The primary dress color is Cerulean Blue — HEX #2C5FB5.
Which colors make up Barbara’s overall outfit palette?
Her outfit palette centers on #2C5FB5 (Cerulean Blue) and #FFFFFF (White), with supporting accents for contrast.
What are the accent or highlight colors used on Barbara?
Accent and highlight colors include Cream Can #F5C94A, Wewak pink #F3A6B6, and pale aqua Sail #B7E4F6 for effects and trims.
