Root

Root component - Abyssale REST API

As mentioned before, the root element can be used to customise the background of your image.

Property	Description
background_color	2 filling modes are available: Monochrome: String: 6-8digits hexadecimal color Go to Monochrome Color documentation Linear gradient Go to Linear Gradient documentation

Monochrome Color

Monochrome supported formats are:

• 6 hexadecimal digits with a starting #:

  • Specified with: #RRGGBB. RR (red), GG (green) and BB (blue)

  • Example: #0000FF

• 8 hexadecimal digits with a starting #:

  • This format is an extended version of the 6 hexa digits, allowing to define an opacity to the color.

  • Specified with: #RRGGBBAA. RR (red), GG (green), BB (blue) and AA (alpha)

  • Example: #0000FF80 represents the blue color with a 50% opacity (80).

  • Here is the representation list of opacity (in percentage) to hexadecimal: (you can also find all values in this codepen)

Opacity (on a scale to 0-100)	AA (Alpha Hexadecimal)
0	00
5	0D
10	1A
20	33
30	4D
40	66
50	80
60	99
70	B3
80	CC
90	E6
100	FF

3 hexadecimal colors are not supported (such as#AAA)

Linear gradient

A linear gradient property can be used as background_color (banner background, button) & color (text).

The linear gradient format is represented as:

linear-gradient(x1% y1% x2% y2%,offset_color1% hexa_color1 opacity_color1,offset_color2% hexa_color2 opacity_color2)

Gradient properties	Description
x1, y1, x2, y2	Number (Percentage), can be negative. Define the straight line that will be used to draw the background.
offset_color1, offset_color2	Number (Percentage), can be negative. Define the offset of the starting & ending points (default: 0%, 100%)
hexa_color1, hexa_color2	String: 6 digits hexa color. Starting & ending colors
opacity_color1, opacity_color2	Float (between 0 & 1). Opacity of starting & ending colors

Examples:

Monochrome: "background_color": "#610000"
Linear gradient (horizontal): "background_color": "linear-gradient(0% 0% 100% 0%,0% #1a47ff 1,100% #b65151 1)"
Linear gradient (vertical): "background_color": "linear-gradient(0% 0% 0% 100%,0% #1a47ff 1,100% #b65151 1)"
Linear gradient (diagonal): "background_color": "linear-gradient(0% 0% 100% 100%,0% #1a47ff 1,100% #b65151 1)"