QColor::setHslF()だけじゃない!Qtで色を設定する多様な方法と使い分け

2025-05-26

HSL とは?

HSL は、色を人間が直感的に理解しやすいように表現するカラーモデルの一つです。

  • A (Alpha - アルファ): 色の不透明度を指します。0から1.0までの浮動小数点数で表現され、0は完全に透明、1.0は完全に不透明です。
  • L (Lightness - 輝度/明度): 色の明るさを指します。0から1.0までの浮動小数点数で表現され、0は常に黒、1.0は常に白になります。中間値が最も色が鮮明に見える範囲です。
  • S (Saturation - 彩度): 色の鮮やかさを指します。0から1.0までの浮動小数点数で表現され、0に近づくほど色が薄く(灰色に近く)なり、1.0に近づくほど色が鮮やかになります。
  • H (Hue - 色相): 色の種類を指します。0から359までの度数で表現され、赤(0/360)、緑(120)、青(240)などが主な色として配置されています。

setHslF() の特徴

setHslF() メソッドの F は "float" を意味し、各コンポーネントの値を float または qreal (Qtでdoubleのエイリアスとして使われることが多い) 型で、0.0から1.0の範囲で指定することを可能にします。これにより、より細かい精度で色を表現できます。

一般的な setHsl() メソッドでは、H, S, L, A の各値が整数(H: 0-359, S, L, A: 0-255)で指定されますが、setHslF() を使うと、各コンポーネントを浮動小数点数で指定するため、より滑らかな色の変化や、より正確な色指定が可能です。

メソッドのシグネチャ

void QColor::setHslF(qreal h, qreal s, qreal l, qreal a = 1.0)
  • a: アルファ(Alpha)の値を 0.0 から 1.0 の間で指定します(オプション、デフォルトは 1.0 で完全に不透明)。
    • 0.0 は完全に透明、1.0 は完全に不透明です。
  • l: 輝度/明度(Lightness)の値を 0.0 から 1.0 の間で指定します。
    • 0.0 は黒、1.0 は白です。
  • s: 彩度(Saturation)の値を 0.0 から 1.0 の間で指定します。
    • 0.0 は灰色、1.0 は最も鮮やかな色です。
  • h: 色相(Hue)の値を 0.0 から 1.0 の間で指定します。
    • 0.0 / 1.0 は赤、約 0.333 は緑、約 0.667 は青に相当します。
    • HLSモデルのHueは通常0-359ですが、setHslFでは0-1の範囲に正規化して指定します。
#include <QColor>
#include <QDebug>

int main() {
    QColor color;

    // 赤色(彩度100%、明るさ50%)をHSL浮動小数点値で設定
    // H: 0.0 (赤), S: 1.0 (最大鮮やかさ), L: 0.5 (中間的な明るさ)
    color.setHslF(0.0, 1.0, 0.5);
    qDebug() << "Red HSLF color:" << color; // 例: QColor(255, 0, 0, 255)

    // 半透明の緑色(彩度80%、明るさ70%)を設定
    // H: 0.333 (緑), S: 0.8 (高い鮮やかさ), L: 0.7 (明るい), A: 0.5 (半透明)
    color.setHslF(0.333, 0.8, 0.7, 0.5);
    qDebug() << "Semi-transparent Green HSLF color:" << color; // 例: QColor(91, 230, 91, 127)

    // 暗い青色(彩度90%、明るさ20%)を設定
    // H: 0.667 (青), S: 0.9 (高い鮮やかさ), L: 0.2 (暗い)
    color.setHslF(0.667, 0.9, 0.2);
    qDebug() << "Dark Blue HSLF color:" << color; // 例: QColor(5, 5, 107, 255)

    return 0;
}

この例では、setHslF() を使ってHLSの浮動小数点値で色を定義し、その結果がどのように QColor オブジェクトに反映されるかを示しています。RGB値に変換された結果は、システムやQtのバージョンによって若干異なる場合がありますが、基本的な色の表現は維持されます。



よくあるエラーとその原因

    • 原因: setHslF() は、Hue (H)、Saturation (S)、Lightness (L)、Alpha (A) の各値を qreal (通常は double) 型で 0 から 1.0 の範囲で受け取ります。この範囲外の値を指定すると、予期しない色になったり、色が全く表示されなかったりすることがあります。
      • 例: setHslF(1.5, 0.5, 0.5) のように Hue に 1.0 を超える値を指定したり、setHslF(0.5, -0.2, 0.5) のように負の値を指定したりする。
    • トラブルシューティング:
      • 常に引数の値が [0.0, 1.0] の範囲内であることを確認してください。特に、外部からの入力や計算結果を使用する場合は、クランプ処理 (qBound(), std::clamp など) を適用して、値が適切な範囲に収まるようにします。
      • Hue は 0.0 と 1.0 が同じ赤色を表すため、1.0 を超える値は 0.0 から 1.0 の範囲に正規化されますが、意図しない色になる可能性があるので注意が必要です。
  1. setHsl()setHslF() の混同

    • 原因: Qt には整数値を引数にとる setHsl() も存在します。これは Hue が 0-359、Saturation/Lightness/Alpha が 0-255 の範囲で指定されます。これら二つのメソッドの引数のスケールを混同すると、期待する色が得られません。
      • 例: setHslF(180, 200, 100) のように、setHsl() のように整数値をそのまま setHslF() に渡してしまう。
    • トラブルシューティング:
      • 使用するメソッドが setHslF() であることを明確にし、すべての引数が浮動小数点数 (qreal または double) で、かつ [0.0, 1.0] の範囲であることを確認します。
      • コードレビューを行い、誤って別のHLS設定メソッドを使っていないか確認します。
  2. アルファ値 (透明度) の誤解

    • 原因: setHslF() の最後の引数 a はアルファ値(不透明度)を表し、デフォルトは 1.0 (完全に不透明) です。これを 0.0 に近づけるほど透明になります。意図せず透明な色を設定してしまい、「色が表示されない」と勘違いすることがあります。
    • トラブルシューティング:
      • 色が全く表示されない場合、まずアルファ値が 0.0 になっていないか確認してください。
      • 透明度が必要な場合は、a の値を適切に設定します (例: 0.5 で半透明)。
  3. HLS から RGB への変換の理解不足

    • 原因: QColor は内部的に RGB モデルで色を保持しています。setHslF() で設定されたHLS値は、表示される際にRGB値に変換されます。この変換は色の知覚に影響を与えることがあります。特に、Lightness の値によって、同じ Hue と Saturation でも見た目が大きく変わります。
      • 例: Lightness が 0.0 (黒) や 1.0 (白) に近いと、Saturation の効果がほとんど見られません。
    • トラブルシューティング:
      • HLSモデルの特性を理解することが重要です。Lightnessが低い(暗い)または高い(明るい)色では、彩度(Saturation)の影響が小さくなります。
      • もし期待する色にならない場合は、color.red(), color.green(), color.blue() または color.toRgb() で変換されたRGB値を確認し、それが妥当な値かどうかをデバッグします。
      • 色選択ツールやグラフィックエディタでHSL値を変更して、どのようにRGB値や見た目が変わるかを確認すると理解が深まります。
  4. デバッグ時の色表示の課題

    • 原因: デバッガーで QColor オブジェクトを直接確認しても、内部のRGB値しか表示されないことが多く、HLS値で設定した意図との乖離を読み解くのが難しい場合があります。
    • トラブルシューティング:
      • qDebug() << color.hslHueF() << color.hslSaturationF() << color.lightnessF() << color.alphaF(); のように、設定後に各HLS成分を明示的に出力して確認します。
      • QColortoRgb()toHsv() などの変換メソッドを使って、他のカラーモデルでの値を確認し、全体的な整合性を検証します。
  • プラットフォーム/Qtバージョンの違い: 稀に、Qtのバージョンや実行環境(OS、グラフィックドライバーなど)によって色の表示に微妙な違いが生じることがあります。もし他の環境で問題なく動作する場合は、環境要因を疑ってみる価値があります。
  • ドキュメントの参照: Qt の公式ドキュメント (QColorsetHslF() やHLSモデルに関する説明) を再度確認し、引数の正確な意味や範囲を理解しているか確認します。
  • 最小限の再現コード: 問題が発生した場合、setHslF() を使用する部分だけを抜き出し、最小限のコードで問題を再現してみてください。これにより、問題の切り分けが容易になります。


例1:基本的なHLS色の設定

最も基本的な使用例です。赤、緑、青、そして半透明のシアンを設定します。

#include <QApplication>
#include <QWidget>
#include <QPushButton>
#include <QVBoxLayout>
#include <QColor>
#include <QDebug> // デバッグ出力用
#include <QPalette> // ウィジェットの色を設定するため

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QWidget window;
    window.setWindowTitle("QColor::setHslF() Examples");
    QVBoxLayout *layout = new QVBoxLayout(&window);

    // 1. 基本的な赤色の設定
    QPushButton *redButton = new QPushButton("Red (H:0.0, S:1.0, L:0.5)");
    QColor redColor;
    redColor.setHslF(0.0, 1.0, 0.5); // H:0.0 (赤), S:1.0 (最大彩度), L:0.5 (中間明度)
    QPalette redPalette = redButton->palette();
    redPalette.setColor(QPalette::Button, redColor);
    redButton->setPalette(redPalette);
    redButton->setAutoFillBackground(true); // 背景を自動で描画
    layout->addWidget(redButton);
    qDebug() << "Red HSLF color (RGB):" << redColor.red() << redColor.green() << redColor.blue();

    // 2. 基本的な緑色の設定
    QPushButton *greenButton = new QPushButton("Green (H:0.333, S:1.0, L:0.5)");
    QColor greenColor;
    greenColor.setHslF(0.333, 1.0, 0.5); // H:0.333 (緑), S:1.0, L:0.5
    QPalette greenPalette = greenButton->palette();
    greenPalette.setColor(QPalette::Button, greenColor);
    greenButton->setPalette(greenPalette);
    greenButton->setAutoFillBackground(true);
    layout->addWidget(greenButton);
    qDebug() << "Green HSLF color (RGB):" << greenColor.red() << greenColor.green() << greenColor.blue();

    // 3. 基本的な青色の設定
    QPushButton *blueButton = new QPushButton("Blue (H:0.667, S:1.0, L:0.5)");
    QColor blueColor;
    blueColor.setHslF(0.667, 1.0, 0.5); // H:0.667 (青), S:1.0, L:0.5
    QPalette bluePalette = blueButton->palette();
    bluePalette.setColor(QPalette::Button, blueColor);
    blueButton->setPalette(bluePalette);
    blueButton->setAutoFillBackground(true);
    layout->addWidget(blueButton);
    qDebug() << "Blue HSLF color (RGB):" << blueColor.red() << blueColor.green() << blueColor.blue();

    // 4. 半透明のシアン色の設定
    QPushButton *cyanButton = new QPushButton("Semi-transparent Cyan (H:0.5, S:1.0, L:0.5, A:0.5)");
    QColor cyanColor;
    cyanColor.setHslF(0.5, 1.0, 0.5, 0.5); // H:0.5 (シアン), S:1.0, L:0.5, A:0.5 (半透明)
    QPalette cyanPalette = cyanButton->palette();
    cyanPalette.setColor(QPalette::Button, cyanColor);
    cyanButton->setPalette(cyanPalette);
    cyanButton->setAutoFillBackground(true);
    layout->addWidget(cyanButton);
    qDebug() << "Cyan HSLF color (RGB, Alpha):" << cyanColor.red() << cyanColor.green() << cyanColor.blue() << cyanColor.alpha();

    window.show();
    return app.exec();
}

解説:

  • qDebug() を使って、設定したHLS値が内部的にどのようなRGB値に変換されたかを確認できます。
  • setAutoFillBackground(true) は、ウィジェットがその背景を自分で描画するようにします。
  • QPushButton の背景色を QColor::setHslF() で設定するために、QPalette を使用します。
  • QApplicationQWidget を使って基本的なウィンドウを作成します。

例2:彩度と明度を変化させる

同じ色相 (Hue) でも、彩度 (Saturation) と明度 (Lightness) を変えることで、色の見た目がどう変わるかを示す例です。

#include <QApplication>
#include <QWidget>
#include <QPushButton>
#include <QVBoxLayout>
#include <QColor>
#include <QDebug>
#include <QPalette>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QWidget window;
    window.setWindowTitle("HSL Saturation and Lightness");
    QVBoxLayout *layout = new QVBoxLayout(&window);

    qreal hue = 0.1; // 少しオレンジがかった赤色

    // 1. 高い彩度、中間明度
    QPushButton *btn1 = new QPushButton("High Saturation, Medium Lightness");
    QColor color1;
    color1.setHslF(hue, 1.0, 0.5); // S:最大, L:中間
    QPalette pal1 = btn1->palette();
    pal1.setColor(QPalette::Button, color1);
    btn1->setPalette(pal1);
    btn1->setAutoFillBackground(true);
    layout->addWidget(btn1);
    qDebug() << "Color 1 (H:0.1, S:1.0, L:0.5):" << color1;

    // 2. 低い彩度、中間明度(灰色に近い)
    QPushButton *btn2 = new QPushButton("Low Saturation, Medium Lightness (Grayish)");
    QColor color2;
    color2.setHslF(hue, 0.2, 0.5); // S:低い
    QPalette pal2 = btn2->palette();
    pal2.setColor(QPalette::Button, color2);
    btn2->setPalette(pal2);
    btn2->setAutoFillBackground(true);
    layout->addWidget(btn2);
    qDebug() << "Color 2 (H:0.1, S:0.2, L:0.5):" << color2;

    // 3. 高い彩度、明るい明度
    QPushButton *btn3 = new QPushButton("High Saturation, High Lightness (Brighter)");
    QColor color3;
    color3.setHslF(hue, 1.0, 0.8); // L:高い
    QPalette pal3 = btn3->palette();
    pal3.setColor(QPalette::Button, color3);
    btn3->setPalette(pal3);
    btn3->setAutoFillBackground(true);
    layout->addWidget(btn3);
    qDebug() << "Color 3 (H:0.1, S:1.0, L:0.8):" << color3;

    // 4. 高い彩度、暗い明度
    QPushButton *btn4 = new QPushButton("High Saturation, Low Lightness (Darker)");
    QColor color4;
    color4.setHslF(hue, 1.0, 0.2); // L:低い
    QPalette pal4 = btn4->palette();
    pal4.setColor(QPalette::Button, color4);
    btn4->setPalette(pal4);
    btn4->setAutoFillBackground(true);
    layout->addWidget(btn4);
    qDebug() << "Color 4 (H:0.1, S:1.0, L:0.2):" << color4;

    // 5. 明度0 (黒)
    QPushButton *btn5 = new QPushButton("Lightness 0.0 (Always Black)");
    QColor color5;
    color5.setHslF(hue, 1.0, 0.0); // L:0.0 (黒)
    QPalette pal5 = btn5->palette();
    pal5.setColor(QPalette::Button, color5);
    btn5->setPalette(pal5);
    btn5->setAutoFillBackground(true);
    layout->addWidget(btn5);
    qDebug() << "Color 5 (H:0.1, S:1.0, L:0.0):" << color5;

    // 6. 明度1.0 (白)
    QPushButton *btn6 = new QPushButton("Lightness 1.0 (Always White)");
    QColor color6;
    color6.setHslF(hue, 1.0, 1.0); // L:1.0 (白)
    QPalette pal6 = btn6->palette();
    pal6.setColor(QPalette::Button, color6);
    btn6->setPalette(pal6);
    btn6->setAutoFillBackground(true);
    layout->addWidget(btn6);
    qDebug() << "Color 6 (H:0.1, S:1.0, L:1.0):" << color6;

    window.show();
    return app.exec();
}

解説:

  • Lightness が 0.0 (黒) や 1.0 (白) になると、Saturation の値に関わらず色はそれぞれ黒または白になります。
  • 同じ Hue (ここでは 0.1 で少しオレンジがかった赤) を使用しながら、Saturation と Lightness の値を変化させています。

setHslF() は、H、S、L の値を少しずつ変化させることで、滑らかなグラデーションを作成するのに非常に適しています。この例では、色相 (Hue) を変化させることで、虹のようなグラデーションを作成します。

#include <QApplication>
#include <QWidget>
#include <QPainter> // 描画用
#include <QColor>

// グラデーションを描画するカスタムウィジェット
class GradientWidget : public QWidget {
public:
    GradientWidget(QWidget *parent = nullptr) : QWidget(parent) {
        setFixedSize(300, 200); // ウィジェットのサイズを固定
    }

protected:
    void paintEvent(QPaintEvent *event) override {
        Q_UNUSED(event);
        QPainter painter(this);
        painter.setRenderHint(QPainter::Antialiasing); // アンチエイリアシング有効化

        int width = size().width();
        int height = size().height();

        // 0から1.0までHueを変化させながら色を描画
        for (int x = 0; x < width; ++x) {
            qreal hue = (qreal)x / width; // x座標に応じてHueを0.0から1.0に線形補間
            QColor color;
            // 彩度と明度は固定(例: 高い彩度、中間明度)
            color.setHslF(hue, 1.0, 0.5);

            painter.setPen(color); // 描画色を設定
            painter.drawLine(x, 0, x, height); // 縦線を描画
        }
    }
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    GradientWidget window;
    window.setWindowTitle("HSL Gradient Example");
    window.show();

    return app.exec();
}

解説:

  • color.setHslF(hue, 1.0, 0.5); で各縦列の色を設定し、drawLine() で描画することで、滑らかな虹色のグラデーションが作成されます。
  • hue = (qreal)x / width; の計算により、x が 0 のときに hue が 0.0、xwidth - 1 のときに hue が約 1.0 になるように線形補間されます。
  • QPainter を使用して、ウィジェットの幅 (width()) に応じて x 座標を変化させます。
  • GradientWidget というカスタムウィジェットを作成し、paintEvent をオーバーライドして描画処理を行います。


RGB (Red, Green, Blue) モデルでの色設定

最も一般的で基本的なカラーモデルです。赤、緑、青の光の三原色を混ぜ合わせることで色を表現します。

  • QColor QColor::fromRgb(int r, int g, int b, int a = 255) / QColor QColor::fromRgbF(...):

    • 静的メソッドで、QColor オブジェクトを直接生成して返します。既存のQColorオブジェクトを変更するのではなく、新しいオブジェクトを作成したい場合に便利です。
    • 利用シーン:
      • 一時的なQColorオブジェクトを作成する場合。
      • 関数の戻り値として色を返す場合。
  • void QColor::setRgbF(qreal r, qreal g, qreal b, qreal a = 1.0):

    • 各成分を0.0-1.0の浮動小数点数で指定します。
    • 利用シーン:
      • OpenGLなどのグラフィックスAPIで浮動小数点数のRGB値が使われる場合。
      • 色の計算や補間を浮動小数点数で行う場合。
  • void QColor::setRgb(int r, int g, int b, int a = 255):

    • 各成分を0-255の整数値で指定します。aはアルファ値(不透明度)で、デフォルトは255(完全に不透明)です。
    • 利用シーン:
      • ウェブカラーコード(#RRGGBB)や、一般的な画像編集ソフトウェアで使われるRGB値に直接対応する場合。
      • 色の表現がRGB値で提供されている場合。


#include <QColor>
#include <QDebug>

int main() {
    QColor color1;
    color1.setRgb(255, 0, 0); // 純粋な赤 (整数値)
    qDebug() << "RGB (int):" << color1;

    QColor color2;
    color2.setRgbF(0.0, 1.0, 0.0, 0.5); // 半透明の緑 (浮動小数点数)
    qDebug() << "RGB (float):" << color2;

    QColor color3 = QColor::fromRgb(0, 0, 255); // 静的メソッドで青を生成
    qDebug() << "RGB (fromRgb):" << color3;

    return 0;
}

HSV (Hue, Saturation, Value) モデルでの色設定

HLSと似ていますが、Lightnessの代わりにValue (明度/輝度) を使用します。Valueは色の明るさを示し、0は常に黒、1.0(または255)は色の完全な明るさを表します。

  • QColor QColor::fromHsv(int h, int s, int v, int a = 255) / QColor QColor::fromHsvF(...):

    • 静的メソッドで、HSV値からQColorオブジェクトを生成して返します。
  • void QColor::setHsvF(qreal h, qreal s, qreal v, qreal a = 1.0):

    • 各成分を0.0-1.0の浮動小数点数で指定します。
    • 利用シーン:
      • HLSと同様に、より細かい精度で色を制御したい場合。
  • void QColor::setHsv(int h, int s, int v, int a = 255):

    • Hueを0-359、Saturation/Value/Alphaを0-255の整数値で指定します。
    • 利用シーン:
      • PhotoshopなどのHSVカラーピッカーに慣れている場合。
      • 明度を0にすると純粋な黒になるという特性を利用したい場合。


#include <QColor>
#include <QDebug>

int main() {
    QColor color1;
    color1.setHsv(120, 255, 255); // 純粋な緑 (HSV)
    qDebug() << "HSV (int):" << color1;

    QColor color2;
    color2.setHsvF(0.0, 0.5, 1.0); // 彩度半分の明るい赤 (HSV float)
    qDebug() << "HSV (float):" << color2;

    return 0;
}

CMYK (Cyan, Magenta, Yellow, Key/Black) モデルでの色設定

印刷業界でよく使われる減法混色モデルです。

  • void QColor::setCmykF(qreal c, qreal m, qreal y, qreal k, qreal a = 1.0):
    • 各成分を0.0-1.0の浮動小数点数で指定します。
  • void QColor::setCmyk(int c, int m, int y, int k, int a = 255):
    • 各成分を0-255の整数値で指定します。

利用シーン:

  • 印刷用のアプリケーションや、CMYK値で指定された色を扱う場合。

名前付き色 (Named Colors) での色設定

Qtは、CSSやSVGで定義されている多くの色名をサポートしています。

  • Qt::GlobalColor (列挙型):
    • Qt::red, Qt::blue, Qt::white などの一般的な色を列挙型で直接指定できます。
  • void QColor::setNamedColor(const QString &name):
    • 既存のQColorオブジェクトの色名を指定して設定します。
  • QColor(const QString &name) (コンストラクタ):
    • 色名を文字列で指定してQColorオブジェクトを初期化します。

利用シーン:

  • HTMLやCSSの知識を持つ開発者が色を扱う場合。
  • 色の指定を読みやすくしたい場合。


#include <QColor>
#include <QDebug>

int main() {
    QColor color1("red"); // 色名で直接初期化
    qDebug() << "Named Color (string):" << color1;

    QColor color2;
    color2.setNamedColor("darkblue"); // 既存のオブジェクトに色名で設定
    qDebug() << "Named Color (setNamedColor):" << color2;

    QColor color3(Qt::cyan); // Qt::GlobalColor を使用
    qDebug() << "Global Color:" << color3;

    return 0;
}
  • QColor QColor::toRgb() const / QColor QColor::toHsv() const / QColor QColor::toHsl() const / QColor QColor::toCmyk() const:

    • 現在のQColorオブジェクトを他のカラーモデルに変換した新しいQColorオブジェクトを返します。
    • 利用シーン:
      • 異なるカラーモデル間での相互変換が必要な場合。
  • QColor QColor::lighter(int factor = 150) const / QColor QColor::darker(int factor = 200) const:

    • 現在の色を相対的に明るくしたり暗くしたりした新しい色を返します。factorはパーセンテージで、100が元の色、200で2倍明るくなります。
    • 利用シーン:
      • UI要素のホバー状態やクリック状態の色を自動生成する場合。
      • 一貫したデザインのカラーパレットを動的に作成する場合。


#include <QColor>
#include <QDebug>

int main() {
    QColor baseColor = QColor::fromRgbF(0.8, 0.2, 0.2); // 元の赤っぽい色

    QColor lighterColor = baseColor.lighter(150); // 1.5倍明るく
    qDebug() << "Lighter color:" << lighterColor;

    QColor darkerColor = baseColor.darker(200); // 2倍暗く
    qDebug() << "Darker color:" << darkerColor;

    QColor hslColor = baseColor.toHsl(); // RGBからHSLへ変換
    qDebug() << "Converted to HSL:" << hslColor;

    return 0;
}
  • 名前付き色 は、コードの可読性を高め、一般的な色を素早く指定するのに役立ちます。
  • CMYKモデル は、印刷物など、減法混色の概念が必要な場合に特化しています。
  • HSVモデル は、HLSと同様に直感的ですが、Valueの特性により、特定の色を黒から白へ変化させる際の挙動がHLSと異なります。
  • RGBモデル は、ハードウェアでの色の表現に直接対応し、最も広く使われています。特定の色を正確に指定する場合や、画像データと直接やり取りする場合に便利です。
  • QColor::setHslF() を含むHLSモデル は、人間の知覚に近く、色相、彩度、明度を独立して操作できるため、グラデーションや色調整に非常に直感的です。