color QML Value Type
an ARGB color value. More...
Properties
- a : real
- b : real
- g : real
- hslHue : real
- hslLightness : real
- hslSaturation : real
- hsvHue : real
- hsvSaturation : real
- hsvValue : real
- r : real
- valid : bool
Detailed Description
The color
type refers to an ARGB color value. It can be specified in a number of ways:
- By a SVG color name, such as "red", "green" or "lightsteelblue".
- By a hexadecimal triplet or quad in the form
"#RRGGBB"
and"#AARRGGBB"
respectively. For example, the color red corresponds to a triplet of"#FF0000"
and a slightly transparent blue to a quad of"#800000FF"
. - Using the Qt.rgba(), Qt.hsva(), Qt.hsla(), Qt.darker(), Qt.lighter() or Qt.tint() functions.
Example:
Rectangle { color: "steelblue" width: 40; height: 40 } Rectangle { color: "transparent" y: 40; width: 40; height: 40 } Rectangle { color: "#FF0000" y: 80; width: 40; height: 40 } Rectangle { color: "#800000FF" y: 120; width: 40; height: 40 } Rectangle { color: "#00000000" // ARGB fully transparent y: 160 width: 40; height: 40 }
A color type has r, g, b, and a properties that refer to the red, green, blue and alpha values of the color, respectively. Additionally, the hsvHue, hsvSaturation, hsvValue, hslHue, hslSaturation, and hslLightness properties allow access to color values in HSV and HSL color models respectively.
Text { color: "red" // prints "1 0 0 1" Component.onCompleted: console.log(color.r, color.g, color.b, color.a) }
To test color values for equality, use the Qt.colorEqual() function. This allows colors to be accurately compared whether they are in property form or in any of the acceptable string specification forms.
When integrating with C++, note that any QColor value passed into QML from C++ is automatically converted into a color
value, and vice-versa.
This value type is provided by the QtQuick import.
SVG Color Reference
The following table lists the available SVG colors:
Name | Hex | Color |
---|---|---|
aliceblue | #f0f8ff | |
antiquewhite | #faebd7 | |
aqua | #00ffff | |
aquamarine | #7fffd4 | |
azure | #f0ffff | |
beige | #f5f5dc | |
bisque | #ffe4c4 | |
black | #000000 | |
blanchedalmond | #ffebcd | |
blue | #0000ff | |
blueviolet | #8a2be2 | |
brown | #a52a2a | |
burlywood | #deb887 | |
cadetblue | #5f9ea0 | |
chartreuse | #7fff00 | |
chocolate | #d2691e | |
coral | #ff7f50 | |
cornflowerblue | #6495ed | |
cornsilk | #fff8dc | |
crimson | #dc143c | |
cyan | #00ffff | |
darkblue | #00008b | |
darkcyan | #008b8b | |
darkgoldenrod | #b8860b | |
darkgray | #a9a9a9 | |
darkgreen | #006400 | |
darkgrey | #a9a9a9 | |
darkkhaki | #bdb76b | |
darkmagenta | #8b008b | |
darkolivegreen | #556b2f | |
darkorange | #ff8c00 | |
darkorchid | #9932cc | |
darkred | #8b0000 | |
darksalmon | #e9967a | |
darkseagreen | #8fbc8f | |
darkslateblue | #483d8b | |
darkslategray | #2f4f4f | |
darkslategrey | #2f4f4f | |
darkturquoise | #00ced1 | |
darkviolet | #9400d3 | |
deeppink | #ff1493 | |
deepskyblue | #00bfff | |
dimgray | #696969 | |
dimgrey | #696969 | |
dodgerblue | #1e90ff | |
firebrick | #b22222 | |
floralwhite | #fffaf0 | |
forestgreen | #228b22 | |
fuchsia | #ff00ff | |
gainsboro | #dcdcdc | |
ghostwhite | #f8f8ff | |
gold | #ffd700 | |
goldenrod | #daa520 | |
gray | #808080 | |
grey | #808080 | |
green | #008000 | |
greenyellow | #adff2f | |
honeydew | #f0fff0 | |
hotpink | #ff69b4 | |
indianred | #cd5c5c | |
indigo | #4b0082 | |
ivory | #fffff0 | |
khaki | #f0e68c | |
lavender | #e6e6fa | |
lavenderblush | #fff0f5 | |
lawngreen | #7cfc00 | |
lemonchiffon | #fffacd | |
lightblue | #add8e6 | |
lightcoral | #f08080 | |
lightcyan | #e0ffff | |
lightgoldenrodyellow | #fafad2 | |
lightgray | #d3d3d3 | |
lightgreen | #90ee90 | |
lightgrey | #d3d3d3 | |
lightpink | #ffb6c1 | |
lightsalmon | #ffa07a | |
lightseagreen | #20b2aa | |
lightskyblue | #87cefa | |
lightslategray | #778899 | |
lightslategrey | #778899 | |
lightsteelblue | #b0c4de | |
lightyellow | #ffffe0 | |
lime | #00ff00 | |
limegreen | #32cd32 | |
linen | #faf0e6 | |
magenta | #ff00ff | |
maroon | #800000 | |
mediumaquamarine | #66cdaa | |
mediumblue | #0000cd | |
mediumorchid | #ba55d3 | |
mediumpurple | #9370db | |
mediumseagreen | #3cb371 | |
mediumslateblue | #7b68ee | |
mediumspringgreen | #00fa9a | |
mediumturquoise | #48d1cc | |
mediumvioletred | #c71585 | |
midnightblue | #191970 | |
mintcream | #f5fffa | |
mistyrose | #ffe4e1 | |
moccasin | #ffe4b5 | |
navajowhite | #ffdead | |
navy | #000080 | |
oldlace | #fdf5e6 | |
olive | #808000 | |
olivedrab | #6b8e23 | |
orange | #ffa500 | |
orangered | #ff4500 | |
orchid | #da70d6 | |
palegoldenrod | #eee8aa | |
palegreen | #98fb98 | |
paleturquoise | #afeeee | |
palevioletred | #db7093 | |
papayawhip | #ffefd5 | |
peachpuff | #ffdab9 | |
peru | #cd853f | |
pink | #ffc0cb | |
plum | #dda0dd | |
powderblue | #b0e0e6 | |
purple | #800080 | |
red | #ff0000 | |
rosybrown | #bc8f8f | |
royalblue | #4169e1 | |
saddlebrown | #8b4513 | |
salmon | #fa8072 | |
sandybrown | #f4a460 | |
seagreen | #2e8b57 | |
seashell | #fff5ee | |
sienna | #a0522d | |
silver | #c0c0c0 | |
skyblue | #87ceeb | |
slateblue | #6a5acd | |
slategray | #708090 | |
slategrey | #708090 | |
snow | #fffafa | |
springgreen | #00ff7f | |
steelblue | #4682b4 | |
tan | #d2b48c | |
teal | #008080 | |
thistle | #d8bfd8 | |
tomato | #ff6347 | |
turquoise | #40e0d0 | |
violet | #ee82ee | |
wheat | #f5deb3 | |
white | #ffffff | |
whitesmoke | #f5f5f5 | |
yellow | #ffff00 | |
yellowgreen | #9acd32 |
See also QML Value Types.
Property Documentation
a : real |
The Alpha color channel of the RGBA model. Alpha depicts the opacity of each pixel.
b : real |
The Blue color channel of the RGBA model.
g : real |
The Green color channel of the RGBA model.
hslHue : real |
The HSL hue color component of the color.
hslLightness : real |
The HSL Lightness color component of the color.
hslSaturation : real |
The HSL Saturation color component of the color.
hsvHue : real |
The HSV Hue color component of the color.
hsvSaturation : real |
The HSV Saturation color component of the color.
hsvValue : real |
The HSV Value color component of the color.
r : real |
The Red color channel of the RGBA model.
valid : bool |
Returns True
if the color is valid; otherwise returns False
.