Vue.js

Vue.js brand palette anchored on the two-tone pairing visible in the Vue chevron mark: Vue Green (#4FC08D) on top of a deeper navy (#35495E). The combination is the project's identity across vuejs.org, the Vue logo SVG, and the marketing surfaces. A supporting neutral set provides the page-level light and dark canvases.

10 swatches 14 light roles 14 dark roles vuejsvuejavascriptframeworkgreenopen-source

Swatches

vue-green
#4FC08D
Primary brand color — the lighter top chevron of the Vue mark and the project's identity green.
vue-green-dark
#42B883
Secondary brand green — the darker bottom chevron of the mark; also the hover state on Vue Green.
vue-navy
#35495E
Companion dark color — used as body text on light surfaces and as the dark-mode canvas anchor.
vue-navy-light
#476582
Lighter navy used for secondary text and dividers.
vue-black
#1A1A1A
Deep canvas for dark-mode page background.
vue-charcoal
#242424
Elevated dark surface.
vue-gray
#7E7E7E
Mid neutral.
vue-light-gray
#D5D5D5
Hairline borders.
vue-off-white
#F6F6F7
Subtle layered surface.
vue-white
#FFFFFF
Page canvas in light mode.

Mode role mappings

Light mode (14 roles)

accent → vue-navy
accent-hover → vue-navy-light
background → vue-white
error → vue-green-dark
primary → vue-green
primary-hover → vue-green-dark
success → vue-green
surface → vue-off-white
surface-elevated → vue-white
text-primary → vue-navy
text-secondary → vue-navy-light
text-tertiary → vue-gray
warning → vue-green-dark
warning-hover → vue-green

Dark mode (14 roles)

accent → vue-navy-light
accent-hover → vue-light-gray
background → vue-black
error → vue-green-dark
primary → vue-green
primary-hover → vue-green-dark
success → vue-green
surface → vue-charcoal
surface-elevated → vue-navy
text-primary → vue-white
text-secondary → vue-light-gray
text-tertiary → vue-gray
warning → vue-green-dark
warning-hover → vue-green

Provenance

Source
https://vuejs.org/
License
MIT
Attribution
Vue.js is MIT-licensed. The Vue chevron logo and word mark are copyright Yuxi (Evan) You and the Vue.js contributors. Brand colors documented here are the published Vue Green (#4FC08D) and Navy (#35495E) from the Vue.js logo SVG, verified against the simple-icons project.
Imported
2026-05-18
Notes
The Vue chevron mark layers a lighter green chevron over a darker green chevron — the two-tone is the brand. The dark navy (#35495E) appears in marketing material as the brand's body-text and dark-surface color.