Colors
The
color property is used to set the color of fonts, backgrounds and other components. Colors are specified by either:
- Standard color name: "red"
- HEX value: "#ff0000"
- RGB value: "rgb(255,0,0)"
To adjust the background color of elements, utilize “backgroundColor”
"backgroundColor": "black", // the color of an elements background
To adjust the color of text and other elements, utilize “color”
},
"metadata": { // metadata properties box = MPB
"backgroundColor": "black",
"fontSize": "12px",
"color": "white",
"margin": "0.2rem",
To harness unique color designs/transitions, you can use gradients. Like the greenish-blue transition on the embed, they can get adjusted with the “background” variable.
They can also get incorporated wherever a color variable is present
how linear gradients work: linear-gradient(direction, color-stop1, color-stop2, ...)
"background": "linear-gradient(170deg, #bceb00 15.57%, #00eaea 84.88%)",
copy + paste within the brackets (...)
- Any standard color of the rainbow will reflect
- red, blue, green, purple, yellow, orange,
- You may also use additional colors by appending the color with either light or dark
- dark red light red etc.
darkredorlightyellow
- 180deg, #bceb00 15.57%, #00eaea 84.88% = vertical
- 360deg #bceb00 15.57%, #00eaea 84.88% = flipped vertical
- to right, #bceb00 15.57%, #00eaea 84.88% = right facing
- to left, #bceb00 15.57%, #00eaea 84.88% = left facing
- to right, rgba(255,0,0,0), rgba(255,0,0,1) = gradient with transparency
Important: High contrast is critical for people who have imperfect vision.
Some tools have the ability to measure and monitor contrast!
Last modified 10mo ago