Skip to content

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: q`indigo`
}

Rectangle {
    color: cc`indigo`.color
}

using a color keyword in JS

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

Item {
    Component.onCompleted: {
        const c = cc`indigo`
        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 = q`indigo`
        c.hslHue = 270 / 360
        c.hslSaturation += 0.1
        return c
    }
}

Rectangle {
    color: {
        let c = cc`indigo`
        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(cc`indigo`)  // ⇒ hwb(275°, 0%, 49%)
    }
}

Modification of a color

Inverting a color

Rectancle {
    color: $.invert(q`indigo`)
}

Rectangle {
    color: cc`indigo`.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`
            .adjustHue(-105 .deg)
            .desaturate(20 .percent)
            .mix('red', 85 .percent)
            .adjust({alpha: -30 .percent})
            .color
}

Instead of conclusion

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).