# qolor vs color¶

When it comes to choosing between qolor and color, it solely depends on the matter of your taste.

There are three key differences:

1. color is a wrapper around qolor, so you can't assign it directly to QML's color property. You need to unwrap it first.
2. qolor misses some properties that color has. For example, it lacks HWB support completely.
3. You can chain color transformations on color via dot-syntax, but not on qolor where you have to use procedural style with functions.

I'll demonstrate these and other differences on the examples below:

## Examples¶

### Creating a color¶

#### using a color keyword in QML¶

Rectangle {
color: qindigo
}

Rectangle {
color: ccindigo.color
}


#### using a color keyword in JS¶

Item {
Component.onCompleted: {
const c = qindigo
console.log('RGB:', c.r, c.g, c.b)
}
}

Item {
Component.onCompleted: {
const c = ccindigo
console.log('RGB:', c.r, c.g, c.b)
}
}


#### using an ARGB literal¶

Rectangle {
color: q#cc8000ff
}

Rectangle {
color: cc#cc8000ff.color
}


#### using an RGB32 literal¶

Rectangle {
color: q${128}${0} ${255} }  Rectangle { color: cc${128} ${0}${255}.color
}


### Accessing color components separately¶

#### Changing hue and saturation manually¶

Rectangle {
color: {
let c = qindigo
c.hslHue = 270 / 360
c.hslSaturation += 0.1
return c
}
}

Rectangle {
color: {
let c = ccindigo
c.hue = 270['°']
c.saturation += 10['%']
return c.color
}
}


#### Printing as HWB¶

// no support

Item {
function printAsHwb({hue: h, blackness: b, whiteness: b}) {
const fl = Math.floor
console.log(hwb(${fl(h * 360)}°,${fl(w * 100)}%, ${fl(b * 100)}%)) } Component.onCompleted: { printAsHwb(ccindigo) // ⇒ hwb(275°, 0%, 49%) } }  ### Modification of a color¶ #### Inverting a color¶ Rectancle { color:$.invert(qindigo)
}

Rectangle {
color: ccindigo.invert().color
}


#### Chain of modifications¶

Rectangle {
color:
$.adjust($.mix(
$.desaturate($.adjustHue(cc#0000ff, -105 .deg),
20 .percent),
'red', 85 .percent),
{alpha: -30 .percent})
}

Rectangle {
color: cc#0000ff

As you can see from examples, in most cases it's enough to use qolor and modifying functions. The real beauty of color comes when you need to chain modifications as methods or when you need to work with extended set of properties (for example, with HWB).
{"extraction_info": {"found_math": true, "script_math_tex": 0, "script_math_asciimath": 0, "math_annotations": 0, "math_alttext": 0, "mathml": 0, "mathjax_tag": 0, "mathjax_inline_tex": 1, "mathjax_display_tex": 0, "mathjax_asciimath": 1, "img_math": 0, "codecogs_latex": 0, "wp_latex": 0, "mimetex.cgi": 0, "/images/math/codecogs": 0, "mathtex.cgi": 0, "katex": 0, "math-container": 0, "wp-katex-eq": 0, "align": 0, "equation": 0, "x-ck12": 0, "texerror": 0, "math_score": 0.5399907827377319, "perplexity": 27923.81521896043}, "config": {"markdown_headings": true, "markdown_code": true, "boilerplate_config": {"ratio_threshold": 0.18, "absolute_threshold": 10, "end_threshold": 15, "enable": true}, "remove_buttons": true, "remove_image_figures": true, "remove_link_clusters": true, "table_config": {"min_rows": 2, "min_cols": 3, "format": "plain"}, "remove_chinese": true, "remove_edit_buttons": true, "extract_latex": true}, "warc_path": "s3://commoncrawl/crawl-data/CC-MAIN-2023-14/segments/1679296946445.46/warc/CC-MAIN-20230326173112-20230326203112-00664.warc.gz"}