On this page

Color QML Type (Singleton)

Holds utility functions for colors. More...

Import Statement: import QtQuick
Since: Qt 6.12

Note: This type is a QML singleton. There is only one instance of this type in the QML engine.

Methods

  • color alpha(color baseColor, real value)
  • color blend(color a, color b, real factor)
  • color darker(color baseColor, real factor)
  • bool equal(color lhs, color rhs)
  • color fromString(string name)
  • color hsla(real hue, real saturation, real lightness, real alpha)
  • color hsva(real hue, real saturation, real value, real alpha)
  • color lighter(color baseColor, real factor)
  • color rgba(real red, real green, real blue, real alpha)
  • color tint(color baseColor, color tintColor)
  • color transparent(color c, real opacity)

Detailed Description

Method Documentation

color alpha(color baseColor, real value)

Returns baseColor with an alpha value of value. value is a real ranging from 0 (completely transparent) to 1 (completely opaque).

color blend(color a, color b, real factor)

Returns a color that is a blend of a and b. The resulting color is constructed from the independent linear interpolations of the RGB color channels of a and b.

If factor is smaller than 0.0, a is returned. If factor is larger than 1.0, b is returned.

color darker(color baseColor, real factor)

Returns a color darker than baseColor by the factor provided.

The function converts the current RGB color to HSV, divides the value (V) component by factor and converts the color back to RGB.

If the factor is greater than 1.0, this function returns a darker color. Setting factor to 3.0 returns a color that has one-third the brightness. If the factor is less than 1.0, the return color is lighter, but we recommend using the Color::lighter() function for this purpose. If the factor is 0 or negative, the return value is unspecified.

bool equal(color lhs, color rhs)

Returns true if lhs and rhs are equal. See operator==().

Note: This function is a typed version of Qt::colorEqual()

color fromString(string name)

Returns the color corresponding to the given name (i.e. red or #ff0000). If there is no such color, an exception is thrown.

color hsla(real hue, real saturation, real lightness, real alpha)

Returns a color with the specified hue, saturation, lightness, and alpha components. All components should be in the range 0-1 (inclusive).

color hsva(real hue, real saturation, real value, real alpha)

Returns a color with the specified hue, saturation, value and alpha components. All components should be in the range 0-1 (inclusive).

color lighter(color baseColor, real factor)

Returns a color lighter than baseColor by the factor provided.

The function converts the current RGB color to HSV, multiplies the value (V) component by factor and converts the color back to RGB.

If the factor is greater than 1.0, this functions returns a lighter color. Setting factor to 1.5 returns a color that is 50% brighter. If the factor is less than 1.0, the return color is darker, but we recommend using the Color::darker() function for this purpose. If the factor is 0 or negative, the return value is unspecified.

color rgba(real red, real green, real blue, real alpha)

Returns a color with the specified red, green, blue, and alpha components. All components should be in the range 0-1 (inclusive).

color tint(color baseColor, color tintColor)

This function allows tinting one color (baseColor) with another (tintColor).

The tint color should usually be mostly transparent, or you will not be able to see the underlying color. The example below provides a slight red tint by having the tint color be pure red, which is only 1/16th opaque.

Item {
    Rectangle {
        x: 0
        width: 80
        height: 80
        color: "lightsteelblue"
    }
    Rectangle {
        x: 100; width: 80; height: 80
        color: Color.tint("lightsteelblue", "#10FF0000")
    }
}

Side-by-side representation of a light steel blue square and a light steel blue square with a tint applied

Tint is most useful when a subtle change is intended to be conveyed due to some event; you can then use tinting to more effectively tune the visible color.

color transparent(color c, real opacity)

Returns the color c with a given opacity

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.