色彩

QQ色彩体系是年轻充满活力的,整体的色彩让视觉感受到轻松愉悦,同时遵循着Q语言的设计原则。通过色彩的性质的表现力能让交互层级更加的分明,并且让用户拥有更多个性化的想象空间。

定义|用法

主色调

通过提高主色调的明度和饱和度使得色彩更加的活力灵动,调动轻松愉悦情绪。既能确保阅读性,也能代表青春活力生机。

使用原则

层级:通过主色调来突出引导性的控件和图标,从而强化产品的品牌感。
易读:文本和重要元素(如图标)在彩色背景上,应符合易读性的标准。
表现:通过色相在使用场景上的表现,从而影响用户的情绪和感受。

纯色

十二色环里结合使用场景去除两个阅读性较差的色相,选取出十款充满生机和赋有想象力的颜色。

渐变色

每一个颜色对应的渐变色,轻质感打造亲和自然的精致品质,多用于图标和业务logo在QQ界面上的呈现。

示例:独立入口的功能图标,同时满足业务方品牌表现。

品牌色

Token Role Value
@color_bubble_host 品牌蓝色/仅用于气泡 00CAFC
#00CAFC
@color_brand_standard UI主题色 00CAFC
#00CAFC
@color_brand_gradient 仅用于主页面顶部导航 02D8FC→1FA5FF
#02D8FC,#1FA5FF

图标色

Token Role Value
@color_icon_general_01 白色背景上的图标/文字 03081A
#03081A
@color_icon_general_02 图标/文字 989EB4
#989EB4
@color_icon_general_03 小图标/文字 B0B3BF
#B0B3BF
@color_icon_general_04 深色背景上的图标/文字 FFFFFF
#FFFFFF
@color_palette_solid_blue 主题色/标签/图标选中态 00CAFC
#00CAFC
@color_palette_solid_cyan 图标/标签 21D9C6
#21D9C6
@color_palette_solid_red 表示警惕的图标/标签 FF596A
#FF596A

背景色

Token Role Value
@color_bg_general_01 黑色背景 03081A
#03081A
@color_bg_general_02 白色通用背景色 FFFFFF
#FFFFFF
@color_bg_general_03 灰色通用背景色 F5F6FA
#F5F6FA
@color_icon_general_04 仅用于聊天背景 EBEDF5
#EBEDF5
@color_icon_general_05 顶部导航栏:透明 FFFFFF Alpha 0%
#
@color_bg_general_06 顶部导航栏:主题色 00CAFC
#00CAFC
@color_icon_general_07 顶部导航栏:毛玻璃效果 EBEDF5 Alpha 70%
#F1F2F8

按钮色

Token Role Value
@color_btn_primary_default 主要按钮_默认态 00CAFC
#00CAFC
@color_btn_primary_pressed 主要按钮_按下态 00B5E2
#00B5E2
@color_btn_primary_disable 主要按钮_不可点击 B2EFFE
#B2EFFE
Token Role Value
@color_btn_secondary_default 辅助按钮_默认态 EBEDF5
#EBEDF5
@color_btn_secondary_pressed 辅助按钮_按下态 D4D6DC
#D4D6DC
@color_btn_secondary_disable 辅助按钮_不可点击 EBEDF5
#EBEDF5
Token Role Value
@color_btn_darkbg_default 深色背景按钮_默认态 FFFFFF
#FFFFFF
@color_btn_darkbg_pressed 深色背景按钮_按下态 EBEDF5
#EBEDF5
@color_btn_darkbg_disable 深色背景按钮_不可点击 FFFFFF
#FFFFFF
Token Role Value
@color_btn_qzonevip_default 黄钻按钮_默认态 FFCC00
#FFCC00
@color_btn_qzonevip_pressed 黄钻按钮_按下态 FFC200
#FFC200
@color_btn_qzonevip_disable 黄钻按钮_不可点击 FFF0B2
#FFF0B2
Token Role Value
@color_btn_warning_default 警示按钮_默认态 FFFFFF
#FFFFFF
@color_btn_warning_pressed 警示按钮_按下态 EBEDF5
#EBEDF5
@color_btn_warning_disable 警示按钮_不可点击 FFFFFF
#FFFFFF

气泡色

Token Role Value
@color_bubble_host 品牌蓝色/主人态气泡 00CAFC
#00CAFC
@color_bubble_guest 客人态气泡 FFFFFF
#FFFFFF

纯色

Token Role Value
@color_icon_general_01 白色背景上的图标/文字 03081A
#03081A
@color_icon_general_02 图标/文字 989EB4
#989EB4
@color_icon_general_03 小图标/文字 B0B3BF
#B0B3BF
@color_icon_general_04 深色背景上的图标/文字 FFFFFF
#FFFFFF
@color_palette_solid_darkblue 图标/标签/文字链接色 4D94FF
#4D94FF
@color_palette_solid_blue 主题色/标签/图标选中态 00CAFC
#00CAFC
@color_palette_solid_cyan 图标/标签 21D9C6
#21D9C6
@color_palette_solid_green 图标/标签 00D96D
#00D96D
@color_palette_solid_yellow 图标/标签 FFCC00
#FFCC00
@color_palette_solid_orange 图标/标签 FF9F40
#FF9F40
@color_palette_solid_red 表示警惕的图标/标签 FF596A
#FF596A
@color_palette_solid_pink 图标/标签 FF80CC
#FF80CC
@color_palette_solid_purple 图标/标签 C773FF
#C773FF
@color_palette_solid_indigo 图标/标签 8173FF
#8173FF