Palettes

v0 ships pre-built color data from popular design systems and generator adapters that create complete themes from a single brand color.

Edit this page

Report a Bug

Copy Markdown

IntermediateMar 14, 2026

Browse Palettes

100

200

300

400

500

600

700

800

900

950

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Static Palettes

Import	Source	Hues	Shades
`@vuetify/v0/palettes/md1`	Material Design 1	16	50-900, A100-A700
`@vuetify/v0/palettes/md2`	Material Design 2	19	50-900, A100-A700
`@vuetify/v0/palettes/material`	Material Design 3	6 groups	tones 0-100
`@vuetify/v0/palettes/tailwind`	Tailwind CSS	22	50-950
`@vuetify/v0/palettes/radix`	Radix Colors	31	1-12
`@vuetify/v0/palettes/ant`	Ant Design	12	1-10

import { tailwind } from '@vuetify/v0/palettes/tailwind'

app.use(
  createThemePlugin({
    palette: { tw: tailwind },
    themes: {
      light: {
        colors: {
          primary: '{palette.tw.blue.500}',
          secondary: '{palette.tw.slate.600}',
          error: '{palette.tw.red.500}',
        },
      },
    },
  })
)

Tip

Static palettes are just data — they must be namespaced under a key in the palette option.

Generator Adapters

Generator adapters take a single brand color and produce a complete palette + themes object ready to pass to createThemePlugin. Each adapter wraps a third-party color algorithm.

Material

Uses Google’s @material/material-color-utilities to generate tonal palettes following the Material Design 3 color system.

pnpm

pnpm add @material/material-color-utilities

npm

npm install @material/material-color-utilities

yarn

yarn add @material/material-color-utilities

bun

bun add @material/material-color-utilities

import { material } from '@vuetify/v0/palettes/material/generate'

const { palette, themes } = material('#6750A4')

app.use(createThemePlugin({ palette, themes }))

The variant option controls how the seed color influences secondary and tertiary roles: tonalSpot (default), vibrant, expressive, fidelity, monochrome, neutral.

Ant Design

Uses @ant-design/colors to generate 10-shade ramps from a seed color.

pnpm

pnpm add @ant-design/colors

npm

npm install @ant-design/colors

yarn

yarn add @ant-design/colors

bun

bun add @ant-design/colors

import { ant } from '@vuetify/v0/palettes/ant/generate'

const { palette, themes } = ant('#1677ff')

app.use(createThemePlugin({ palette, themes }))

Leonardo

Uses Adobe’s @adobe/leonardo-contrast-colors to generate perceptually uniform ramps based on target contrast ratios against a background.

pnpm

pnpm add @adobe/leonardo-contrast-colors

npm

npm install @adobe/leonardo-contrast-colors

yarn

yarn add @adobe/leonardo-contrast-colors

bun

bun add @adobe/leonardo-contrast-colors

import { leonardo } from '@vuetify/v0/palettes/leonardo/generate'

const { palette, themes } = leonardo('#0ea5e9')

app.use(createThemePlugin({ palette, themes }))

Overriding Colors

Use mergeDeep to override specific colors from a generated theme:

import { mergeDeep } from '@vuetify/v0'
import { material } from '@vuetify/v0/palettes/material/generate'

const { palette, themes } = material('#6750A4', { variant: 'vibrant' })

app.use(
  createThemePlugin({
    palette,
    themes: mergeDeep(themes, {
      light: {
        colors: {
          error: '#B00020',
        },
      },
    }),
  })
)

Mixing Palettes

Combine generated palettes with static palette data by spreading them together:

import { mergeDeep } from '@vuetify/v0'
import { material } from '@vuetify/v0/palettes/material/generate'
import { tailwind } from '@vuetify/v0/palettes/tailwind'

const { palette: generated, themes } = material('#1B6EF3')

app.use(
  createThemePlugin({
    palette: { ...generated, tw: tailwind },
    themes: mergeDeep(themes, {
      light: {
        colors: {
          accent: '{palette.tw.amber.500}',
        },
      },
    }),
  })
)

Custom Adapters

The PaletteGenerator type is exported from @vuetify/v0 for building custom adapters that conform to the same { palette, themes } return shape.