Demo
Computed Colors
Material and Vuetify
primary
#6750a4
on-primary
#ffffff
primary-container
#e9ddff
on-primary-container
#22005d
secondary
#625b71
on-secondary
#ffffff
secondary-container
#e8def8
on-secondary-container
#1e192b
tertiary
#7e5260
on-tertiary
#ffffff
tertiary-container
#ffd9e3
on-tertiary-container
#31101d
background
#fffbff
on-background
#1c1b1e
surface
#f7f2f7
on-surface
#201f22
surface-variant
#e7e0eb
on-surface-variant
#49454e
surface-bright
#d8d2dd
on-surface-bright
#4d4a53
error
#ba1a1a
on-error
#ffffff
error-container
#ffdad6
on-error-container
#410002
success
#006e1c
on-success
#ffffff
success-container
#94f990
on-success-container
#002204
warn
#8f4e00
on-warn
#ffffff
warn-container
#ffdcc2
on-warn-container
#2e1500
info
#0061a4
on-info
#ffffff
info-container
#d1e4ff
on-info-container
#001d36
primary-darken-1
#4f378a
secondary-darken-1
#4a4458
Generated Vuetify Theme
{
light: {
dark: false,
colors: {
background: '#fffbff',
surface: '#f7f2f7',
'surface-bright': '#d8d2dd',
'surface-variant': '#e7e0eb',
'on-surface-variant': '#49454e',
primary: '#6750a4',
'primary-darken-1': '#4f378a',
secondary: '#625b71',
'secondary-darken-1': '#4a4458',
error: '#ba1a1a',
info: '#0061a4',
success: '#006e1c',
warning: '#FB8C00',
'on-primary': '#ffffff',
'primary-container': '#e9ddff',
'on-primary-container': '#22005d',
'on-secondary': '#ffffff',
'secondary-container': '#e8def8',
'on-secondary-container': '#1e192b',
tertiary: '#7e5260',
'on-tertiary': '#ffffff',
'tertiary-container': '#ffd9e3',
'on-tertiary-container': '#31101d',
'on-background': '#1c1b1e',
'on-surface': '#201f22',
'on-surface-bright': '#4d4a53',
'on-error': '#ffffff',
'error-container': '#ffdad6',
'on-error-container': '#410002',
'on-success': '#ffffff',
'success-container': '#94f990',
'on-success-container': '#002204',
warn: '#8f4e00',
'on-warn': '#ffffff',
'warn-container': '#ffdcc2',
'on-warn-container': '#2e1500',
'on-info': '#ffffff',
'info-container': '#d1e4ff',
'on-info-container': '#001d36',
},
variables: {
'border-color': '#000000',
'border-opacity': 0.12,
'high-emphasis-opacity': 0.87,
'medium-emphasis-opacity': 0.6,
'disabled-opacity': 0.38,
'idle-opacity': 0.04,
'hover-opacity': 0.04,
'focus-opacity': 0.12,
'selected-opacity': 0.08,
'activated-opacity': 0.12,
'pressed-opacity': 0.12,
'dragged-opacity': 0.08,
'theme-kbd': '#212529',
'theme-on-kbd': '#FFFFFF',
'theme-code': '#F5F5F5',
'theme-on-code': '#000000',
},
},
dark: {
dark: true,
colors: {
background: '#1c1b1e',
surface: '#272529',
'surface-bright': '#615d66',
'surface-variant': '#49454e',
'on-surface-variant': '#cac4cf',
primary: '#cfbcff',
'primary-darken-1': '#b69df8',
secondary: '#cbc2db',
'secondary-darken-1': '#b0a7c0',
error: '#ffb4ab',
info: '#9ecaff',
success: '#78dc77',
warning: '#FB8C00',
'on-primary': '#381e72',
'primary-container': '#4f378a',
'on-primary-container': '#e9ddff',
'on-secondary': '#332d41',
'secondary-container': '#4a4458',
'on-secondary-container': '#e8def8',
tertiary: '#efb8c8',
'on-tertiary': '#4a2532',
'tertiary-container': '#633b48',
'on-tertiary-container': '#ffd9e3',
'on-background': '#e6e1e6',
'on-surface': '#dbd6da',
'on-surface-bright': '#bcb7c1',
'on-error': '#690005',
'error-container': '#93000a',
'on-error-container': '#ffb4ab',
'on-success': '#00390a',
'success-container': '#005313',
'on-success-container': '#94f990',
warn: '#ffb77b',
'on-warn': '#4c2700',
'warn-container': '#6d3a00',
'on-warn-container': '#ffdcc2',
'on-info': '#003258',
'info-container': '#00497d',
'on-info-container': '#d1e4ff',
},
variables: {
'border-color': '#FFFFFF',
'border-opacity': 0.12,
'high-emphasis-opacity': 1,
'medium-emphasis-opacity': 0.7,
'disabled-opacity': 0.5,
'idle-opacity': 0.1,
'hover-opacity': 0.04,
'focus-opacity': 0.12,
'selected-opacity': 0.08,
'activated-opacity': 0.12,
'pressed-opacity': 0.16,
'dragged-opacity': 0.08,
'theme-kbd': '#212529',
'theme-on-kbd': '#FFFFFF',
'theme-code': '#343434',
'theme-on-code': '#CCCCCC',
},
},
}