Palettes

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

Palettes come in two forms. Static palettes are raw color data — a map of hues to shades — that you namespace under the palette option and reference from your themes. Generator adapters take a single seed color and hand back a ready-made { palette, themes } pair by wrapping a third-party color algorithm.

Colors are wired up with token references: the '{palette.tw.blue.500}' string in the examples below points at a value in the palette map instead of hardcoding a hex, so one palette can back many theme roles. See Theming for how references resolve.

Use the explorer to browse the static palettes. Click any swatch to copy its token path, then Copy Config for a ready-to-paste createThemePlugin setup seeded with the swatches you clicked. Palettes with far more shades than hues, like Material, render with their axes flipped so the grid stays readable.

Static Palettes

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}',
        },
      },
    },
  })
)

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. The color libraries are optional peer dependencies — install the peer for the generator you import; without it, module resolution fails at load time.

Material

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

pnpm add @material/material-color-utilities

npm install @material/material-color-utilities

yarn add @material/material-color-utilities

bun add @material/material-color-utilities

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

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

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

Options (second argument):

Ant Design

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

pnpm add @ant-design/colors

npm install @ant-design/colors

yarn add @ant-design/colors

bun add @ant-design/colors

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

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

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

Options (second argument):

Leonardo

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

pnpm add @adobe/leonardo-contrast-colors

npm install @adobe/leonardo-contrast-colors

yarn add @adobe/leonardo-contrast-colors

bun add @adobe/leonardo-contrast-colors

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

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

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

Options (second argument):

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/palettes for building custom adapters that conform to the same { palette, themes } return shape.

import type { PaletteGenerator } from '@vuetify/v0/palettes'

const myGenerator: PaletteGenerator<{ variant?: 'vibrant' | 'muted' }> = (seed, options) => {
  // ... derive palette + themes from seed
  return { palette, themes }
}

FAQ