# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nftembed.org/custom-styling/fonts-and-colors/colors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.