We use cookies to provide you with the best user experience possible on our website. Analysis programs are used to record and evaluate the use of the website and display advertisements on Google. For these reasons is why we collect, use and share data.

If you wish to continue using this website, please agree to the use of cookies and analysis programs.

Color palette - Farbpalette BS

Overview

close

Possible uses

You can continue to use these color palettes. Make them your own and exchange individual colors as you wish. Rate these color palettes and share them.

Find examples of linear and radial color transitions with two colors from this color palette.

The first three colors are preselected - if available. You can add or deselect them with the color icon at the bottom right of each color.

Easy for Web Design: Copy the CSS code for easy integration on your website.

Find examples of linear and radial color transitions with three colors from this color palette.

The first three colors are preselected - if available. You can add or deselect them with the color icon at the bottom right of each color.

Easy for Web Design: Copy the CSS code for easy integration on your website.

Lineal

HEX #000000 to HEX #FF0000


CSS-Code:

background-image: linear-gradient(135deg, #000000 -6%, #FF0000 105%);

Radial

HEX #000000 to HEX #FF0000


CSS-Code:

background-image: radial-gradient(circle, #000000 6%, #FF0000 194%);

HEX #000000 to HEX #B8DAE5


CSS-Code:

background-image: linear-gradient(135deg, #000000 -1%, #B8DAE5 93%);


HEX #000000 to HEX #B8DAE5


CSS-Code:

background-image: radial-gradient(circle, #000000 -5%, #B8DAE5 207%);

HEX #FF0000 to HEX #000000


CSS-Code:

background-image: linear-gradient(135deg, #FF0000 -9%, #000000 103%);


HEX #FF0000 to HEX #000000


CSS-Code:

background-image: radial-gradient(circle, #FF0000 10%, #000000 204%);

HEX #FF0000 to HEX #B8DAE5


CSS-Code:

background-image: linear-gradient(135deg, #FF0000 -4%, #B8DAE5 92%);


HEX #FF0000 to HEX #B8DAE5


CSS-Code:

background-image: radial-gradient(circle, #FF0000 4%, #B8DAE5 193%);

HEX #B8DAE5 to HEX #000000


CSS-Code:

background-image: linear-gradient(135deg, #B8DAE5 10%, #000000 101%);


HEX #B8DAE5 to HEX #000000


CSS-Code:

background-image: radial-gradient(circle, #B8DAE5 11%, #000000 202%);

HEX #B8DAE5 to HEX #FF0000


CSS-Code:

background-image: linear-gradient(135deg, #B8DAE5 -1%, #FF0000 103%);


HEX #B8DAE5 to HEX #FF0000


CSS-Code:

background-image: radial-gradient(circle, #B8DAE5 3%, #FF0000 204%);

Lineal

HEX #000000 over HEX #FF0000 to HEX #B8DAE5


CSS-Code:

background-image: linear-gradient(135deg, #000000 -6%, #FF0000 54%, #B8DAE5 103%);

Radial

HEX #000000 over HEX #FF0000 to HEX #B8DAE5


CSS-Code:

background-image: radial-gradient(circle, #000000 9%, #FF0000 57%, #B8DAE5 103%);

HEX #000000 over HEX #B8DAE5 to HEX #FF0000


CSS-Code:

background-image: linear-gradient(135deg, #000000 -4%, #B8DAE5 44%, #FF0000 103%);


HEX #000000 over HEX #B8DAE5 to HEX #FF0000


CSS-Code:

background-image: radial-gradient(circle, #000000 11%, #B8DAE5 56%, #FF0000 93%);

HEX #FF0000 over HEX #000000 to HEX #B8DAE5


CSS-Code:

background-image: linear-gradient(135deg, #FF0000 8%, #000000 55%, #B8DAE5 98%);


HEX #FF0000 over HEX #000000 to HEX #B8DAE5


CSS-Code:

background-image: radial-gradient(circle, #FF0000 9%, #000000 48%, #B8DAE5 98%);

HEX #FF0000 over HEX #B8DAE5 to HEX #000000


CSS-Code:

background-image: linear-gradient(135deg, #FF0000 14%, #B8DAE5 50%, #000000 103%);


HEX #FF0000 over HEX #B8DAE5 to HEX #000000


CSS-Code:

background-image: radial-gradient(circle, #FF0000 5%, #B8DAE5 58%, #000000 98%);

HEX #B8DAE5 over HEX #000000 to HEX #FF0000


CSS-Code:

background-image: linear-gradient(135deg, #B8DAE5 11%, #000000 46%, #FF0000 101%);


HEX #B8DAE5 over HEX #000000 to HEX #FF0000


CSS-Code:

background-image: radial-gradient(circle, #B8DAE5 -2%, #000000 55%, #FF0000 97%);

HEX #B8DAE5 over HEX #FF0000 to HEX #000000


CSS-Code:

background-image: linear-gradient(135deg, #B8DAE5 -9%, #FF0000 47%, #000000 107%);


HEX #B8DAE5 over HEX #FF0000 to HEX #000000


CSS-Code:

background-image: radial-gradient(circle, #B8DAE5 14%, #FF0000 46%, #000000 94%);

2-Color Gradients adjusted (12 pieces)

Show

3-Color Gradients adjusted (12 pieces)

Show