Functions¶

This page describes global functions

If you are looking for tagged literals or the Color class' methods, check the links.

Constructors¶

`qolor`¶

Type:	(`color`: `any-color`) → `qolor`
Alias:	`q`

Constructs a Qt Quick's color from any other color.

Examples:

q('indigo')  // ⇒ #4b0082

q(Qt.rgba(1, 1, 0, 1))  // ⇒ #ffff00

q(argb32`${0xCC}${255}${128}${0}`)  // ⇒ #ccff8000

q(cc`#789`)  // ⇒ #778899

`color`¶

Type:	(`color`: `any-color`) → `color`
Alias:	`cc`

Constructs an instance of the Color class from any other color.

Examples:

cc('indigo')  // ⇒ #4b0082

cc(Qt.rgba(1, 1, 0, 1))  // ⇒ #ffff00

cc(argb32`${0xCC}${255}${128}${0}`)  // ⇒ #ccff8000

cc(cc`#789`)  // ⇒ #778899

`rgba`¶

Type:	(`red`, `green`, `blue`, `alpha = 1.0`: `norm`) → `qolor` (`color`: `any-color`, `alpha = 1.0`: `norm`) → `qolor`	(1)
		(2)
Alias:	`rgb`

Creates a color either from RGBA parameters (1) or from a color and alpha (2). In the latter case, if the color has already some transparency, it will be overridden by a specified value of alpha channel.

If this function can't construct a color from its parameters, an exception is raised.

Examples:

rgba(0.5, 0, 1, 0.5)  // ⇒ #808000ff

rgba('#8000ff', 0.5)  // ⇒ #808000ff

rgba(1, 0.5, 0, 80['%'])  // ⇒ #ccff8000

(no alpha):

rgb(0, 87 .int, 0.72)  // ⇒ #0057b7
rgb(1, 0xD7.int, 0)  // ⇒ #ffd700

`rgba32`¶

Type:	(`red`, `green`, `blue`, `alpha = 255`: `8bit`) → `qolor` (`color`: `any-color`, `alpha = 255`: `8bit`) → `qolor`	(1)
		(2)
Alias:	`rgb24`

Creates a color either from RGBA parameters (1) or from a color and alpha (2). In the latter case, if the color has already some transparency, it will be overridden by a specified value of alpha channel.

If this function can't construct a color from its parameters, an exception is raised.

Examples:

rgba32(128, 0, 255, 128)  // ⇒ #808000ff

rgba32('#8000ff', 128)  // ⇒ #808000ff

rgba32(0xFF, 0x80, 0x00, 0xCC)  // ⇒ #ccff8000

(no alpha):

rgb24(0, 87, 183)  // ⇒ #0057b7
rgb24(255, 215, 0)  // ⇒ #ffd700

`argb`¶

Type: (alpha, red, green, blue: norm) → qolor

Creates a color from ARGB parameters.

If this function can't construct a color from its parameters, an exception is raised.

Examples:

argb(0.5, 0.5, 0, 1)  // ⇒ #808000ff

argb(80['%'], 1, 0.5, 0)  // ⇒ #ccff8000

`argb32`¶

Type: (alpha, red, green, blue: 8bit) → qolor

Creates a color from ARGB parameters.

If this function can't construct a color from its parameters, an exception is raised.

Examples:

argb32(128, 128, 0, 255)  // ⇒ #808000ff

argb32(0x80, 0.5.byte, 0, 0xFF)  // ⇒ #808000ff

argb32(204, 255, 128, 0)  // ⇒ #ccff8000

`hsla`¶

Type:	(`hue`, `saturation`, `lightness`, `alpha = 1.0`: `norm`) → `qolor`
Alias:	`hsl`

Creates a color from HSLA parameters.

If this function can't construct a color from its parameters, an exception is raised.

Examples:

hsla(0.75, 1, 0.5, 0.5)  // ⇒ #808000ff

hsla(
    270 .deg,
    100 .percent,
    50 .percent,
    50 .percent,
)  // ⇒ #808000ff

hsla(30['°'], 100['%'], 50['%'], 0xCC.int)  // ⇒ #ccff8000

(no alpha):

hsl(211 .deg, 100 .percent, 36 .percent)  // ⇒ #0057b7
hsl( 51 .deg, 100 .percent, 50 .percent)  // ⇒ #ffd700

`hsva`¶

Type:	(`hue`, `saturation`, `value`, `alpha = 1.0`: `norm`) → `qolor`
Alias:	`hsv`

Creates a color from HSVA parameters.

If this function can't construct a color from its parameters, an exception is raised.

Examples:

hsva(0.75, 1, 1, 0.5)  // ⇒ #808000ff

hsva(
    270 .deg,
    100 .percent,
    100 .percent,
    50 .percent
)  // ⇒ #808000ff

hsva(30['°'], 100['%'], 100['%'], 0xCC.int)  // ⇒ #ccff8000

(no alpha):

hsv(211 .deg, 100 .percent,  72 .percent)  // ⇒ #0057b7
hsv( 51 .deg, 100 .percent, 100 .percent)  // ⇒ #ffd700

`hwba`¶

Type:	(`hue`, `whiteness`, `blackness`, `alpha = 1.0`: `norm`) → `qolor`
Alias:	`hwb`

Creates a color from HWBA parameters.

If this function can't construct a color from its parameters, an exception is raised.

Examples:

hwba(0.75, 0, 0, 0.5)  // ⇒ #808000ff

hwba(
    270 .deg,
    0 .percent,
    0 .percent,
    50 .percent
)  // ⇒ #808000ff

hwba(30['°'], 0['%'], 0['%'], 0xCC.int)  // ⇒ #ccff8000

(no alpha):

hwb(211 .deg, 0 .percent,  28 .percent)  // ⇒ #0057b7
hwb( 51 .deg, 0 .percent,   0 .percent)  // ⇒ #ffd700

Modificators¶

How to access these functions

To avoid clashes with your own functions' names, all modifying functions are defined not globally but on the $ global object instead (similarly to jQuery¹).

It means that you can call them the following way:

$.invert('white')  // ⇒ #000000

Category	Functions (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: (color: any-color, change: offset-object) → qolor

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:

$.adjust('#6b717f', {rgb: {r: +15 .int}})  // ⇒ #7a717f

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

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

See also: change, scale, %, °.

`adjustHue`¶

Type:	(`color`: `any-color`, `offset`: `offset`) → `qolor`
Alias:	`spin`

Increases or decreases the color's hue.

Examples:

// Hue 222° becomes 282°
$.adjustHue('#6b717f', +60 .deg)  // ⇒ #796b7f

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

// Hue 210° becomes 255°
$.adjustHue('#036', +45 .deg)  // ⇒ #1a0066

See also: adjust, °.

`change`¶

Type: (color: any-color, change: change-object) → qolor

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:

$.change('#6b717f', {rgb: {r: 100 .int}})  // ⇒ #64717f

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

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

See also: adjust, scale, %, °.

`complement`¶

Type: (color: any-color) → qolor

Returns the RGB complement of the color.

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

Examples:

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

// Hue 164° becomes 344°
$.complement('#d2e1dd')  // ⇒ #e1d2d6

// Hue 210° becomes 30°
$.complement('#036')  // ⇒ #663300

See also: adjust, adjustHue, invert.

`darken`¶

Type: (color: any-color, amount = 0.25: norm) → qolor

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

Examples:

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

// Lightness 85% becomes 45%
$.darken('#f2ece4', 40 .percent)  // ⇒ #b08b5a

// Lightness 20% becomes 0%
$.darken('#036', 0.3)  // ⇒ #000000

// Lightness 50% becomes 25%
$.darken('#8000ff')  // ⇒ #000000

See also: adjust, %.

`desaturate`¶

Type: (color: any-color, amount = 0.25: norm) → qolor

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

Examples:

// Saturation 100% becomes 80%
$.desaturate('#036', 20 .percent)  // ⇒ #0a335c

// Saturation 35% becomes 15%
$.desaturate('#f2ece4', 20 .percent)  // ⇒ #eeebe8

// Saturation 20% becomes 0%
$.desaturate('#d2e1dd', 30 .percent)  // ⇒ #dadada

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

See also: adjust, %.

`grayscale`¶

Type:	(`color`: `any-color`) → `qolor`
Alias:	`greyscale`

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

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

Examples:

$.grayscale('#6b717f')  // ⇒ #757575

$.grayscale('#d2e1dd')  // ⇒ #dadada

$.greyscale('#036')  // ⇒ #333333

See also: change.

`invert`¶

Type: (color: any-color, weight = 1.0: norm) → qolor

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:

$.invert('#b37399')  // ⇒ #4c8c66

$.invert('black')  // ⇒ #ffffff

$.invert('#550e0cc', 20 .percent)  // ⇒ #663b3a

See also: complement, %.

`lighten`¶

Type: (color: any-color, amount = 0.25: norm) → qolor

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

Examples:

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

// Lightness 20% becomes 80%
$.lighten('#036', 60 .percent)  // ⇒ #99ccff

// Lightness 85% becomes 100%
$.lighten('#e1d7d2', 0.3)  // ⇒ #ffffff

// Lightness 50% becomes 75%
$.lighten('#8000ff')  // ⇒ #c080ff

See also: adjust, %.

`mix`¶

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

Returns a new color that’s a mixture of color1 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 color1 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:

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

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

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

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

See also: %.

`opacify`¶

Type:	(`color`: `any-color`, `amount = 0.25`: `norm`) → `qolor`
Alias:	`fadeIn`

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

Examples:

$.opacify('#806b717f', 0.2)  // ⇒ #b36b717f

$.fadeIn('#80e1d7d2', 40['%'])  // ⇒ #e6e1d7d2

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

$.opacify('#808000ff')  // ⇒ #c08000ff

See also: adjust, %.

`saturate`¶

Type: (color: any-color, amount = 0.25: norm) → qolor

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

Examples:

// Saturation 50% becomes 70%
$.saturate('#c69', 20 .percent)  // ⇒ #e05299

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

// Saturation 80% becomes 100%
$.saturate('#0e4982', 0.3)  // ⇒ #004990

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

See also: adjust, %.

`scale`¶

Type: (color: any-color, change: offset-object) → qolor

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 the 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:

$.scale('#6b717f', {rgb: {red: +15 .percent}})  // ⇒ #81717f

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

$.scale('#998099', {a: -40 .percent})  // ⇒ #99998099

See also: adjust, change, %, °.

`transparentize`¶

Type:	(`color`: `any-color`, `amount = 0.25`: `norm`) → `qolor`
Alias:	`fadeOut`

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

Examples:

$.transparentize('#806b717f', 20 .percent)  // ⇒ #4d6b717f

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

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

$.transparentize('#8000ff')  // ⇒ #bf8000ff

See also: adjust, %.

Utilities¶

How to access these functions

To avoid clashes with your own functions' names, all utility functions are defined not globally but on the $ global object instead.

Please, see examples below.

`textToColor`¶

Type: (text: string) → qolor

This function creates a unique (to some extent) color based on text.

It does guarantee that for the same text it always returns the same color.
It does not guarantee that for any two different texts the resulting colors will also be different.

Examples:

$.textToColor('Button')  // ⇒ #471352

let name = 'John'
$.textToColor`Hello, ${name}!!!`  // ⇒ #234a90

$.textToColor`Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit. Maecenas
    porttitor congue massa. Fusce posuere,
    magna sed pulvinar ultricies, purus
    lectus malesuada libero, sit amet
    commodo magna eros quis urna.`  // ⇒ #a9e52e

Oh, God, what have I done‽ ↩

Functions¶

Constructors¶

qolor¶

color¶

rgba¶

rgba32¶

argb¶

argb32¶

hsla¶

hsva¶

hwba¶

Modificators¶

adjust¶

adjustHue¶

change¶

complement¶

darken¶

desaturate¶

grayscale¶

invert¶

lighten¶

mix¶

opacify¶

saturate¶

scale¶

transparentize¶

Utilities¶

textToColor¶

`qolor`¶

`color`¶

`rgba`¶

`rgba32`¶

`argb`¶

`argb32`¶

`hsla`¶

`hsva`¶

`hwba`¶

`adjust`¶

`adjustHue`¶

`change`¶

`complement`¶

`darken`¶

`desaturate`¶

`grayscale`¶

`invert`¶

`lighten`¶

`mix`¶

`opacify`¶

`saturate`¶

`scale`¶

`transparentize`¶

`textToColor`¶