Struggling with colors?

Now you have an easier way of doing simple color transformations in QML bindings. See the example below:

Rectangle { id: r1; color: 'red' }

Rectangle {
    // oh god, I just wanted to add some transparency
    color: Qt.rgba(r1.color.r, r1.color.g, r1.color.b, 0.8)
}

What if you could write it like this?

Rectangle {
    color: rgba(r1.color, 0.8)
}

Or even like this?

Rectangle {
    color: $.fadeOut(r1.color, 20 .percent)
}

Interested? Then welcome aboard! Let's see some examples.

With this library you can…

…construct color objects

in many various ways

Rectangle {
    color: rgba('indigo', 0.8)  // ⇒ #cc4b0082 (as ARGB)
}

Rectangle {
    color: q`#036`  // ⇒ #003366
}

Rectangle {
    color: q`r:${128} g:${0} b:${255}`  // ⇒ #8000ff
}

And even imperatively out of color-properties

Item {
    Component.onCompleted: {
        const c = q`yellow`       // It looks like a string, but it's an object!

        // this is expected
        console.log(q`yellow`)    // ⇒ #ffff00

        // but let's try this
        console.log(q`yellow`.r)  // ⇒ 1.0
        console.log(q`yellow`.g)  // ⇒ 1.0
        console.log(q`yellow`.b)  // ⇒ 0.0
    }
}

…use units

Rectangle {
    color: $.adjustHue('#036', +45['°'])   // ⇒ #1a0066
}

Rectangle {
    color: cc`#036`.lighten(60 .percent).color  // ⇒ #99ccff
}

…rely on a whole bunch of auxiliary color functions

Rectangle {
    color: $.mix('#036', '#d2e1dd', 75['%'])  // ⇒ #355f84
}

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

Rectangle {
    color: $.desaturate('#f2ece4', 20 .percent)  // ⇒ #eeebe8
}

…chain as many transformations as you need

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

…work with `color`s imperatively

Rectangle {
    color: {
        let newColor = cc`darkorange`
        console.log(newColor)  // ⇒ #ffa500
        console.log(newColor.hue, newColor.saturation)  // ⇒ 0.108 1.0
        newColor.hue = 20 .deg
        newColor.saturation = 65 .percent
        console.log(newColor)  // ⇒ #d2642d
        return newColor.color
    }
}

…and maybe something else

but I don't even remember.

Wanna use it?

Convinced? Get started now!

Not yet? Anyway, read the documentation and you'll change your mind.

Your browser is out-of-date!

All products

Show12243648

QML-colors

Breeze Icons

Show12 24 36 48