Color Palette
The Color Palette component is an utility to automatically build a color palette, to use within your apps, from a single HEX color code.
comColorPalette Build a Color Palette based on a single Hex Color Code.
When you need to change the color you have set everywhere, it can be complicated to complete and can leads to mistakes. Using a color palette is the fastest way to apply an uniform set of colors on your controls. Using that component, updating colors everywhere is a matter of seconds: you only need to update a single color code, and the component will do the rest of the work for you.
You must initialize the component using the Create() action. There is 2 possibilities:
- If you know which hexadecimal color code you wish to use, the formula will be:
Component.Create("#84c32b");, - If you want to create a color palette from a random color, the formula will be:
Component.Create();.
Properties are accessibles under Component.Colors. The structure of the record is:
{
Color: "#afd875ff",
Dec: {
R: 117,
G: 216,
B: 175
},
Font: "#141414ff",
Hex: "#AFD875",
IsDark: false,
IsLight: true,
Shade: "light"
}
The component only need one hexadecimal color code to create your color palette. The palette also include a Font color you can use to set the Color property of controls, so users will be able to read the text.
For each color, the palette provides a Font value, which is the color to use for the text placed over that color. It is calculated using the color's brightness level, insuring the text will be readable.
If the color is light, the text will be dark; same for the opposite: if the color is dark, the text will be light.
To calculate the brightness level of a color, the following formula is used:
If the result is less than the threshold of 130, it means the color is dark (i.e. the perceived brigthness is dark).
| Color | Transformation |
|---|---|
| Main color | As is |
| Alternate color | 35% lighter than Main color |
| Tertiary color | 27% darker than Main color |
| Background color | 92% lighter than Main color |
The Library contains the Color Palette Screen, in which you can try the Component by yourself.
Enter an Hexadecimal Color Code and click "Mix Colors!". You can also click "Mix Random!" to generate a random Hex Color Code. You will see the Colors and the Record that holds the Color Palette you can use.