The Front.Space AI Background Color Parameter leverages a suite of sophisticated deep-learning algorithms to accurately detect the main foreground object(s) in a photograph and effortlessly apply the background color of your preference within a matter of seconds.

To set the image's background color, use the background parameter (b in URLs). You can see the image background when padding is added with one of the padding crop modes when rounding corners, when adding overlays, and with semi-transparent PNGs and GIFs.

An opaque color can be set using one of the following methods:

For example, the uploaded transparent image named sample padded to a width and height of 300 pixels with a blue background:



When using the background parameter to set the background color of a text overlay, you can also set the color to predominant_contrast. This selects the strongest contrasting color to the predominant color while taking all pixels in the image into account.

For example, b_auto:predominant.

You may check out the full transformation syntax Background Color URL Transformation API Documentation

Other API References: e_background_removal | e (efects) | Transformation Basics and URL Structure

To automatically set the background color to the most prominent color in the image when applying one of the padding crop modes (pad, lpad, mpad, or fill_pad), simply set the background parameter to "auto" (b_auto in URLs). The parameter also accepts additional values for more precise color selection:

For Example:

You can also apply a padding gradient fade effect with the predominant colors in the image by adjusting the value of the b_auto parameter as follows:

b_auto:[gradient_type]:[number]:[direction]

The "gradient_type" parameter can have one of the following values:

The "number" parameter specifies the number of predominant colors to select. It can have the values of either 2 or 4. The default value is 2.

The "direction" parameter specifies the direction to blend the colors together. If 2 colors are selected, it can have the values: horizontal, vertical, diagonal_desc, and diagonal_asc. If 4 colors are selected, each color gets interpolated between the four corners. The default value is horizontal.

For Example:

To add a custom color palette, use the following format: b_auto:palette_color1_color2_color3

This will limit the selected color to one of the colors in the provided palette. After calculating the predominant color, the closest color from the palette will be chosen. For example, to automatically add padding and limit the color choices to green, red, and blue, use: b_auto:palette_green_red_blue.

You can combine the palette with any of the available values for b_auto, and you can select the same color from the palette multiple times when requesting multiple predominant colors.

For instance, if you want padding with a width and height of 300 pixels, a 4-color gradient fade in the auto-colored padding, and you want to limit the possible colors to red, green, blue, and orange, you can use the following format: b_auto:palette_red_green_blue_orange

For Example:

Using Front.Space, you can fade the image into the added padding by applying the gradient_fade effect using the symmetric_pad value (e_gradient_fade:symmetric_pad in URLs). This will blend the padding seamlessly into the edge of the image.

You can adjust the strength of the blending effect by specifying an additional value separated by a colon (range: 0 to 100, default: 20).

You can also specify the position of the gradient effect using percentages (range: 0.0 to 1.0) or pixels (integer values) to indicate how far into the image the gradient should be applied. By default, the gradient is applied 30% to the image (x_0.3).

For example, if you want to add padding to the sample image with a width and height of 300 pixels, set the background color to the predominant color, and apply a gradient fade effect between the added padding and 50% into the image.

For Example: