#0B132B
#3B487A
#5C7BA8
#6FFFE9
#1A1B26Ink
#4B5273Dusk
#7AA2F7Cornflower
#BB9AF7Wisteria
Tokyo Night is a analogous color palette tagged dark, tech, cold. Analogous neighbors on the wheel (Ink, Dusk, Cornflower) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Ink | #1A1B26 | rgb(26, 27, 38) | hsl(235, 19%, 13%) | oklch(22.6% 0.021 280) | |
| Dusk | #4B5273 | rgb(75, 82, 115) | hsl(229, 21%, 37%) | oklch(44.6% 0.055 275) | |
| Cornflower | #7AA2F7 | rgb(122, 162, 247) | hsl(221, 89%, 72%) | oklch(71.9% 0.132 264) | |
| Wisteria | #BB9AF7 | rgb(187, 154, 247) | hsl(261, 85%, 79%) | oklch(75.1% 0.134 299) |
Why it works and how to use it
With 4 chromatic colors, Cornflower takes the lead while the rest support. Lightness runs from 13% to 79%. Well suited to a SaaS landing page or dashboard.
- Background: Wisteria (#BB9AF7) is the lightest color, so it belongs on large surfaces.
- Text: Ink (#1A1B26) on #BB9AF7 gives 7.39:1, passing WCAG AAA.
- Primary: Cornflower (#7AA2F7) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Dusk (#4B5273) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Ink on Wisteria at 7.39:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Tokyo Night
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryCard title
Card title
Card title
Roles are assigned by lightness.
Color blindness simulation
#1A1B26
#4B5273
#7AA2F7
#BB9AF7
Color-blind check: under protanopia and deuteranopia, Cornflower and Wisteria become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#1A1B26 on #BB9AF7 | Aa | 7.39:1 | AAA |
#1A1B26 on #7AA2F7 | Aa | 6.79:1 | AA |
#4B5273 on #BB9AF7 | Aa | 3.3:1 | AA large only |
#4B5273 on #7AA2F7 | Aa | 3.03:1 | AA large only |
#1A1B26 on #4B5273 | Aa | 2.24:1 | Fail |
#7AA2F7 on #BB9AF7 | Aa | 1.09:1 | Fail |
Similar palettes 24 more in this mood
#121016
#54149C
#693B79
#5B9FFF
#D8BFFF
#B37BF7
#7B31BA
#240042
#3B1752
#793EA4
#C493DF
#F1EFFC
#450B57
#7A1B8A
#764FA1
#8DA5FE
#15255F
#3456B9
#8EA5F6
#F1EFFC
#1A1B26
#574E70
#9D97F3
#D591E2
#0B2447
#3B5C9E
#6E86D6
#A5D7E8
#06060F
#333958
#668DE0
#A584DF
#10002B
#5A189A
#9D4EDD
#E0AAFF
#0D1B2A
#3C5374
#5A7A9E
#E0E1DD
#03256C
#2541B2
#1768AC
#06BEE1
#2A1E5C
#5A4BB5
#A99CF0
#F1EFFC
#1C2541
#465D79
#5BC0BE
#FFFFFF
#14101F
#4D4365
#8E6BFF
#EEE9FF
#0A1024
#3A456B
#5C7CFA
#DDE3FF
#0F172A
#444F64
#6366F1
#F8FAFC
#10002B
#7B2CBF
#E0AAFF
#00F5D4
#E0EFFF
#6EB2FC
#1E5B9A
#002344
#2C003C
#793DA1
#BA63CA
#F0D5FF
#0B0620
#412676
#9D4EDD
#FFB3E6
#1F1E27
#53516D
#BFADFF
#FAF9FF
#003439
#006857
#55709F
#008FC2
#00304E
#00538D
#006F94
#00C2C8