Color
There are many different way to define color in JSON
Hexadecimal number
The simplest way is by using hexadecimal numbers. You can do that be prefixing your number string with 0x, 0X or #. The format is AARRGGBB. If A (alpha) is not set, it defaults to full opacity
Example
{
"color": "#FFFFFF"
}The following formats can all have the alpha or a property, with a value from either 0.0 to 1.0 or from 0 to 255. If you want to use the 0.0 to 1.0 range you need use a .. 1 will use the 0 to 255 range and is very low. 1.0 will use the 0.0 to 1.0 range and is full opacity.
RGB
redorr: The red value from 0 to 255greenorg: The green value from 0 to 255blueorb: The blue value from 0 to 255
Example
{
"color": {
"r": 200,
"g": 0,
"b": 44,
"alpha": 1.0
}
}Here you can see how alpha can be added.
HSV
hueorh: The hue value from 0 to 360 (wraps around) (default is 0)saturationors: The saturation from 0.0 to 1.0 (default is 0.0)valueorv: The value from 0.0 to 1.0 (default is 1.0)
If value is not defined, HSL will be used.
Example
{
"color": {
"hue": 120,
"saturation": 0.5,
"value": 0.75
}
}HSL
hueorh: The hue value from 0 to 360 (wraps around) (default is 0)saturationors: The saturation from 0.0 to 1.0 (default is 0.0)lightnessorl: The value from 0.0 to 1.0 (default is 0.5)
Example
{
"color": {
"hue": 120,
"saturation": 0.5,
"lightness": 0.75
}
}Note
The saturation is not the same from HSV as from HSL (they are calculated slightly different), but the hue is.
CMYK
cyanorc: The cyan value from 0.0 to 1.0 (default is 1.0)magentaorm: The cyan value from 0.0 to 1.0 (default is 1.0)yellowory: The cyan value from 0.0 to 1.0 (default is 1.0)blackork: The cyan value from 0.0 to 1.0 (default is 1.0)
Example
{
"color": {
"c": 1.0,
"m": 0.5,
"y": 0.75,
"k": 0.2
}
}WARNING
You can NOT mix any of those formats! (except of course alpha)
Predefined colors
There is a shortcut for an invisible color:
{
"color": "invisible"
}Which is equal to
{
"color": "#00FFFFFF"
}Other predefined colors include for example red, blue and green. All predefined color ModularUI defines can be found here. You can also vary the shade of the predefined color by appending a ':' and a positive or negative integer. For example
{
"color": "red:2"
}This would choose red, but two steps brighter. Negative number means darker. Zero is the main color. How many shades there are for a color is not constant. You will have to look it up at the page above.
brachy84
Nullpinter