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

Qt的HSL色彩系统

news 2026/7/7 12:35:11

与常见的HSB色彩系统不同，HSL颜色系统有它独特的色彩设置规律，更适合UI工程的界面主题、模式切换、整体亮度调节、CSS 风格配色等应用。

HSL颜色 hsl(h, s, l)的参数含义：
h:色相，范围：0～360°；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, parent=None): super().__init__(parent) self.setGeometry(*geo) self.setStyleSheet(f"background-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工程。

一个自定义颜色系统的demo：

import 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(h=color, s="70%", l="50%") hs.append(c) i = 0 def toggle_color(): global i if i >= len(colors): i = 0 c = hs[i] style_Sheet = f"""background-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())

查看全文

http://www.cnnetsun.cn/news/2106550.html