Qt的HSL色彩系统

与常见的HSB色彩系统不同HSL颜色系统有它独特的色彩设置规律更适合UI工程的界面主题、模式切换、整体亮度调节、CSS 风格配色等应用。HSL颜色 hsl(h, s, l)的参数含义h:色相范围0360°0°/360°红120°绿240°蓝和 HSB 一样s色彩浓郁度算法和 HSB 不一样l亮度100%纯白0%纯黑50%标准纯色运行脚本生成一个hsl色彩矩阵图以绿色为例import sys from PySide6.QtWidgets import QLabel, QApplication, QWidget, QHBoxLayout, QVBoxLayout class LabelHsl(QLabel): def __init__(self,hsl, geo, parentNone): super().__init__(parent) self.setGeometry(*geo) self.setStyleSheet(fbackground-color: hsl({hsl});color:red) app QApplication(sys.argv) widget1 QWidget() v_layout QVBoxLayout() v_layout.setContentsMargins(0, 0, 0, 0) v_layout.setSpacing(0) h 120 s 100 width 80 height 80 for i in range(11): widget QWidget() widget.setFixedSize(width * 10, height) h_layout QHBoxLayout() h_layout.setContentsMargins(0, 0, 0, 0) h_layout.setSpacing(0) for j in range(11): l f{j * 10}% geo (j*width, i*height, width, height) hsl f{h}, {s}%, {l} label LabelHsl(hsl, geo) label.setText(f{h},{s},{j*10}) h_layout.addWidget(label) j width widget.setLayout(h_layout) v_layout.addWidget(widget) i height s - 10 widget1.setLayout(v_layout) widget1.show() app.exec()看得出随着s的递增色彩逐渐浓郁随着l的递增亮度逐渐提高据此创建两个渐变色的小部件1、s 100%色彩浓度不变l递增亮度递增background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2:0, stop: 0 hsl(120, 100%, 0%), stop: 0.2 hsl(120, 100%, 20%), stop: 0.4 hsl(120, 100%, 40%), stop: 0.6 hsl(120, 100%, 60%), stop: 0.8 hsl(120, 100%, 80%), stop: 1 hsl(120, 100%, 100%));2、l 50%亮度不变s递增色彩浓度递增background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 hsl(120, 0%, 50%), stop: 0.2 hsl(120, 20%, 50%), stop: 0.4 hsl(120, 40%, 50%), stop: 0.6 hsl(120, 60%, 50%), stop: 0.8 hsl(120, 80%, 50%), stop: 1 hsl(120,100%, 50%));根据设计需求选择不同的常量和递变量即可。demo一个绿色带灯按钮先创建一个灭灯的绿色按钮QPushButton {background-color: qlineargradient(x1: 1, y1: 0, x2: 1, y2: 1, stop: 0 hsl(120,35%,90%), stop: 0.15 hsl(120,35%,60%), stop: 0.75 hsl(120,35%,50%), stop: 1.0 hsl(120,35%,35%)); border-top: 2px solid #f0f0f0; border-left: 2px solid #f0f0f0; border-right: 2px solid #303030; border-bottom: 2px solid #303030; border-radius: 5px; } QPushButton:hover{background-color: qlineargradient(x1: 1, y1: 0, x2: 1, y2: 1, stop: 0 hsl(120,35%,85%), stop: 0.1 hsl(120,35%,65%), stop: 0.85 hsl(120,35%,55%), stop: 1.0 hsl(120,35%,50%)); border-top: 1px solid #f0f0f0; border-left: 1px solid #f0f0f0; border-right: 1px solid #303030; border-bottom: 1px solid #303030; } QPushButton:pressed{background-color: hsl(120,35%,70%); border-top: 1px solid #303030; border-left: 1px solid #303030; border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }然后把按钮样式表中的所有的色彩浓度由25%批量替换为80%QPushButton {background-color: qlineargradient(x1: 1, y1: 0, x2: 1, y2: 1, stop: 0 hsl(120,80%,90%), stop: 0.15 hsl(120,80%,60%), stop: 0.75 hsl(120,80%,50%), stop: 1.0 hsl(120,80%,40%)); border-top: 2px solid #f0f0f0; border-left: 2px solid #f0f0f0; border-right: 2px solid #303030; border-bottom: 2px solid #303030; border-radius: 5px; } QPushButton:hover{background-color: qlineargradient(x1: 1, y1: 0, x2: 1, y2: 1, stop: 0 hsl(120,80%,85%), stop: 0.1 hsl(120,80%,65%), stop: 0.85 hsl(120,80%,55%), stop: 1.0 hsl(120,80%,50%)); border-top: 1px solid #f0f0f0; border-left: 1px solid #f0f0f0; border-right: 1px solid #303030; border-bottom: 1px solid #303030; } QPushButton:pressed{background-color: hsl(120,80%,70%); border-top: 1px solid #303030; border-left: 1px solid #303030; border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }就可以获得一个亮灯的绿按钮继续把上面两个按钮样式表中的色相从120批量替换为0其余的不变就可以获得两个红色按钮QPushButton {background-color: qlineargradient(x1: 1, y1: 0, x2: 1, y2: 1, stop: 0 hsl(0,35%,90%), stop: 0.15 hsl(0,35%,60%), stop: 0.75 hsl(0,35%,50%), stop: 1.0 hsl(0,35%,35%)); border-top: 2px solid #f0f0f0; border-left: 2px solid #f0f0f0; border-right: 2px solid #303030; border-bottom: 2px solid #303030; border-radius: 5px; } QPushButton:hover{background-color: qlineargradient(x1: 1, y1: 0, x2: 1, y2: 1, stop: 0 hsl(0,35%,85%), stop: 0.1 hsl(0,35%,65%), stop: 0.85 hsl(0,35%,55%), stop: 1.0 hsl(0,35%,50%)); border-top: 1px solid #f0f0f0; border-left: 1px solid #f0f0f0; border-right: 1px solid #303030; border-bottom: 1px solid #303030; } QPushButton:pressed{background-color: hsl(0,35%,70%); border-top: 1px solid #303030; border-left: 1px solid #303030; border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }QPushButton {background-color: qlineargradient(x1: 1, y1: 0, x2: 1, y2: 1, stop: 0 hsl(0,80%,90%), stop: 0.15 hsl(0,80%,60%), stop: 0.75 hsl(0,80%,50%), stop: 1.0 hsl(0,80%,40%)); border-top: 2px solid #f0f0f0; border-left: 2px solid #f0f0f0; border-right: 2px solid #303030; border-bottom: 2px solid #303030; border-radius: 5px; } QPushButton:hover{background-color: qlineargradient(x1: 1, y1: 0, x2: 1, y2: 1, stop: 0 hsl(0,80%,85%), stop: 0.1 hsl(0,80%,65%), stop: 0.85 hsl(0,80%,55%), stop: 1.0 hsl(0,80%,50%)); border-top: 1px solid #f0f0f0; border-left: 1px solid #f0f0f0; border-right: 1px solid #303030; border-bottom: 1px solid #303030; } QPushButton:pressed{background-color: hsl(0,80%,70%); border-top: 1px solid #303030; border-left: 1px solid #303030; border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }利用HSL颜色系统可以很方便地创建迭代方便、颜色体系变量化、高效组态UI工程。一个自定义颜色系统的demoimport sys from dataclasses import dataclass from PySide6.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout dataclass class HSLColor: h: str s: str l: str 红色 0 绿色 120 蓝色 240 橙色 39 黄色 60 紫色 260 棕色 20 青色 180 品红 300 colors [红色, 绿色, 蓝色, 橙色, 黄色, 紫色, 棕色, 青色, 品红] color_names [红色, 绿色, 蓝色, 橙色, 黄色, 紫色, 棕色, 青色, 品红] hs [] for color in colors: c HSLColor(hcolor, s70%, l50%) hs.append(c) i 0 def toggle_color(): global i if i len(colors): i 0 c hs[i] style_Sheet fbackground-color:hsl({c.h},{c.s},{c.l}) widget.setStyleSheet(style_Sheet) widget.style().unpolish(widget) widget.style().polish(widget) btn.setStyleSheet(style_Sheet) btn.setText(color_names[i]) i 1 app QApplication(sys.argv) widget QWidget() btn QPushButton(切换颜色) btn.clicked.connect(toggle_color) layout QVBoxLayout() layout.addWidget(btn) widget.setLayout(layout) widget.show() sys.exit(app.exec())