Pantone Theme for VS Code
200 expertly crafted color themes inspired by iconic Pantone colors
100 Pantone colors • Dark + Light variants • Color theory palettes • WCAG AA accessible
Every theme is derived entirely from real Pantone color values.
No arbitrary hex codes — just pure, intentional color.
Features
Every Color Tells a Story
From Pantone's Color of the Year collection (2000–2025) to classic, neon, and nature-inspired hues — each theme is built from a genuine Pantone color, not a random hex value.
Color Theory, Not Guesswork
Each theme's palette is auto-generated using HSL color theory: analogous harmonies for related tones, complementary colors for contrast, and triadic accents for variety. Every syntax color is a real Pantone color picked from the catalog.
Dark and Light for Every Color
All 100 Pantone colors ship with both a dark and a light variant — 200 themes total. Switch freely based on your environment or mood.
Accessible by Design
Syntax colors are validated against their background using WCAG contrast ratio checks (4.5:1 minimum). Colors that fall below the threshold are automatically adjusted until they pass.
Bold and Italic Syntax Styling
Keywords are bold. Types and parameters are italic. Class names are bold italic. Comments are italic. These distinctions add a semantic layer on top of color, making code structure visible at a glance.
Zero Dependencies
Pure Node.js. No frameworks, no runtime dependencies. Just node src/build.js and you have 200 themes.
Pantone Colors of the Year
| Year |
Color |
Hex |
|
| 2025 |
Mocha Mousse |
#A47864 |
 |
| 2024 |
Peach Fuzz |
#FFBE98 |
 |
| 2023 |
Viva Magenta |
#BB2649 |
 |
| 2022 |
Very Peri |
#6667AB |
 |
| 2021 |
Illuminating |
#F5DF4D |
 |
| 2021 |
Ultimate Gray |
#939597 |
 |
| 2020 |
Classic Blue |
#0F4C81 |
 |
| 2019 |
Living Coral |
#FF6F61 |
 |
| 2018 |
Ultra Violet |
#5F4B8B |
 |
| 2017 |
Greenery |
#88B04B |
 |
| 2016 |
Rose Quartz |
#F7CAC9 |
 |
| 2016 |
Serenity |
#92A8D1 |
 |
| 2015 |
Marsala |
#955251 |
 |
| 2014 |
Radiant Orchid |
#B163A3 |
 |
| 2013 |
Emerald |
#009473 |
 |
| 2012 |
Tangerine Tango |
#DD4132 |
 |
| 2011 |
Honeysuckle |
#D94F70 |
 |
| 2010 |
Turquoise |
#45B5AA |
 |
| 2009 |
Mimosa |
#EFC050 |
 |
| 2008 |
Blue Iris |
#5A5B9F |
 |
| 2007 |
Chili Pepper |
#9B1B30 |
 |
| 2006 |
Sand Dollar |
#DECDBE |
 |
| 2005 |
Blue Turquoise |
#53B0AE |
 |
| 2004 |
Tigerlily |
#E2583E |
 |
| 2003 |
Aqua Sky |
#7BC4E2 |
 |
| 2002 |
True Red |
#BF1932 |
 |
| 2001 |
Fuchsia Rose |
#C74375 |
 |
| 2000 |
Cerulean |
#9BB7D4 |
 |
All 100 Colors
Click to expand the full color catalog
Classic Colors
| Color |
Hex |
|
| Classic Red |
#DA291C |
 |
| Royal Blue |
#003DA5 |
 |
| Green |
#78BE20 |
 |
| Yellow |
#FFC72C |
 |
| Orange |
#FE5000 |
 |
| Purple |
#5C068C |
 |
| Silver |
#8A8D8F |
 |
| Gold |
#84754E |
 |
| Process Blue |
#0085CA |
 |
| Warm Red |
#F9423A |
 |
Warm & Earthy Tones
| Color |
Hex |
|
| Saffron |
#FFAA4D |
 |
| Peach |
#F5A26F |
 |
| Khaki |
#B9A384 |
 |
| Flame Orange |
#FF7B43 |
 |
| Burnt Orange |
#FF6B00 |
 |
| Golden Yellow |
#E8AE4E |
 |
| Amber |
#D4A017 |
 |
| Salmon |
#F7A08B |
 |
| Coral |
#FF8272 |
 |
| Wheat |
#C5AC7D |
 |
| Tan |
#C9B99A |
 |
| Sand |
#D4C19C |
 |
| Warm Gray |
#D7D2CB |
 |
| Sienna |
#7A3B2E |
 |
| Chocolate |
#5C3317 |
 |
| Dark Brown |
#4C2A2B |
 |
Reds & Pinks
| Color |
Hex |
|
| Dark Red |
#9E1B32 |
 |
| Burgundy |
#9E1B2E |
 |
| Poppy |
#CE3732 |
 |
| Brick Red |
#A0342B |
 |
| Dark Maroon |
#7C2029 |
 |
| Ruby |
#7C1C32 |
 |
| Wine |
#8C3359 |
 |
| Mauve |
#7E4D61 |
 |
| Hot Pink |
#E83E6C |
 |
| Deep Pink |
#D4145A |
 |
| Blush Pink |
#F5B5C8 |
 |
| Blush |
#F3AEB0 |
 |
| Plum |
#5E2B4E |
 |
| Lilac |
#E8D4E2 |
 |
Blues
| Color |
Hex |
|
| Sky Blue |
#2C9FD9 |
 |
| Cornflower Blue |
#4D88E1 |
 |
| Cobalt Blue |
#1464A0 |
 |
| Indigo |
#1B368C |
 |
| Navy |
#1B2A6B |
 |
| Steel Blue |
#5B7B8D |
 |
| Dusty Blue |
#7BA0B4 |
 |
| Slate Blue |
#4A6FA5 |
 |
| Baby Blue |
#B0D7E1 |
 |
| Ice Blue |
#99D6EA |
 |
Greens & Teals
| Color |
Hex |
|
| Bright Green |
#00B140 |
 |
| Lime Green |
#97D700 |
 |
| Yellow Green |
#C8D800 |
 |
| Chartreuse |
#DDDD00 |
 |
| Forest Green |
#4E9A2F |
 |
| Olive Green |
#8A8D28 |
 |
| Sage |
#A3AF86 |
 |
| Mint Green |
#86D0BF |
 |
| Peacock Green |
#2E6F6B |
 |
| Turquoise Classic |
#00A499 |
 |
| Teal |
#006E7F |
 |
| Aqua |
#00B5CC |
 |
| Cyan |
#00B2C9 |
 |
Purples & Violets
| Color |
Hex |
|
| Lavender |
#9063CD |
 |
| Violet |
#9E4FA5 |
 |
Neutrals
| Color |
Hex |
|
| Pewter |
#9A9E9D |
 |
| Graphite |
#4E5358 |
 |
Neon Colors
| Color |
Hex |
|
| Neon Pink |
#FF3CA0 |
 |
| Neon Green |
#76FF7B |
 |
| Neon Orange |
#FF6B54 |
 |
| Neon Yellow |
#E8E835 |
 |
| Neon Blue |
#00B4E1 |
 |
How It Works
Each theme starts from a single Pantone color and builds a full editor palette using color relationships:
Primary Color (your chosen Pantone)
|
+-- Analogous (15-80° on the color wheel) ----> Types, Constants
+-- Wide Analogous (40-120°) ------------------> Class names
+-- Complementary (130-230°, opposite side) ---> Strings
+-- Triadic (80-150°) -------------------------> Additional accents
+-- Nearest Neutral (from Pantone neutrals) ---> Backgrounds, borders
The generator picks real Pantone colors from the catalog for each role — not synthetic computed colors. It enforces a minimum 20° hue separation between picks to ensure visual distinction.
For dark themes, the background is derived by darkening the primary (75–88%, adaptive to brightness). For light themes, the background blends the nearest neutral with the primary at 10% and lightens to 94%.
All syntax foreground colors are contrast-checked against the background and iteratively adjusted until they meet a 4.5:1 contrast ratio (WCAG AA).
Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X / Cmd+Shift+X)
- Search for "Pantone Theme"
- Click Install
From the Command Line
code --install-extension AndlzEngineering.pantone-theme
From Source
git clone https://github.com/and-lz/pantone-vscode-themes.git
cd pantone-vscode-themes
npm run build
Then symlink or copy the folder to your VS Code extensions directory:
# macOS / Linux
ln -s "$(pwd)" ~/.vscode/extensions/pantone-theme
# Windows (PowerShell, run as admin)
New-Item -ItemType SymbolicLink -Path "$env:USERPROFILE\.vscode\extensions\pantone-theme" -Target "$(Get-Location)"
Reload VS Code and you're ready to go.
Selecting a Theme
- Press
Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS)
- Type Preferences: Color Theme
- Search for any "Pantone" theme
All themes follow the naming pattern:
Pantone [Color Name] (Dark)
Pantone [Color Name] (Light)
Tip: Type "Pantone Neon" or "Pantone Mocha" to filter by color family.
Building from Source
git clone https://github.com/and-lz/pantone-vscode-themes.git
cd pantone-vscode-themes
npm run build
This runs node src/build.js, which:
- Reads the catalog of 100 Pantone colors from
src/catalog.js
- Generates a color palette for each using HSL color theory
- Builds dark and light workbench colors from templates
- Creates syntax token colors with bold/italic styling
- Validates WCAG contrast ratios and auto-adjusts failing colors
- Writes 200 theme JSON files to
themes/
- Updates
package.json with all theme entries
No dependencies required — the project uses only Node.js built-in modules.
Project Structure
pantone-vscode-themes/
src/
catalog.js # 100 Pantone colors with names, codes, and hex values
palette-generator.js # HSL color theory: analogous, complementary, triadic
build.js # Main generator — builds 200 themes, updates package.json
utils/
color.js # Color math: hex/RGB/HSL, contrast, darken, lighten, mix
templates/
token-colors.js # TextMate scopes with bold/italic font styles
workbench-dark.js # Dark UI: editor, sidebar, terminal, git decorations
workbench-light.js # Light UI: same scope, light-optimized palette
themes/ # 200 generated JSON theme files (git-tracked)
package.json # VS Code extension manifest
Contributing
Contributions are welcome! Here are some ways to help:
- Add a Pantone color — add an entry to
src/catalog.js with name, code, and hex, then run npm run build
- Improve palette generation — tweak hue ranges or selection logic in
src/palette-generator.js
- Refine UI colors — edit
src/templates/workbench-dark.js or workbench-light.js
- Add syntax scopes — expand
src/templates/token-colors.js with new language scopes
- Report issues — open an issue if a theme has contrast problems or looks off
Please open an issue before submitting large changes so we can discuss the approach.
License
This project is licensed under the MIT License.
