Videl Color Codes – Dragon Ball Z Palette & HEX Values for UI Design

Videl Color Codes – Dragon Ball Z Palette & HEX Values for UI Design

Videl is the fierce, justice-driven daughter of Mr. Satan in Dragon Ball Z, known for her unwavering courage and sharp combat instincts. Her visual design channels that tenacity through a tightly controlled five-color palette that designers frequently reference for character-driven color codes. The near-black Eerie Black (#1A1A1A) of her hair anchors every composition, while the vivid Denim (#2E86C1) in her eyes injects an unmistakable emotional focal point. Against those deep tones, the clean Porcelain (#F2F3F4) of her battle tank top creates a heroic, high-contrast silhouette that instantly communicates purity of purpose. Together, these HEX values form a versatile palette ready for UI themes, brand boards, and illustration work.

Eerie Black
#1A1A1A
Denim
#2E86C1
Porcelain
#F2F3F4
Midnight Blue
#1F4E79
Maize
#F0C8A0

Videl Dragon Ball Color Codes: HEX, RGB, CMYK

Preview Color Name HEX RGB CMYK
Eerie Black #1A1A1A 26, 26, 26 0, 0, 0, 90
Denim #2E86C1 46, 134, 193 76, 31, 0, 24
Porcelain #F2F3F4 242, 243, 244 1, 0, 0, 4
Midnight Blue #1F4E79 31, 78, 121 74, 36, 0, 53
Maize #F0C8A0 240, 200, 160 0, 17, 33, 6

Videl CSS & Tailwind Color Variables

Select your preferred format and copy the ready-to-use CSS variables for your web projects.

:root {
/* Videl Dragon Ball Palette */
--videl-dragon-ball-eerie-black: #1A1A1A;
--videl-dragon-ball-denim: #2E86C1;
--videl-dragon-ball-porcelain: #F2F3F4;
--videl-dragon-ball-midnight-blue: #1F4E79;
--videl-dragon-ball-maize: #F0C8A0;
}

Videl CSS Gradients

Beautiful gradient backgrounds inspired by Videl’s aesthetic. Click to copy the CSS code.

Click to Copy CSS
Eerie Black to Midnight Blue#1A1A1A → #1F4E79
Click to Copy CSS
Porcelain to Eerie Black#F2F3F4 → #1A1A1A

Videl Color Scheme Breakdown

Eerie Black#1A1A1A

Videl’s long black hair forms a solid base anchor for her silhouette; this near-black tone contrasts sharply with her bright blue eyes and the white top she wears during battle.

Denim#2E86C1

Videl’s blue eyes are her most expressive feature; this vivid sapphire tone appears whenever she very calmly analyzes opponents in battle, and it mirrors her determined, confident unyielding fighting spirit.

Porcelain#F2F3F4

The white tank top Videl wears in her martial-arts outfit gives her a very clean, heroic silhouette; this neutral base lets her blue pants and black hair stand out immediately.

Midnight Blue#1F4E79

Videl’s navy-blue martial-arts pants are a very key part of her iconic look; this deep blue strongly anchors her lower body and reinforces the overall blue theme of her eyes.

Maize#F0C8A0

Videl’s fair skin tone is a very natural base color in anime scenes without shading; it balances the white top and blue pants with a subtle, warm human presence overall.

Videl 60-30-10 Design Rule

Apply the classic 60-30-10 UI design rule using Videl’s palette for a perfectly balanced visual hierarchy.

60% Background
#F2F3F4
30% Primary
#1F4E79
10% Accent
#1A1A1A

Use Porcelain (#F2F3F4) for large background spaces, Midnight Blue (#1F4E79) for primary text and structural UI elements, and vibrant Eerie Black (#1A1A1A) exclusively for call-to-action buttons and important highlights.

Videl UI Component Preview

Here is a live example of how the Videl color palette looks when applied to a modern UI component.

Videl

Fearless Martial Artist

“I’m not going to lose! Not to anyone!”

Videl 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 Videl’s aesthetic.

  • Main LED: 26, 26, 26
  • Accent LED: 46, 134, 193

The Design Philosophy behind Videl’s Palette

The design team behind Videl built her palette around a single narrative idea: unyielding determination wrapped in clarity. The dominant Midnight Blue (#1F4E79) of her martial-arts pants grounds her physically, symbolizing discipline and depth, while the brighter Denim (#2E86C1) of her eyes signals the fire of her fighting spirit—two blues that echo each other without repeating. Eerie Black (#1A1A1A) hair frames her face like ink strokes, ensuring the viewer’s gaze locks onto her expressive eyes. The Porcelain (#F2F3F4) top acts as negative space, letting every saturated hue breathe, and the warm Maize (#F0C8A0) skin tone prevents the palette from feeling cold or mechanical. This balance of cool authority and warm humanity makes Videl’s color codes exceptionally adaptable for modern UI palettes, hero banners, and character-themed design systems.

Best Videl Color Combinations

Ink & Porcelain Strike

Pairing near-black with off-white delivers maximum contrast ratio (≈16:1), making it ideal for typography, dark-mode UI backgrounds, and bold call-to-action buttons that demand instant readability.

Sapphire Warmth Duo

The cool Denim blue against the warm Maize skin tone creates a natural complementary tension that guides the eye, perfect for accent buttons, illustration highlights, and data-viz color coding.

Download Videl Dragon Ball Color Palette

ASE

Videl .ASE Swatches

For Adobe Swatches & Procreate

SVG

Videl .SVG Palette

Vector Color Palette

PNG

Videl .PNG Image

High-Quality Palette Preview

FAQs about Videl Dragon Ball Color Codes

What is the exact HEX color code for Videl’s black hair in Dragon Ball Z?

Videl’s long black hair uses the HEX code #1A1A1A, a shade called Eerie Black (RGB 26, 26, 26). It serves as the darkest anchor in her palette and contrasts sharply against lighter UI backgrounds.

Which HEX codes define Videl’s martial-arts outfit color scheme?

Her outfit combines Porcelain #F2F3F4 for the white tank top and Midnight Blue #1F4E79 for the navy pants. Together they create a clean, heroic two-tone base that designers often replicate in sporty or action-themed interfaces.

What accent color represents Videl’s eyes and how can I use it in a design project?

Videl’s eyes are rendered in Denim #2E86C1 (RGB 46, 134, 193). This vivid sapphire works beautifully as an interactive accent color—think link states, focus rings, or progress indicators—because it carries enough saturation to draw attention while staying harmonious with neutral grays.

Copied