Back to palettes

Palette

Sapphire City Lights

The dazzling and deep tones of a metropolis illuminated by electric blue and violet lights.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sapphire City Lights reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Sapphire City Lights.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#2C3E50#3498DB#2980B9#8E44AD#9B59B6

Palette guide

How to use Sapphire City Lights

Overview

This palette, Sapphire City Lights, captures the energetic essence of a nocturnal urban landscape. It blends deep, sophisticated blues like #2C3E50 and #2980B9 with vibrant, electric accents such as #3498DB. The unexpected inclusion of rich purples, #8E44AD and #9B59B6, adds a dynamic, almost neon glow, reminiscent of city lights reflecting on wet streets. Ideal for projects demanding a modern, bold, and slightly mysterious aesthetic, it offers a versatile range for creating impactful visual narratives. Designers and developers can leverage its depth for backgrounds and its brighter hues for compelling calls to action.

Best used for

  • Modern tech company branding
  • Event promotions (nightlife, concerts)
  • UI/UX for urban-themed apps or games
  • Fashion or luxury product websites
  • Digital art and illustration
  • Dynamic presentation slides

Suggested color roles

primary

Use #2C3E50 (Deep Blue-Gray) as a solid, grounding primary for large sections, providing a sophisticated and stable base, perfect for headers or main content areas.

secondary

Employ #3498DB (Vibrant Blue) to add energy and draw attention. Excellent for buttons, interactive elements, or key visual highlights.

accent

Apply #8E44AD (Deep Violet) as a rich, intriguing accent for subtle details, hover states, or to introduce a touch of luxury and mystery.

background

Utilize #2C3E50 (Deep Blue-Gray) as a dark, immersive background that allows brighter colors to pop, creating a modern and elegant feel.

text

For dark backgrounds like #2C3E50, use light text (e.g., pure white or a very light gray). For lighter elements like #3498DB, use dark text (e.g., charcoal or black) for readability.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using #3498DB or #9B59B6 for text on a darker background.
  • Test #8E44AD against both dark and light backgrounds; it might struggle with readability on mid-tone hues.
  • Pair #2C3E50 with a light text color (e.g., white) for WCAG AA compliance.
  • Avoid using #9B59B6 and #8E44AD as primary text colors unless on very high contrast backgrounds.

Recommended combinations

Urban Glow

A high-contrast trio for energetic branding, combining a dark base with vibrant blue and purple accents.

#2C3E50 · #3498DB · #9B59B6

Night Skyline

Creates a sophisticated, deep urban feel, suitable for elegant interfaces or nocturnal themes.

#2C3E50 · #2980B9 · #8E44AD

Electric Pulse

A bold, eye-catching combination perfect for calls to action or dynamic graphic elements, grounded by the deep blue.

#3498DB · #9B59B6 · #2C3E50

CSS variables

:root {
  --sapphire-city-lights-1: #2C3E50;
  --sapphire-city-lights-2: #3498DB;
  --sapphire-city-lights-3: #2980B9;
  --sapphire-city-lights-4: #8E44AD;
  --sapphire-city-lights-5: #9B59B6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-city-lights": {
        1: "#2C3E50",
        2: "#3498DB",
        3: "#2980B9",
        4: "#8E44AD",
        5: "#9B59B6",
      }
    }
  }
}

Related searches

electric blue purple paletteurban night color schemevibrant city colorsmodern dark UI paletteenergetic blue violet design

Palette colors

Hex values

Color 1#2C3E50
·
Color 2#3498DB
·
Color 3#2980B9
·
Color 4#8E44AD
·
Color 5#9B59B6
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.5:1AA18
2.6:1Fail
1.9:1Fail
2.4:1Fail
2
3.5:1AA18
1.4:1Fail
1.9:1Fail
1.5:1Fail
3
2.6:1Fail
1.4:1Fail
1.4:1Fail
1.1:1Fail
4
1.9:1Fail
1.9:1Fail
1.4:1Fail
1.3:1Fail
5
2.4:1Fail
1.5:1Fail
1.1:1Fail
1.3:1Fail

Similar palettes

More like Sapphire City Lights

View all vibrant
Cybernetic Voltage Surge
Neon Alley Surge
Urban Sprawl Neon
Abstract City Lights
Aurora Borealis
Aurora Sky Shimmer