# Colors

The <mark style="color:yellow;">`color`</mark> property is used to set the color of fonts, backgrounds and other components.&#x20;

Colors are specified by either:

* Standard color name: "<mark style="background-color:red;">red</mark>"
* HEX value: "<mark style="background-color:red;">#ff0000</mark>"
* RGB value: "<mark style="background-color:red;">rgb(255,0,0)</mark>"

### Background Color

To adjust the background color of elements, utilize “**backgroundColor**”

```jsx
    "backgroundColor": "black", // the color of an elements background
```

### Font Color

To adjust the color of text and other elements, utilize “**color**”

```jsx
 },
  "metadata": { // metadata properties box = MPB
    "backgroundColor": "black", 
    "fontSize": "12px", 
    "color": "white",                                     
    "margin": "0.2rem", 
```

### Gradients

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

{% hint style="info" %}
**how linear gradients work:** linear-gradient(direction, color-stop1, color-stop2, ...)
{% endhint %}

```jsx
"background": "linear-gradient(170deg, #bceb00 15.57%, #00eaea 84.88%)",
```

### Code Presets

*copy + paste within the brackets* (...)

#### Colors

* Any standard color of the rainbow will reflect
* <mark style="background-color:red;">red</mark>, <mark style="background-color:blue;">blue</mark>, <mark style="background-color:green;">green</mark>, <mark style="background-color:purple;">purple</mark>, <mark style="background-color:yellow;">yellow</mark>, <mark style="background-color:orange;">orange,</mark>
* You may also use additional colors by appending the color with either light or dark
* dark red light red etc.
* <mark style="color:red;background-color:red;">`darkred`</mark> or <mark style="color:yellow;">`lightyellow`</mark>

#### Gradient Directions

* 180deg, #bceb00 15.57%, #00eaea 84.88% = **vertical**&#x20;
* 360deg #bceb00 15.57%, #00eaea 84.88% = **flipped vertical**&#x20;
* to right, #bceb00 15.57%, #00eaea 84.88% = **right facing**&#x20;
* to left, #bceb00 15.57%, #00eaea 84.88% = **left facing**&#x20;
* to right, rgba(255,0,0,0), rgba(255,0,0,1) = **gradient with transparency**

{% hint style="warning" %}
**Important:** High contrast is critical for people who have imperfect vision.\
\
Some tools have the ability to measure and monitor contrast!
{% endhint %}