ColorPaletteXYZ Logo
ColorPaletteXYZ
Palettes/Aesthetic· Curated

Tokyo Neon Dusk

Vibrant cityscape palette capturing Tokyo's twilight skyline and luminous neon billboards.

#Aesthetic#Creative#Neon#Sunset#Vibrant
Open in Generator
COLOR 1
#0F172A
Slate 900
COLOR 2
#38BDF8
Deep Sky Blue
COLOR 3
#818CF8
Blueberry
COLOR 4
#F43F5E
Rose 500
COLOR 5
#FDE047
Kihada Yellow

Suitable Design Applications

Urban Streetwear BrandsElectronic Music LabelsGaming Hardware PortalsNightlife Event Guides

Visual Psychology & Mood

Electric nightlife, metropolitan kinetic energy, and youth culture.

Editorial Application Advice

Vivid Shibuya-inspired magenta and electric cobalt shimmering across rain-slicked asphalt charcoal.

Recommended UI Role Architecture

Optimal visual hierarchy assignment for digital product interfaces:

Primary Canvas Background
#090A0F
Card & Elevated Surface
#131622
Primary Brand CTA Accent
#F43F5E
Secondary Accent & Focus
#3B82F6
Typography & Headings
#F1F5F9

Color Values & Codes

HEX · RGB · HSL
Slate 900
#0F172A
rgb(15, 23, 42)hsl(222, 47%, 11%)Color details →
rgb(56, 189, 248)hsl(198, 93%, 60%)Color details →
Blueberry
#818CF8
rgb(129, 140, 248)hsl(234, 89%, 74%)Color details →
Rose 500
#F43F5E
rgb(244, 63, 94)hsl(350, 89%, 60%)Color details →
rgb(253, 224, 71)hsl(50, 98%, 64%)Color details →

Open In Design Tools

Palette Generator
Lock & shuffle colors
Contrast Checker
Test WCAG compliance
Shades & Tints
Generate tonal steps
Aesthetic Palettes
Explore category schemes

CSS Variables

Copy & paste directly into your stylesheet
:root {
  --color-1: #0F172A;
  --color-2: #38BDF8;
  --color-3: #818CF8;
  --color-4: #F43F5E;
  --color-5: #FDE047;
}

Role-Based WCAG Contrast Audit

Accessibility contrast depends on assigned UI roles. Here are the contrast ratios and WCAG compliance ratings when pairing palette colors as Foreground Text against Background surfaces:

Sample Text
#0F172A on #F43F5E4.86:1
Normal Text AA Pass
Sample Text
#0F172A on #FDE04713.54:1
Normal Text AA Pass
Sample Text
#38BDF8 on #F43F5E1.71:1
Large Text Only (Fail)
Sample Text
#38BDF8 on #FDE0471.63:1
Large Text Only (Fail)
Sample Text
#818CF8 on #F43F5E1.23:1
Large Text Only (Fail)
Sample Text
#818CF8 on #FDE0472.26:1
Large Text Only (Fail)

Related Palettes in Aesthetic

Explore Aesthetic
#2B0938Copy
#6A0572Copy
#AB2E64Copy
#D85A52Copy
#F9A03FCopy
cp-featured-02Sunset
Malibu Dusk Glow
SunsetGradientCreative
#050505Copy
#00FF66Copy
#00F0FFCopy
#FF0055Copy
#FFE600Copy
cp-featured-04Gaming
Cyber Glitch Protocol
GamingFuturisticNeon
#180F33Copy
#491F79Copy
#7C3AEDCopy
#A78BFACopy
#F5F3FFCopy
cp-featured-05App UI
Fluid iOS Violet
App UICreative
#FFFFFFCopy
#F4F4F5Copy
#A1A1AACopy
#27272ACopy
#E11D48Copy
cp-featured-07Minimal
Swiss Editorial Clean
MinimalCreativeBold

Frequently Asked Questions About Tokyo Neon Dusk

Production design guidance and accessibility rules for applying the Tokyo Neon Dusk (Aesthetic) color palette.

What is the recommended role hierarchy for the Tokyo Neon Dusk palette?
In digital interface design, allocate #0F172A and #FDE047 for structural surface canvas and typography hierarchy (the 60% and 30% layers of the design), while using standout swatches like #38BDF8 or #818CF8 as your 10% primary action accent for buttons, badges, and interactive highlights.
Are the colors in Tokyo Neon Dusk WCAG accessible for web body copy?
Always verify contrast ratios against WCAG 2.2 AA standards (minimum 4.5:1 for regular body copy and 3.0:1 for large text or graphical controls). Consult the Role-Based WCAG Contrast Audit section above to see exact scores for every foreground/background combination in this palette.
How can I export the Tokyo Neon Dusk palette to my frontend codebase?
You can copy CSS Custom Properties directly from the CSS Variables code block above, export Tailwind CSS configuration tokens, download a high-resolution PNG card, or open the entire palette inside the interactive Palette Generator to experiment with tints and harmonies.