Palette

Cyber City

Cool, deep blues and purples, reflecting the sleek, illuminated architecture of a futuristic cyber city.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cyber City 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 Cyber City.

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

Data visualization

#0F1E3D#1C3660#4B6CB7#8A9FDC#C4D0EB

Palette guide

How to use Cyber City

Overview

The Cyber City palette presents a sophisticated range of cool, deep blues and lighter counterparts, reflecting the sleek, illuminated architecture of a futuristic metropolis. From the profound #0F1E3D to the ethereal #C4D0EB, this palette offers a harmonious gradient. #1C3660 provides a solid darker blue, while #4B6CB7 and #8A9FDC introduce progressively lighter, yet still cool, tones. Designers can use these hex codes to craft elegant, modern interfaces, corporate branding with a tech edge, or serene yet innovative digital experiences. Developers will find this palette excellent for creating structured, readable, and visually appealing user interfaces.

Best used for

Corporate tech branding and websites
Modern business presentations
Clean UI/UX designs for productivity apps
Architectural visualizations or urban planning concepts
Professional scientific data displays
Sleek and minimalist digital art

Suggested color roles

primary

#4B6CB7 - A balanced, mid-tone blue that can serve as a strong primary color for branding and major content blocks.

secondary

#1C3660 - A deeper, more substantial blue, suitable for supporting content, navigation, or background sections that need gravitas.

accent

#8A9FDC - A lighter, more vibrant blue, perfect for subtle highlights, interactive elements, or outlining key information.

background

#0F1E3D - A very dark, almost black-blue that provides a deep, professional, and calming base for content.

text

#C4D0EB - A very light, cool blue, offering excellent readability for headings and body text against the darkest backgrounds like #0F1E3D.

Accessibility notes

Ensure sufficient contrast between lighter shades like #C4D0EB and darker backgrounds such as #0F1E3D for text.
Avoid using #1C3660 and #0F1E3D for small text or icons in close proximity due to their low contrast.
The palette is predominantly blue; consider alternative visual cues for color-blind users beyond hue.
Test text legibility on all background shades, especially for smaller font sizes, to ensure WCAG AA compliance.

Recommended combinations

Sleek Interface

A modern dark theme with clear hierarchy, using #C4D0EB for text and #4B6CB7 for interactive elements.

#0F1E3D · #4B6CB7 · #C4D0EB

Urban Horizon

Layered effects for backgrounds or data visualizations, suggesting depth and perspective.

#1C3660 · #8A9FDC · #4B6CB7

Digital Glow

Highlighting key information or creating subtle glowing effects against a dark, professional canvas.

#C4D0EB · #4B6CB7 · #0F1E3D

CSS variables

:root {
  --cyber-city-1: #0F1E3D;
  --cyber-city-2: #1C3660;
  --cyber-city-3: #4B6CB7;
  --cyber-city-4: #8A9FDC;
  --cyber-city-5: #C4D0EB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyber-city": {
        1: "#0F1E3D",
        2: "#1C3660",
        3: "#4B6CB7",
        4: "#8A9FDC",
        5: "#C4D0EB",
      }
    }
  }
}

Hex values

Color 1#0F1E3D

Color 2#1C3660

Color 3#4B6CB7

Color 4#8A9FDC

Color 5#C4D0EB

Accessibility

Contrast checker

1.4:1Fail

3.2:1AA18

6.3:1AA

10.7:1AAA

1.4:1Fail

2.4:1Fail

4.6:1AA

7.8:1AAA

3.2:1AA18

2.4:1Fail

2:1Fail

3.3:1AA18

6.3:1AA

4.6:1AA

2:1Fail

1.7:1Fail

10.7:1AAA

7.8:1AAA

3.3:1AA18

1.7:1Fail

Similar palettes

More like Cyber City

View all cool

Abyssal Current Glide