The `Color` class¶

Essentially, the Color is just a thin wrapper around Qt Quick's color. It provides useful properties and methods though. They are listed below.

Methods¶

Category	Methods (and aliases)
Multi-changes	`adjust`, `change`, `scale`
Hue	`adjustHue` (or `spin`), `complement`
Brightness	`darken`, `lighten`
Saturation	`desaturate`, `grayscale` (or `greyscale`), `saturate`
Opacity	`opacify` (or `fadeIn`), `transparentize` (or `fadeOut`)
Other	`invert`, `mix`

`adjust`¶

Type: (change: offset-object) → color

Increases or decreases one or more properties of the color by fixed amounts.

Adds the value passed for each keyword argument to the corresponding property of the color, and returns a new adjusted instance of color.

Restrictions (for more details see offset-object):

alpha keyword can be specified separately.
Among rgb, hsl, hsv, and hwb, only one may be used at a time.
All keyword arguments are of type offset and optional.

Examples:

cc`#6b717f`.adjust({rgb: {r: +15 .int}})  // ⇒ #7a717f

cc`#d2e1dd`.adjust({rgb: {red: -10 .int, blue: +10 .int}})  // ⇒ #c8e1e7

cc`#998099`.adjust({
    hsl: {lightness: -30 .percent},
    alpha: -40 .percent
})  // ⇒ #99473947

See also: change, scale, %, °.

`adjustHue`¶

Type:	(`offset`: `offset`) → `color`
Alias:	`spin`

Increases or decreases the color's hue.

Examples:

// Hue 222° becomes 282°
cc`#6b717f`.adjustHue(+60 .deg)  // ⇒ #796b7f

// Hue 164° becomes 104°.
cc`#d2e1dd`.spin(-60['°'])  // ⇒ #d6e1d2

// Hue 210° becomes 255°
cc`#036`.adjustHue(+45 .deg)  // ⇒ #1a0066

See also: adjust, °.

`change`¶

Type: (change: change-object) → color

Sets one or more properties of the color to new values and returns a new adjusted instance of color.

Restrictions (for more details see change-object):

alpha keyword can be specified separately.
Among rgb, hsl, hsv, and hwb, only one may be used at a time.
All keyword arguments are of type norm and optional.

Examples:

cc`#6b717f`.change({rgb: {r: 100 .int}})  // ⇒ #64717f

cc`#d2e1dd`.change({rgb: {red: 100 .int, blue: 50 .int}})  // ⇒ #64e132

cc`#998099`.change({
    hsl: {lightness: 30 .percent},
    alpha: 0.5
})  // ⇒ #80554455

See also: adjust, scale, %, °.

`complement`¶

Type: () → color

Returns the RGB complement of the color.

This is identical to color.adjustHue(-180 .deg).

Examples:

// Hue 222° becomes 42°
cc`#6b717f`.complement()  // ⇒ #7f796b

// Hue 164° becomes 344°
cc`#d2e1dd`.complement()  // ⇒ #e1d2d6

// Hue 210° becomes 30°
cc`#036`.complement()  // ⇒ #663300

See also: adjust, adjustHue, invert.

`darken`¶

Type: (amount = 0.25: norm) → color

Makes the color darker by specified amount (by decreasing the HSL lightness).

Examples:

// Lightness 92% becomes 72%
cc`#b37399`.darken(20['%'])  // ⇒ #7c4465

// Lightness 85% becomes 45%
cc`#f2ece4`.darken(40 .percent)  // ⇒ #b08b5a

// Lightness 20% becomes 0%
cc`#036`.darken(0.3)  // ⇒ #000000

// Lightness 50% becomes 25%
cc`#8000ff`.darken()  // ⇒ #000000

See also: adjust, %.

`desaturate`¶

Type: (amount = 0.25: norm) → color

Makes the color less saturated by specified amount (by decreasing the HSL saturation).

Examples:

// Saturation 100% becomes 80%
cc`#036`.desaturate(20 .percent)  // ⇒ #0a335c

// Saturation 35% becomes 15%
cc`#f2ece4`.desaturate(20 .percent)  // ⇒ #eeebe8

// Saturation 20% becomes 0%
cc`#d2e1dd`.desaturate(30 .percent)  // ⇒ #dadada

// Saturation 100% becomes 75%
cc`#8000ff`.desaturate()  // ⇒ #8020df

See also: adjust, %.

`grayscale`¶

Type:	() → `color`
Alias:	`greyscale`

Returns a gray color with the same lightness as the color's one.

This is identical to color.change({hsl: {saturation: 0}}).

Examples:

cc`#6b717f`.grayscale()  // ⇒ #757575

cc`#d2e1dd`.grayscale()  // ⇒ #dadada

cc`#036`.greyscale()  // ⇒ #333333

See also: change.

`invert`¶

Type: (weight = 1.0: norm) → color

Returns the negative of the color.

A higher weight means the result will be closer to the negative, and a lower weight means it will be closer to the original color. weight = 0.5 will always produce #808080.

Examples:

cc`#b37399`.invert()  // ⇒ #4c8c66

cc`black`.invert()  // ⇒ #ffffff

cc`#550e0cc`.invert(20 .percent)  // ⇒ #663b3a

See also: complement, %.

`lighten`¶

Type: (amount = 0.25: norm) → color

Makes the color lighter by specified amount (by increasing the HSL lightness).

Examples:

// Lightness 46% becomes 66%
cc`#6b717f`.lighten(20['%'])  // ⇒ #a1a5af

// Lightness 20% becomes 80%
cc`#036`.lighten(60 .percent)  // ⇒ #99ccff

// Lightness 85% becomes 100%
cc`#e1d7d2`.lighten(0.3)  // ⇒ #ffffff

// Lightness 50% becomes 75%
cc`#8000ff`.lighten()  // ⇒ #c080ff

See also: adjust, %.

`mix`¶

Type: (color2: any-color, weight = 0.5: norm) → color

Returns a new color that’s a mixture of the current color and color2.

Both the weight and the relative opacity of each color determines how much of each color is in the result. A larger weight indicates that more of the current color should be used, and a smaller weight indicates that more of color2 should be used.

By default, the colors are mixed in equal proportions.

Examples:

cc`#036`.mix(cc`#d2e1dd`)  // ⇒ #698aa2

cc`#036`.mix(q`#d2e1dd`, 75 .percent)  // ⇒ #355f84

cc`#036`.mix('#d2e1dd', 25['%'])  // ⇒ #9eb6bf

cc`${0.5.byte} ${242} ${236} ${228}`.mix(cc`#6b717f`)  // ⇒ #8d9098

See also: %.

`opacify`¶

Type:	(`amount = 0.25`: `norm`) → `color`
Alias:	`fadeIn`

Makes the color more opaque by increasing the alpha channel by amount.

Examples:

cc`#806b717f`.opacify(0.2)  // ⇒ #b36b717f

cc`#80e1d7d2`.fadeIn(40['%'])  // ⇒ #e6e1d7d2

cc(rgba('#036', 0.3)).opacify(70['%'])  // ⇒ #003366

cc`#808000ff`.opacify()  // ⇒ #c08000ff

See also: adjust, %.

`saturate`¶

Type: (amount = 0.25: norm) → color

Makes the color more saturated by specified amount (by increasing the HSL saturation).

Examples:

// Saturation 50% becomes 70%
cc`#c69`.saturate(20 .percent)  // ⇒ #e05299

// Saturation 35% becomes 85%
cc`#f2ece4`.saturate(50['%'])  // ⇒ #fcedda

// Saturation 80% becomes 100%
cc`#0e4982`.saturate(0.3)  // ⇒ #004990

// Saturation 75% becomes 100%
cc`#8020df`.desaturate()  // ⇒ #8000ff

See also: adjust, %.

`scale`¶

Type: (change: offset-object) → color

Fluidly scales one or more properties of the color and returns a new adjusted instance of color.

Each keyword argument indicates how far the corresponding property of the color should be moved from its original position towards the maximum (if the argument is positive) or the minimum (if the argument is negative). This means that, for example, {hsl: {lightness: +50['%']}} will make a color 50% closer to maximum lightness without making it fully white.

Restrictions (for more details see offset-object):

alpha keyword can be specified separately.
Among rgb, hsl, hsv, and hwb, only one may be used at a time.
All keyword arguments are of type offset and optional.
Although it is possible to specify hue for HSL, HSV, or HWB keyword arguments, it doesn't make much sense because the menthal model of such a change is vague IMO.

Examples:

cc`#6b717f`.scale({rgb: {red: +15 .percent}})  // ⇒ #81717f

cc`#d2e1dd`.scale({
    hsl: {
        l: -10['%'],
        s: +10['%']
    }
})  // ⇒ #b3d4cb

cc`#998099`.scale({a: -40 .percent})  // ⇒ #99998099

See also: adjust, change, %, °.

`transparentize`¶

Type:	(`amount = 0.25`: `norm`) → `color`
Alias:	`fadeOut`

Makes the color less opaque by decreasing the alpha channel by amount.

Examples:

cc`#806b717f`.transparentize(20 .percent)  // ⇒ #4d6b717f

cc(rgba('#e1d7d2', 0.5)).fadeOut(40['%'])  // ⇒ #1ae1d7d2

cc(rgba('#036', 0.3)).transparentize(0.3)  // ⇒ #00003366

cc`#8000ff`.transparentize()  // ⇒ #bf8000ff

See also: adjust, %.

Properties¶

Category	Properties (and aliases)
Common	`alpha` (or `a`), `color` (or `qolor`), `rgb`, `valid`
RGB	`red`, `green`, `blue` (or just `r`, `g`, `b`)
HSL	`hue`, `saturation`, `lightness` (or `hslHue`, `hslSaturation`, `hslLightness`)
HSV	`hsvHue` (or just `hue`), `hsvSaturation`, `hsvValue`
HWB	`hue`, `whiteness`, `blackness` (or `hwbHue`, `hwbWhiteness`, `hwbBlackness`)

Own¶

`alpha`¶

Type:	`norm`
Alias:	`a`

Returns the alpha channel of the color.

`blackness`¶

Type:	`norm`
Alias:	`hwbBlackness`

Returns the HWB blackness of the color.

See also: hue, whiteness.

`blue`¶

Type:	`norm`
Alias:	`b`

Returns the RGB blue channel of the color.

See also: green, red.

`color`¶

Type:	`qolor`
Alias:	`qolor`

Returns the underlying Qt Quick's color.

`green`¶

Type:	`norm`
Alias:	`g`

Returns the RGB green channel of the color.

See also: blue, red.

`hue`¶

Type:	`norm`
Alias:	`hslHue`, `hsvHue`, `hwbHue`

Returns the HSL, HSV, or HWB hue of the color.

See also:

HSL: lightness, saturation
HSV: hsvSaturation, hsvValue
HWB: blackness, whiteness

`lightness`¶

Type:	`norm`
Alias:	`hslLightness`

Returns the HSL lightness of the color.

See also: hue, saturation.

`red`¶

Type:	`norm`
Alias:	`r`

Returns the RGB red channel of the color.

See also: blue, green.

`rgb`¶

Type: qolor

Returns the same color, but with alpha channel set to 100% (fully opaque).

See also: alpha, blue, green, red.

`saturation`¶

Type:	`norm`
Alias:	`hslSaturation`

Returns the HSL saturation of the color.

For HSV saturation, see hsvSaturation.

See also: hue, lightness.

`whiteness`¶

Type:	`norm`
Alias:	`hwbWhiteness`

Returns the HWB whiteness of the color.

See also: blackness, hue.

Inherited from Qt Quick's `color`¶

`a`¶

Same as alpha.

`b`¶

Same as blue.

`g`¶

Same as green.

`hslHue`¶

Same as hue.

`hslLightness`¶

Same as lightness.

`hslSaturation`¶

Same as saturation.

`hsvHue`¶

Same as hue.

`hsvSaturation`¶

Type: norm

Returns the HSV saturation of the color.

For HSL saturation, see saturation.

See also: hsvHue, hsvValue.

`hsvValue`¶

Type: norm

Returns the HSV value of the color.

See also: hsvHue, hsvSaturation.

`r`¶

Same as red.

`valid`¶

Type: boolean

Returns true if the color is valid and false otherwise. The only two ways of getting invalid colors in QML I found are:

Passing an invalid (for example, default-constructed QColor from C++.

Defining an uninitialized color property:

Item {
    property color myColor
    Component.onCompleted: {
        console.log(myColor.valid)  // ⇒ false
    }
}

The Color class¶

Methods¶

adjust¶

adjustHue¶

change¶

complement¶

darken¶

desaturate¶

grayscale¶

invert¶

lighten¶

mix¶

opacify¶

saturate¶

scale¶

transparentize¶

Properties¶

Own¶

alpha¶

blackness¶

blue¶

color¶

green¶

hue¶

lightness¶

red¶

rgb¶

saturation¶

whiteness¶

Inherited from Qt Quick's color¶

a¶

b¶

g¶

hslHue¶

hslLightness¶

hslSaturation¶

hsvHue¶

hsvSaturation¶

hsvValue¶

r¶

valid¶

The `Color` class¶

`adjust`¶

`adjustHue`¶

`change`¶

`complement`¶

`darken`¶

`desaturate`¶

`grayscale`¶

`invert`¶

`lighten`¶

`mix`¶

`opacify`¶

`saturate`¶

`scale`¶

`transparentize`¶

`alpha`¶

`blackness`¶

`blue`¶

`color`¶

`green`¶

`hue`¶

`lightness`¶

`red`¶

`rgb`¶

`saturation`¶

`whiteness`¶

Inherited from Qt Quick's `color`¶

`a`¶

`b`¶

`g`¶

`hslHue`¶

`hslLightness`¶

`hslSaturation`¶

`hsvHue`¶

`hsvSaturation`¶

`hsvValue`¶

`r`¶

`valid`¶