Tokyo Night Colours

A comprehensive reference guide for the Tokyo Night colour palette.

Background Colours

Hex Code	Preview	HSL	RGBA
`#1f2335`	Background Dark	`hsl(230, 23%, 16%)`	`rgba(31, 35, 53, 1)`
`#24283b`	Background	`hsl(232, 26%, 18%)`	`rgba(36, 40, 59, 1)`
`#292e42`	Selection Background	`hsl(232, 26%, 21%)`	`rgba(41, 46, 66, 1)`
`#3b4261`	Borders	`hsl(230, 27%, 31%)`	`rgba(59, 66, 97, 1)`

Text & UI Colours

Hex Code	Preview	HSL	RGBA
`#414868`	Comments/Inactive	`hsl(229, 20%, 36%)`	`rgba(65, 72, 104, 1)`
`#545c7e`	Subtle/Inactive	`hsl(229, 23%, 45%)`	`rgba(84, 92, 126, 1)`
`#565f89`	Line Numbers/Keywords	`hsl(235, 30%, 48%)`	`rgba(86, 95, 137, 1)`
`#737aa2`	Muted Text	`hsl(234, 28%, 62%)`	`rgba(115, 122, 162, 1)`
`#a9b1d6`	Secondary Text	`hsl(234, 44%, 79%)`	`rgba(169, 177, 214, 1)`
`#c0caf5`	Primary Text	`hsl(234, 71%, 86%)`	`rgba(192, 202, 245, 1)`

Blue Shades

Hex Code	Preview	HSL	RGBA
`#394b70`	Deep Blue	`hsl(219, 37%, 35%)`	`rgba(57, 75, 112, 1)`
`#3d59a1`	Royal Blue	`hsl(225, 48%, 47%)`	`rgba(61, 89, 161, 1)`
`#7aa2f7`	Bright Blue/Functions	`hsl(228, 87%, 71%)`	`rgba(122, 162, 247, 1)`
`#7dcfff`	Sky Blue/Parameters	`hsl(209, 100%, 77%)`	`rgba(125, 207, 255, 1)`

Accent Colours

Hex Code	Preview	HSL	RGBA
`#b4f9f8`	Cyan/Specials	`hsl(178, 92%, 85%)`	`rgba(180, 249, 248, 1)`
`#bb9af7`	Purple/Keywords	`hsl(261, 85%, 77%)`	`rgba(187, 154, 247, 1)`
`#9d7cd8`	Violet/Methods	`hsl(261, 60%, 69%)`	`rgba(157, 124, 216, 1)`
`#ff9e64`	Orange/Numbers	`hsl(29, 100%, 70%)`	`rgba(255, 158, 100, 1)`
`#ffc777`	Yellow/Constants	`hsl(40, 100%, 75%)`	`rgba(255, 199, 119, 1)`
`#c3e88d`	Green/Strings	`hsl(91, 70%, 75%)`	`rgba(195, 232, 141, 1)`

Teal & Red Variants

Hex Code	Preview	HSL	RGBA
`#4fd6be`	Teal/Operators	`hsl(171, 62%, 58%)`	`rgba(79, 214, 190, 1)`
`#41a6b5`	Steel Blue/Tags	`hsl(188, 48%, 49%)`	`rgba(65, 166, 181, 1)`
`#ff757f`	Pink/Errors	`hsl(356, 100%, 70%)`	`rgba(255, 117, 127, 1)`
`#c53b53`	Red/Deletions	`hsl(350, 59%, 51%)`	`rgba(197, 59, 83, 1)`

Common Usage Patterns

Base UI Elements

Background: #1f2335 (darkest) or #24283b (standard)
Selection/Hover: #292e42
Borders: #3b4261
Primary Text: #c0caf5
Secondary Text: #a9b1d6
Disabled Text: #565f89
Comments: #414868

Syntax Highlighting

Keywords:    #bb9af7 (purple)
Strings:     #c3e88d (green)
Numbers:     #ff9e64 (orange)
Functions:   #7aa2f7 (bright blue)
Constants:   #ffc777 (yellow)
Classes:     #7dcfff (sky blue)
Variables:   #c0caf5 (text colour)
Parameters:  #7dcfff (sky blue)
Operators:   #4fd6be (teal)
Tags:        #41a6b5 (steel blue)
Errors:      #ff757f (pink) or #c53b53 (red)

Recommended Colour Combinations

Dark Mode

Background: #1f2335
Text:       #c0caf5
Accent:     #7aa2f7

Standard Mode

Background: #24283b
Text:       #c0caf5
Accent:     #7aa2f7 or #bb9af7

Content Areas

Surface:    #292e42
Border:     #3b4261
Text:       #a9b1d6

Application Examples

The Tokyo Night theme works exceptionally well for:

Code editors (VSCode, Neovim)
Terminal emulators
Dark mode websites and applications
Dashboard interfaces
Documentation sites

This palette provides excellent contrast while reducing eye strain during extended usage periods. The colour combinations are designed to adhere to accessibility standards when used appropriately.