Complete Color Palette Reference

Shades of Purple uses a carefully selected palette optimized for contrast and readability. Use this reference when creating matching assets, ports, or customizations.

Core Color Palette

These are the hand-picked colors that make up the Shades of Purple theme:

Usage	Hex Code	RGB
Background	`#2D2B55`	rgb(45, 43, 85)
Background Dark	`#1E1E3F`	rgb(30, 30, 63)
Foreground	`#A599E9`	rgb(165, 153, 233)
Hover Background	`#4D21FC`	rgb(77, 33, 252)
Contrast	`#FAD000`	rgb(250, 208, 0)
Contrast Lite	`#FFEE80`	rgb(255, 238, 128)
Contrast Lite II	`#FAEFA5`	rgb(250, 239, 165)
Highlight	`#FF7200`	rgb(255, 114, 0)
Comment	`#B362FF`	rgb(179, 98, 255)
Constants	`#FF628C`	rgb(255, 98, 140)
Keywords	`#FF9D00`	rgb(255, 157, 0)
Other	`#9EFFFF`	rgb(158, 255, 255)
Strings	`#A5FF90`	rgb(165, 255, 144)
Templates	`#3AD900`	rgb(58, 217, 0)
Definitions	`#FB94FF`	rgb(251, 148, 255)
Invalid	`#EC3A37F5`	rgb(236, 58, 55)
Diff Added	`#00FF009A`	rgb(0, 255, 0, 0.6)
Diff Removed	`#FF000D81`	rgb(255, 0, 13, 0.5)

Color Usage Examples

Background Colors

Background (`#2D2B55`)

The main editor background color. Used for:

Editor canvas
Active tabs
Selected list items

Background Dark (`#1E1E3F`)

A darker shade for contrast. Used for:

Sidebar backgrounds
Panel backgrounds (terminal, output, debug console)
Status bar
Dropdown menus
Inactive tabs

"editor.background": "#2D2B55",
"sideBar.background": "#222244",
"panel.background": "#1E1E3F",
"statusBar.background": "#1E1E3F"

Foreground & Text Colors

Foreground (`#A599E9`)

The primary text color. Used for:

Sidebar text
Menu items
Settings labels
Line numbers

White (`#FFFFFF`)

Bright white for high contrast. Used for:

Active editor text
Active tab text
Selected item text

"editor.foreground": "#FFFFFF",
"editorLineNumber.foreground": "#A599E9",
"sideBar.foreground": "#A599E9"

Syntax Highlighting Colors

Keywords (`#FF9D00`)

Orange for programming keywords:

// Keywords in orange
const function = async () => {
  return await fetch();
}

Strings (`#A5FF90`)

Light green for string literals:

const message = "Hello World"; // Green string

Template Strings (`#3AD900`)

Darker green for template literals:

const template = `Value: ${value}`; // Dark green

Comments (`#B362FF`)

Purple for comments:

// This comment is purple
/* Multi-line comments too */

Constants (`#FF628C`)

Pink for constants and numbers:

const PI = 3.14159; // Pink constant and number

Definitions (`#FB94FF`)

Light purple for function/class definitions:

function myFunction() { } // "function" keyword
class MyClass { } // "this", "super"

UI Accent Colors

Contrast/Accent (`#FAD000`)

Yellow for important UI elements:

Cursor color
Active borders
Panel title borders
Progress bars
Badges

Hover Background (`#4D21FC`)

Bright purple for hover states:

Scrollbar hover
Button hover
Status bar item hover

Highlight (`#FF7200`)

Orange for search matches and highlights:

Current search match
Git conflict markers

"editorCursor.foreground": "#FAD000",
"tab.activeBorder": "#FAD000",
"scrollbarSlider.hoverBackground": "#4D21FC",
"editor.findMatchBackground": "#ff7300ab"

Git & Diff Colors

Added (`#00FF009A`)

Green for added lines:

+ Added line in git diff

Removed (`#FF000D81`)

Red for deleted lines:

- Removed line in git diff

Modified (`#FAD000`)

Yellow for modified files:

Modified file icon in explorer
Modified indicator in gutter

"gitDecoration.modifiedResourceForeground": "#FAD000",
"gitDecoration.deletedResourceForeground": "#EC3A37F5",
"gitDecoration.untrackedResourceForeground": "#3AD900"

Status Colors

Error (`#EC3A37F5`)

Red for errors and problems:

Error squiggles
Error icons
Deleted git resources

Warning (`#FAD000`)

Yellow for warnings:

Warning squiggles
Warning icons

Info (`#9EFFFF`)

Cyan for information:

Info icons
Hints

"editorError.foreground": "#EC3A37F5",
"editorWarning.foreground": "#FAD000"

Terminal Colors (ANSI)

Shades of Purple includes a complete ANSI color palette for terminals:

Color	Normal	Bright	Hex Normal	Hex Bright
Black	Black	Bright Black	`#000000`	`#5C5C61`
Red	Red	Bright Red	`#EC3A37F5`	`#EC3A37F5`
Green	Green	Bright Green	`#3AD900`	`#3AD900`
Yellow	Yellow	Bright Yellow	`#FAD000`	`#FAD000`
Blue	Blue	Bright Blue	`#7857fe`	`#6943FF`
Magenta	Magenta	Bright Magenta	`#FF2C70`	`#FB94FF`
Cyan	Cyan	Bright Cyan	`#80FCFF`	`#80FCFF`
White	White	Bright White	`#FFFFFF`	`#FFFFFF`

These terminal colors are used in the integrated VSCode terminal and can be applied to external terminals like iTerm2, Hyper, and Alacritty.

Using the Color Palette

Creating a Port

Use these exact hex codes when porting Shades of Purple to a new platform for consistency.

Custom Assets

Match your screenshots, diagrams, and presentations to these colors.

Documentation Sites

Use the syntax highlighting colors for code blocks on your website.

Extensions

Configure third-party extensions with these colors for a cohesive look.

Color Contrast & Accessibility

The Shades of Purple palette is designed with readability in mind:

High contrast between background (#2D2B55) and text (#FFFFFF) ensures comfortable reading
Color differentiation makes syntax elements easily distinguishable
Strategic use of brightness helps important elements stand out
Consistent color roles across all ports maintains familiarity

When modifying these colors, ensure sufficient contrast ratios for accessibility. The theme achieves WCAG AA compliance for most text elements.

Export Formats

JSON Color Theme Export

You can find the complete color definitions in the theme JSON file:

{
  "colors": {
    "editor.background": "#2D2B55",
    "editor.foreground": "#FFFFFF",
    "activityBar.background": "#28284E",
    // ... 100+ more color definitions
  }
}

View the complete theme JSON on GitHub.

CSS Variables Export

For web projects, you can use CSS custom properties:

:root {
  --sop-background: #2D2B55;
  --sop-background-dark: #1E1E3F;
  --sop-foreground: #A599E9;
  --sop-contrast: #FAD000;
  --sop-keywords: #FF9D00;
  --sop-strings: #A5FF90;
  --sop-comments: #B362FF;
  --sop-constants: #FF628C;
}

SCSS Variables Export

For SCSS projects:

$sop-background: #2D2B55;
$sop-background-dark: #1E1E3F;
$sop-foreground: #A599E9;
$sop-contrast: #FAD000;
$sop-keywords: #FF9D00;
$sop-strings: #A5FF90;
$sop-comments: #B362FF;
$sop-constants: #FF628C;

Theme Ports

See how these colors are used across different platforms

Extension Settings

Configure extensions with matching colors

GitHub Repository

View the complete theme source code

VSCode.pro Course

Master VSCode with this comprehensive course

Get Started

Theme Variants

Configuration

Guides

Support

Complete Color Palette Reference

Core Color Palette

Color Usage Examples

Background (`#2D2B55`)

Background Dark (`#1E1E3F`)

Foreground (`#A599E9`)

White (`#FFFFFF`)

Keywords (`#FF9D00`)

Strings (`#A5FF90`)

Template Strings (`#3AD900`)

Comments (`#B362FF`)

Constants (`#FF628C`)

Definitions (`#FB94FF`)

Contrast/Accent (`#FAD000`)

Hover Background (`#4D21FC`)

Highlight (`#FF7200`)

Added (`#00FF009A`)

Removed (`#FF000D81`)

Modified (`#FAD000`)

Error (`#EC3A37F5`)

Warning (`#FAD000`)

Info (`#9EFFFF`)

Terminal Colors (ANSI)

Using the Color Palette

Creating a Port

Custom Assets

Documentation Sites

Extensions

Color Contrast & Accessibility

Export Formats

Theme Ports

Extension Settings

GitHub Repository

VSCode.pro Course

Build docs developers (and LLMs) love

Get Started

Theme Variants

Configuration

Guides

Support

​Core Color Palette

​Color Usage Examples

​Background (#2D2B55)

​Background Dark (#1E1E3F)

​Foreground (#A599E9)

​White (#FFFFFF)

​Keywords (#FF9D00)

​Strings (#A5FF90)

​Template Strings (#3AD900)

​Comments (#B362FF)

​Constants (#FF628C)

​Definitions (#FB94FF)

​Contrast/Accent (#FAD000)

​Hover Background (#4D21FC)

​Highlight (#FF7200)

​Added (#00FF009A)

​Removed (#FF000D81)

​Modified (#FAD000)

​Error (#EC3A37F5)

​Warning (#FAD000)

​Info (#9EFFFF)

​Terminal Colors (ANSI)

​Using the Color Palette

Creating a Port

Custom Assets

Documentation Sites

Extensions

​Color Contrast & Accessibility

​Export Formats

​Related Resources

Theme Ports

Extension Settings

GitHub Repository

VSCode.pro Course

Build docs developers (and LLMs) love

Core Color Palette

Color Usage Examples

Background (`#2D2B55`)

Background Dark (`#1E1E3F`)

Foreground (`#A599E9`)

White (`#FFFFFF`)

Keywords (`#FF9D00`)

Strings (`#A5FF90`)

Template Strings (`#3AD900`)

Comments (`#B362FF`)

Constants (`#FF628C`)

Definitions (`#FB94FF`)

Contrast/Accent (`#FAD000`)

Hover Background (`#4D21FC`)

Highlight (`#FF7200`)

Added (`#00FF009A`)

Removed (`#FF000D81`)

Modified (`#FAD000`)

Error (`#EC3A37F5`)

Warning (`#FAD000`)

Info (`#9EFFFF`)

Terminal Colors (ANSI)

Using the Color Palette

Color Contrast & Accessibility

Export Formats

Related Resources