Skip to content
A QtQuick/QML component to interpolate colors.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A QtQuick/QML component to interpolate colors.


There is no installation needed, the component is only made of QML and works out of the box.



Run ColorInterpolationExample.qml with the Qt qmlviewer tool and play with the sliders to see the interpolated colors.

How to integrate the ColorInterpolation

First, copy the ColorInterpolation folder in a path which is loaded with the QML engine and do not forget the import "ColorInterpolation".

A ColorInterpolation and ColorStop work the same way Gradient and GradientStop work. You need to provide several ColorStops inside a ColorInterpolation. ColorStop takes a standard color and a real indicating the color position in the interpolated range.

ColorInterpolation {
    id: interpolation
    stops: [
        ColorStop { position: [...]; color: [...] }

Then, you need to call interpolation.getColorAt(value) to get the interpolated color at the value position of the range.

And, that's it!


This project has been released under the LGPL 3 license. Please refer to LICENSE.GPL and LICENSE.LGPL for more information.


  • Make the stops property the default value of the ColorInterpolation element. stops is a list, and list properties marked as default are not supported by Qt 4.8 (it will be in Qt 5.0).
You can’t perform that action at this time.