Finding a good color palette for your project can be difficult. I’d love to learn the mysterious formulas behind harmonic color patterns, but so far coming up with suitable combinations has been mostly a matter of trial and error: the examples below are no different. If you don’t want to go through the hassle of inventing the schemes yourself, Adobe’s Kuler website is filled with ready-made palettes.
Randomly colored wall of horizontal strips
Show code »
ColorColumn.qml:
import QtQuick 1.0 Column { width: 800; height: 400 property real pixelsPerRelativeHeight function rectangleColor() { var value = Math.random() var red = value < 0.4 ? 0.8+0.2*Math.random() : 0.1+0.4*Math.random() var green = value > 0.4 && value < 0.8 ? 0.7+0.3*Math.random() : 0.4+0.3*Math.random() var blue = value > 0.8 ? 0.6+0.2*Math.random() : 0.2*Math.random() return Qt.rgba(red, green, blue) } Component.onCompleted: { var totalRelativeHeight = 0 for (var index = 0; index < children.length; index++) { if (children[index] !== repeater) totalRelativeHeight += children[index].relativeHeight } pixelsPerRelativeHeight = height/totalRelativeHeight } Repeater { id: repeater model: 40 Rectangle { width: parent.width color: rectangleColor() height: Math.ceil(relativeHeight*pixelsPerRelativeHeight) property real value: Math.random() property real relativeHeight: Math.pow(Math.random(),3) } } }
Randomly colored wall of vertical strips
Show code »
ColorRow.qml:
import QtQuick 1.0 Row { width: 800; height: 400 property real pixelsPerRelativeWidth function rectangleColor() { var isRed = Math.random() < 0.1 var grayness = 0.2+0.6*Math.random() var red = isRed ? grayness+0.6*Math.random()*(1-grayness) : grayness var green = isRed ? 0.5*grayness+0.5*Math.random()*grayness : 1.3*grayness var blue = isRed ? 0.8*grayness+0.4*Math.random()*grayness : 1.3*grayness return Qt.rgba(red, green, blue) } Component.onCompleted: { var totalRelativeWidth = 0 for (var index = 0; index < children.length; index++) { if (children[index] !== repeater) totalRelativeWidth += children[index].relativeWidth } pixelsPerRelativeWidth = width/totalRelativeWidth } Repeater { id: repeater model: 80 Rectangle { height: parent.height color: rectangleColor() width: Math.ceil(relativeWidth*pixelsPerRelativeWidth) property real relativeWidth: Math.pow(Math.random(),3) } } }
Vertical segments of horizontal strips
Show code »
colorstrips_rowofcolumns.qml:
import QtQuick 1.0 Row { width: 800; height: 400 property real pixelPerRelativeWidth Component.onCompleted: { var totalRelativeWidth = 0 for (var index = 0; index < children.length; index++) { if (children[index] !== repeater) totalRelativeWidth += children[index].relativeWidth } pixelPerRelativeWidth = width/totalRelativeWidth } Repeater { id: repeater model: 50 ColorColumn { height: parent.height width: Math.ceil(relativeWidth*pixelPerRelativeWidth) property real relativeWidth: Math.pow(Math.random(),3) function rectangleColor() { var value = Math.random() var blue = value < 0.4 ? 0.8+0.2*Math.random() : 0.1+0.4*Math.random() var red = value > 0.4 && value < 0.8 ? 0.7+0.3*Math.random() : 0.4+0.3*Math.random() var green = value > 0.8 ? 0.2+0.2*Math.random() : 0.2*Math.random() return Qt.rgba(red, green, blue) } } } }
Horizontal segments of vertical strips
Show code »
colorstrips_columnofrows.qml:
import QtQuick 1.0 Column { width: 800; height: 400 property real pixelsPerRelativeHeight Component.onCompleted: { var totalRelativeHeight = 0 for (var index = 0; index < children.length; index++) { if (children[index] !== repeater) totalRelativeHeight += children[index].relativeHeight } pixelsPerRelativeHeight = height/totalRelativeHeight } Repeater { id: repeater model: 40 ColorRow { width: parent.width height: Math.ceil(relativeHeight*pixelsPerRelativeHeight) property real relativeHeight: Math.pow(Math.random(),3) function rectangleColor() { var isBlue = Math.random() < 0.2 var grayness = 0.2+0.6*Math.random() var red = isBlue ? 0.5*grayness+0.5*Math.random()*grayness : grayness var green = isBlue ? grayness+0.6*Math.random()*(1-grayness) : 1.3*grayness var blue = isBlue ? 0.7*grayness+0.3*Math.random()*grayness : 1.3*grayness return Qt.rgba(red, green, blue) } } } }