当前位置：首页 > news >正文

QT之QSS常用颜色总结

news 2025/8/23 6:15:43

基础颜色

黑白灰色系

/* 纯色 */
white: #ffffff;      /* 纯白 */
black: #000000;      /* 纯黑 *//* 灰色系 */
grey: #808080;       /* 标准灰 */
lightgrey: #d3d3d3;  /* 浅灰 */
darkgrey: #a9a9a9;   /* 深灰 */
silver: #c0c0c0;     /* 银灰 */
gainsboro: #dcdcdc;  /* 亮灰 */
whitesmoke: #f5f5f5; /* 烟白 */

标准颜色

/* 红色系 */
red: #ff0000;        /* 纯红 */
crimson: #dc143c;    /* 深红 */
firebrick: #b22222;  /* 砖红 */
indianred: #cd5c5c;  /* 印度红 *//* 绿色系 */
green: #008000;      /* 纯绿 */
lime: #00ff00;       /* 亮绿 */
forestgreen: #228b22;/* 森林绿 */
seagreen: #2e8b57;   /* 海绿 *//* 蓝色系 */
blue: #0000ff;       /* 纯蓝 */
royalblue: #4169e1;  /* 皇家蓝 */
steelblue: #4682b4;  /* 钢蓝 */
dodgerblue: #1e90ff; /* 道奇蓝 *//* 黄色系 */
yellow: #ffff00;     /* 纯黄 */
gold: #ffd700;       /* 金色 */
orange: #ffa500;     /* 橙色 */
amber: #ffbf00;      /* 琥珀色 */

现代UI常用颜色

Material Design 颜色

/* 蓝色系 */
#2196F3;    /* Material Blue 500 - 最常用 */
#1976D2;    /* Material Blue 700 - 深蓝 */
#BBDEFB;    /* Material Blue 100 - 浅蓝 */
#0D47A1;    /* Material Blue 900 - 最深蓝 *//* 红色系 */
#F44336;    /* Material Red 500 */
#D32F2F;    /* Material Red 700 */
#FFCDD2;    /* Material Red 100 *//* 绿色系 */
#4CAF50;    /* Material Green 500 */
#388E3C;    /* Material Green 700 */
#C8E6C9;    /* Material Green 100 *//* 橙色系 */
#FF9800;    /* Material Orange 500 */
#F57C00;    /* Material Orange 700 */
#FFE0B2;    /* Material Orange 100 *//* 紫色系 */
#9C27B0;    /* Material Purple 500 */
#7B1FA2;    /* Material Purple 700 */
#E1BEE7;    /* Material Purple 100 */

其他实用颜色

/* 中性色 */
#f8f9fa;    /* 非常浅的灰，用于背景 */
#e9ecef;    /* 浅灰背景 */
#dee2e6;    /* 边框灰 */
#6c757d;    /* 次要文字色 */
#495057;    /* 主要文字色 *//* 状态色 */
#28a745;    /* 成功绿色 */
#dc3545;    /* 错误红色 */
#ffc107;    /* 警告黄色 */
#17a2b8;    /* 信息蓝色 */

颜色使用场景

按钮颜色

/* 主要按钮 */
primary-button {background: #2196F3;     /* 主要操作 */color: white;
}/* 成功按钮 */
success-button {background: #4CAF50;     /* 成功操作 */color: white;
}/* 危险按钮 */
danger-button {background: #F44336;     /* 删除/危险操作 */color: white;
}/* 警告按钮 */
warning-button {background: #FF9800;     /* 警告操作 */color: white;
}

文本颜色

/* 主要文字 */
primary-text {color: #212121;          /* 主要文字 */
}/* 次要文字 */
secondary-text {color: #757575;          /* 次要文字 */
}/* 禁用文字 */
disabled-text {color: #bdbdbd;          /* 禁用状态文字 */
}

边框颜色

/* 常规边框 */
normal-border {border: 1px solid #e0e0e0;
}/* 焦点边框 */
focus-border {border: 2px solid #2196F3;
}/* 错误边框 */
error-border {border: 2px solid #F44336;
}

颜色搭配建议

安全配色方案

/* 蓝白配 - 专业清爽 */
background: white;
primary-color: #2196F3;
text-color: #333333;/* 灰白配 - 现代简约 */
background: #f8f9fa;
primary-color: #6c757d;
text-color: #495057;/* 绿白配 - 自然清新 */
background: white;
primary-color: #4CAF50;
text-color: #333333;

暗色主题配色

/* 深色背景 */
dark-background: #2d3748;
dark-surface: #4a5568;
dark-primary: #4299e1;
dark-text: #e2e8f0;

实用颜色函数

RGBA透明度控制

/* 带透明度的颜色 */
semi-transparent {background-color: rgba(33, 150, 243, 0.5); /* #2196F3 50%透明度 */
}/* 渐变效果 */
gradient-bg {background: qlineargradient(x1:0, y1:0, x2:1, y2:1,stop:0 rgba(33, 150, 243, 0.8), stop:1 rgba(66, 165, 245, 0.8));
}

颜色命名建议

语义化命名

/* 不要这样 */
color: #2196F3;/* 应该这样 */
primary-color: #2196F3;
secondary-color: #4CAF50;
accent-color: #FF9800;/* 或者使用变量 */
@primary: #2196F3;
@success: #4CAF50;
@warning: #FF9800;
@danger: #F44336;

常用颜色速查表

颜色	十六进制	RGB	使用场景
Material Blue	#2196F3	rgb(33, 150, 243)	主要按钮、链接
Material Green	#4CAF50	rgb(76, 175, 80)	成功状态
Material Red	#F44336	rgb(244, 67, 54)	错误状态
Material Orange	#FF9800	rgb(255, 152, 0)	警告状态
Light Grey	#f5f5f5	rgb(245, 245, 245)	背景色
Border Grey	#e0e0e0	rgb(224, 224, 224)	边框色
Text Dark	#333333	rgb(51, 51, 51)	主要文字
Text Light	#757575	rgb(117, 117, 117)	次要文字