📜  vuetify 原色十六进制 (1)

📅  最后修改于: 2023-12-03 15:05:53.791000             🧑  作者: Mango

Vuetify 原色十六进制介绍

Vuetify 是一个流行的 Vue UI 库,它内置了许多漂亮的颜色主题供程序员使用。本文将介绍 Vuetify 原色的十六进制代码。

Vuetify 的原色

Vuetify 的原色共有 9 种,它们依次是:

  1. primary
  2. secondary
  3. accent
  4. error
  5. info
  6. success
  7. warning
  8. grey
  9. anchor

下面逐一介绍它们的十六进制代码和对应的颜色预览。

primary

主要原色,通常用于按钮、链接等需要突出展现的元素。

十六进制代码:#1976d2

颜色预览:

Primary
secondary

次要原色,通常作为主要原色的补充。

十六进制代码:#424242

颜色预览:

Secondary
accent

强调原色,通常用于需要强调的元素。

十六进制代码:#82B1FF

颜色预览:

Accent
error

错误原色,通常用于提示用户存在错误的情况。

十六进制代码:#FF5252

颜色预览:

Error
info

信息原色,通常用于提示用户一些信息或提示。

十六进制代码:#2196F3

颜色预览:

Info
success

成功原色,通常用于提示用户某个操作已成功执行。

十六进制代码:#4CAF50

颜色预览:

Success
warning

警告原色,通常用于提示用户存在一些风险或可能的问题。

十六进制代码:#FFC107

颜色预览:

Warning
grey

灰色系列原色,包括:grey, grey darken-1grey darken-4, grey lighten-1grey lighten-5

主要用于整体背景、边框等。

十六进制代码:

  • grey:#9E9E9E
  • grey darken-1:#757575
  • grey darken-2:#616161
  • grey darken-3:#424242
  • grey darken-4:#212121
  • grey lighten-1:#BDBDBD
  • grey lighten-2:#E0E0E0
  • grey lighten-3:#EEEEEE
  • grey lighten-4:#F5F5F5
  • grey lighten-5:#FAFAFA

颜色预览:

Grey
Grey Darken-1
Grey Darken-2
Grey Darken-3
Grey Darken-4
Grey Lighten-1
Grey Lighten-2
Grey Lighten-3
Grey Lighten-4
Grey Lighten-5
anchor

锚点原色,通常用于链接的颜色。

十六进制代码:#FFFFFF

颜色预览:

Anchor
总结

以上是 Vuetify 的原色介绍,程序员可以根据需求使用不同的颜色主题,让自己的应用更加美观。