Skip to main content

Using Electric Blue in design

HEX

#7DF9FF

RGB

125, 249, 255

HSL

183°, 100%, 75%

HSV

183°, 51%, 100%

A high-voltage cyan-leaning blue that looks lit from within — club lighting, sci-fi HUDs, sportswear stripes. #7DF9FF grabs peripheral vision faster than navy ever will. Use it sparingly or the whole layout feels like a rave flyer.

Best for

Marketing websites, social media graphics, and campaign landing pages.

Accessibility

Check contrast before using electric blue for text-heavy layouts, especially on low-contrast backgrounds.

Electric Blue color swatch — #7DF9FF

How does electric blue compare to nearby colors?

What is the difference between electric blue and baby blue?

Electric Blue (#7DF9FF) looks cleaner and more charged than Baby Blue (#89CFF0) when the two are shown together. Electric Blue reads faster on screen, so it changes the palette from steady to attention-seeking more quickly than Baby Blue does. Begin with electric blue when the family needs its current undertone and surface character; keep baby blue for the nearby alternative that shifts the mood without leaving the same hue neighborhood.

What color is electric blue?

Common in nightlife graphics, esports, athletic footwear accents, and retro-futurist UI. The name explicitly references artificial, luminous color rather than natural pigments.

What is the hex code for electric blue?

FormatValue
HEX#7DF9FF
RGBrgb(125, 249, 255)
HSLhsl(183°, 100%, 75%)
HSV / HSBhsv(183°, 51%, 100%)
CMYK (approx.)cmyk(51%, 2%, 0%, 0%)

Convert Electric Blue to other color formats

Open the color converter with Electric Blue (#7DF9FF) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.

Convert Electric Blue in the color converter

What does electric blue mean in design?

Electric blue is often associated with energy, futurism, and nightlife excitement. Next to cyan or ice blue, it tends to read as brighter, more artificial, and less icy or pastel.

How do I use electric blue in code?

CSS (hex)color: #7DF9FF;
CSS (rgb)color: rgb(125, 249, 255);
CSS (hsl)color: hsl(183, 100%, 75%);
RGB %rgb(49%, 98%, 100%)
Tailwindtext-[#7DF9FF]
SwiftUIColor(red: 0.490, green: 0.976, blue: 1.000)
UIKitUIColor(red: 0.490, green: 0.976, blue: 1.000, alpha: 1.0)
AndroidColor.rgb(125, 249, 255)
ComposeColor(0xFF7DF9FF)
Web Safe#66FFFF

Is electric blue accessible?

CombinationRatioAAAA lgAAAAAA lgUI
AaWhite text on this color1.25:1
AaBlack text on this color16.87:1
AaThis color as text on white1.25:1
AaThis color as text on black16.87:1

WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.

How does electric blue look with color blindness?

Normal vision#7DF9FF
Protanopia (red-blind)#B3B4FE
Deuteranopia (green-blind)#ACA2FD
Tritanopia (blue-blind)#83FCFC
Achromatopsia (total color blindness)#DFDFDF

Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.

What colors go with electric blue

#36454F
Charcoal

Charcoal lets electric blue stay light and atmospheric while still giving the layout a readable dark value for text and hierarchy.

#FFD700
Gold

Gold warms electric blue enough to keep the palette from feeling chilly or overly technical, while still reading intentional rather than decorative-for-its-own-sake.

#FFFDD0
Cream

Cream takes the hard digital edge off electric blue and makes the color feel more printed, paper-backed, and approachable.

#FFFFFF
White

White keeps electric blue poster-clean instead of crowded, which is especially useful when the color already arrives with a strong screen presence.

#C0C0C0
Silver

Silver gives electric blue a second note that is different enough to feel intentional but not so different that the palette loses coherence.

What colors clash with electric blue

#39FF14
Neon Green

Neon Green beside electric blue tends to vibrate on bright displays, so the pair reads more like a HUD effect than a considered brand palette.

#FF00FF
Magenta

With electric blue, magenta introduces a second emotional story instead of reinforcing the first one, so the palette can feel internally split.

#FFA500
Orange

With electric blue, orange creates a warm-cool collision that announces itself before it earns a compositional reason to exist.

#FFFF00
Yellow

Yellow changes the palette around electric blue into something more highlighter-like than many brands want.

How should I use electric blue in design?

  • Electric Blue works best as a background tint, card fill, or section divider — it adds warmth without competing with foreground content. Pair with dark text for readability.
  • Warm touches like gold or coral bring out electric blue's cooler character by contrast, while staying with cool neighbors creates a calmer, more unified feel.
  • Vivid colors like electric blue work best as punctuation in a layout: CTAs, key metrics, or a single hero element. Surrounding neutrals keep it from fatiguing the viewer.

What are good electric blue palettes?

Fresh canvas

Marketing websites, social media graphics, and campaign landing pages.

Autumn light

Nonprofit campaigns, fundraising pages, and grant materials.

Brand-ready mix

Mobile app interfaces, onboarding screens, and light-mode UI themes.

Design with electric blue in Moda

Create a presentation or document using electric blue as your accent color. Moda's AI applies your color palette automatically.

Create a design with electric blue

What are the shades and tints of electric blue?

Shades (darker)

Tints (lighter)

Tones (desaturated)

Hue variations

What are the color harmonies for electric blue?

Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.

Complementary
Light Red#FF8680Computed
Analogous
Light Blue#80B9FFComputedLight Cyan#80FFC6Computed
Triadic
Light Purple#FF80F9ComputedLight Yellow#F9FF80Computed
Split-complementary
Light Red#FF80B9ComputedLight Orange#FFC680Computed
Monochromatic
Dark Cyan#006166ComputedCyan#00C2CCComputedCyan#33F5FFComputedLight Cyan#99FAFFComputed
Square
Light Purple#C680FFComputedLight Red#FF8680ComputedLight Green#B9FF80Computed

Frequently asked questions

What is the hex code for electric blue?

The hex code for electric blue is #7DF9FF. In RGB, that's 125 red, 249 green, and 255 blue. The approximate CMYK equivalent is 51% cyan, 2% magenta, 0% yellow, and 0% key (black).

Is electric blue a warm or cool color?

Electric Blue reads as cool. It settles naturally beside blues, greens, silver, and charcoal, and feels more animated when paired with warm accents like gold, coral, or rust.

Is electric blue better as an accent or a full-palette color?

Electric Blue is usually best when it leads in short bursts rather than covering everything. It can headline a palette, but most layouts work better when the color handles accents, highlights, or one main hero role instead of every surface.

How should I use electric blue in a design?

Electric Blue works as a soft background or supporting color for slide canvases, section panels, and marketing surfaces. Use dark text for readability and reserve stronger accents for buttons, charts, and key takeaways.

Can I use electric blue for text or backgrounds?

Electric Blue works better with dark text than white text. Black text reaches 16.87:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.

Last updated April 6, 2026

Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.