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 - NoemiF_Farben

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 #F02828 to HEX #F0C828


CSS-Code:

background-image: linear-gradient(115deg, #F02828 0%, #F0C828 105%);

Radial

HEX #F02828 to HEX #F0C828


CSS-Code:

background-image: radial-gradient(circle, #F02828 14%, #F0C828 200%);

HEX #F02828 to HEX #F028C8


CSS-Code:

background-image: linear-gradient(115deg, #F02828 -8%, #F028C8 103%);


HEX #F02828 to HEX #F028C8


CSS-Code:

background-image: radial-gradient(circle, #F02828 9%, #F028C8 191%);

HEX #F02828 to HEX #2878C8


CSS-Code:

background-image: linear-gradient(115deg, #F02828 -8%, #2878C8 95%);


HEX #F02828 to HEX #2878C8


CSS-Code:

background-image: radial-gradient(circle, #F02828 -4%, #2878C8 194%);

HEX #F0C828 to HEX #F02828


CSS-Code:

background-image: linear-gradient(115deg, #F0C828 2%, #F02828 88%);


HEX #F0C828 to HEX #F02828


CSS-Code:

background-image: radial-gradient(circle, #F0C828 4%, #F02828 189%);

HEX #F0C828 to HEX #F028C8


CSS-Code:

background-image: linear-gradient(115deg, #F0C828 5%, #F028C8 94%);


HEX #F0C828 to HEX #F028C8


CSS-Code:

background-image: radial-gradient(circle, #F0C828 14%, #F028C8 200%);

HEX #F0C828 to HEX #2878C8


CSS-Code:

background-image: linear-gradient(115deg, #F0C828 5%, #2878C8 90%);


HEX #F0C828 to HEX #2878C8


CSS-Code:

background-image: radial-gradient(circle, #F0C828 -7%, #2878C8 197%);

HEX #F028C8 to HEX #F02828


CSS-Code:

background-image: linear-gradient(115deg, #F028C8 0%, #F02828 102%);


HEX #F028C8 to HEX #F02828


CSS-Code:

background-image: radial-gradient(circle, #F028C8 7%, #F02828 205%);

HEX #F028C8 to HEX #F0C828


CSS-Code:

background-image: linear-gradient(115deg, #F028C8 14%, #F0C828 93%);


HEX #F028C8 to HEX #F0C828


CSS-Code:

background-image: radial-gradient(circle, #F028C8 0%, #F0C828 201%);

HEX #F028C8 to HEX #2878C8


CSS-Code:

background-image: linear-gradient(115deg, #F028C8 -6%, #2878C8 104%);


HEX #F028C8 to HEX #2878C8


CSS-Code:

background-image: radial-gradient(circle, #F028C8 7%, #2878C8 191%);

HEX #2878C8 to HEX #F02828


CSS-Code:

background-image: linear-gradient(115deg, #2878C8 8%, #F02828 108%);


HEX #2878C8 to HEX #F02828


CSS-Code:

background-image: radial-gradient(circle, #2878C8 0%, #F02828 191%);

HEX #2878C8 to HEX #F0C828


CSS-Code:

background-image: linear-gradient(115deg, #2878C8 5%, #F0C828 94%);


HEX #2878C8 to HEX #F0C828


CSS-Code:

background-image: radial-gradient(circle, #2878C8 0%, #F0C828 202%);

HEX #2878C8 to HEX #F028C8


CSS-Code:

background-image: linear-gradient(115deg, #2878C8 9%, #F028C8 107%);


HEX #2878C8 to HEX #F028C8


CSS-Code:

background-image: radial-gradient(circle, #2878C8 -4%, #F028C8 190%);

Lineal

HEX #F02828 over HEX #F0C828 to HEX #F028C8


CSS-Code:

background-image: linear-gradient(115deg, #F02828 14%, #F0C828 52%, #F028C8 95%);

Radial

HEX #F02828 over HEX #F0C828 to HEX #F028C8


CSS-Code:

background-image: radial-gradient(circle, #F02828 1%, #F0C828 57%, #F028C8 107%);

HEX #F02828 over HEX #F0C828 to HEX #2878C8


CSS-Code:

background-image: linear-gradient(115deg, #F02828 11%, #F0C828 42%, #2878C8 92%);


HEX #F02828 over HEX #F0C828 to HEX #2878C8


CSS-Code:

background-image: radial-gradient(circle, #F02828 6%, #F0C828 55%, #2878C8 99%);

HEX #F02828 over HEX #F028C8 to HEX #F0C828


CSS-Code:

background-image: linear-gradient(115deg, #F02828 3%, #F028C8 43%, #F0C828 108%);


HEX #F02828 over HEX #F028C8 to HEX #F0C828


CSS-Code:

background-image: radial-gradient(circle, #F02828 4%, #F028C8 45%, #F0C828 104%);

HEX #F02828 over HEX #F028C8 to HEX #2878C8


CSS-Code:

background-image: linear-gradient(115deg, #F02828 13%, #F028C8 53%, #2878C8 88%);


HEX #F02828 over HEX #F028C8 to HEX #2878C8


CSS-Code:

background-image: radial-gradient(circle, #F02828 8%, #F028C8 47%, #2878C8 109%);

HEX #F02828 over HEX #2878C8 to HEX #F0C828


CSS-Code:

background-image: linear-gradient(115deg, #F02828 14%, #2878C8 58%, #F0C828 98%);


HEX #F02828 over HEX #2878C8 to HEX #F0C828


CSS-Code:

background-image: radial-gradient(circle, #F02828 -8%, #2878C8 52%, #F0C828 100%);

HEX #F02828 over HEX #2878C8 to HEX #F028C8


CSS-Code:

background-image: linear-gradient(115deg, #F02828 9%, #2878C8 54%, #F028C8 97%);


HEX #F02828 over HEX #2878C8 to HEX #F028C8


CSS-Code:

background-image: radial-gradient(circle, #F02828 8%, #2878C8 58%, #F028C8 87%);

HEX #F0C828 over HEX #F02828 to HEX #F028C8


CSS-Code:

background-image: linear-gradient(115deg, #F0C828 7%, #F02828 46%, #F028C8 98%);


HEX #F0C828 over HEX #F02828 to HEX #F028C8


CSS-Code:

background-image: radial-gradient(circle, #F0C828 -5%, #F02828 45%, #F028C8 109%);

HEX #F0C828 over HEX #F02828 to HEX #2878C8


CSS-Code:

background-image: linear-gradient(115deg, #F0C828 -9%, #F02828 50%, #2878C8 103%);


HEX #F0C828 over HEX #F02828 to HEX #2878C8


CSS-Code:

background-image: radial-gradient(circle, #F0C828 -9%, #F02828 53%, #2878C8 109%);

HEX #F0C828 over HEX #F028C8 to HEX #F02828


CSS-Code:

background-image: linear-gradient(115deg, #F0C828 -3%, #F028C8 48%, #F02828 104%);


HEX #F0C828 over HEX #F028C8 to HEX #F02828


CSS-Code:

background-image: radial-gradient(circle, #F0C828 4%, #F028C8 51%, #F02828 87%);

HEX #F0C828 over HEX #F028C8 to HEX #2878C8


CSS-Code:

background-image: linear-gradient(115deg, #F0C828 10%, #F028C8 43%, #2878C8 104%);


HEX #F0C828 over HEX #F028C8 to HEX #2878C8


CSS-Code:

background-image: radial-gradient(circle, #F0C828 7%, #F028C8 46%, #2878C8 99%);

HEX #F0C828 over HEX #2878C8 to HEX #F02828


CSS-Code:

background-image: linear-gradient(115deg, #F0C828 5%, #2878C8 55%, #F02828 104%);


HEX #F0C828 over HEX #2878C8 to HEX #F02828


CSS-Code:

background-image: radial-gradient(circle, #F0C828 1%, #2878C8 45%, #F02828 97%);

HEX #F0C828 over HEX #2878C8 to HEX #F028C8


CSS-Code:

background-image: linear-gradient(115deg, #F0C828 7%, #2878C8 50%, #F028C8 101%);


HEX #F0C828 over HEX #2878C8 to HEX #F028C8


CSS-Code:

background-image: radial-gradient(circle, #F0C828 3%, #2878C8 51%, #F028C8 109%);

HEX #F028C8 over HEX #F02828 to HEX #F0C828


CSS-Code:

background-image: linear-gradient(115deg, #F028C8 -9%, #F02828 49%, #F0C828 108%);


HEX #F028C8 over HEX #F02828 to HEX #F0C828


CSS-Code:

background-image: radial-gradient(circle, #F028C8 5%, #F02828 55%, #F0C828 86%);

HEX #F028C8 over HEX #F02828 to HEX #2878C8


CSS-Code:

background-image: linear-gradient(115deg, #F028C8 -4%, #F02828 48%, #2878C8 94%);


HEX #F028C8 over HEX #F02828 to HEX #2878C8


CSS-Code:

background-image: radial-gradient(circle, #F028C8 12%, #F02828 47%, #2878C8 90%);

HEX #F028C8 over HEX #F0C828 to HEX #F02828


CSS-Code:

background-image: linear-gradient(115deg, #F028C8 -4%, #F0C828 43%, #F02828 96%);


HEX #F028C8 over HEX #F0C828 to HEX #F02828


CSS-Code:

background-image: radial-gradient(circle, #F028C8 6%, #F0C828 53%, #F02828 108%);

HEX #F028C8 over HEX #F0C828 to HEX #2878C8


CSS-Code:

background-image: linear-gradient(115deg, #F028C8 7%, #F0C828 52%, #2878C8 108%);


HEX #F028C8 over HEX #F0C828 to HEX #2878C8


CSS-Code:

background-image: radial-gradient(circle, #F028C8 -2%, #F0C828 46%, #2878C8 87%);

HEX #F028C8 over HEX #2878C8 to HEX #F02828


CSS-Code:

background-image: linear-gradient(115deg, #F028C8 -3%, #2878C8 51%, #F02828 109%);


HEX #F028C8 over HEX #2878C8 to HEX #F02828


CSS-Code:

background-image: radial-gradient(circle, #F028C8 -8%, #2878C8 46%, #F02828 94%);

HEX #F028C8 over HEX #2878C8 to HEX #F0C828


CSS-Code:

background-image: linear-gradient(115deg, #F028C8 -9%, #2878C8 49%, #F0C828 95%);


HEX #F028C8 over HEX #2878C8 to HEX #F0C828


CSS-Code:

background-image: radial-gradient(circle, #F028C8 5%, #2878C8 51%, #F0C828 109%);

HEX #2878C8 over HEX #F02828 to HEX #F0C828


CSS-Code:

background-image: linear-gradient(115deg, #2878C8 12%, #F02828 53%, #F0C828 104%);


HEX #2878C8 over HEX #F02828 to HEX #F0C828


CSS-Code:

background-image: radial-gradient(circle, #2878C8 8%, #F02828 44%, #F0C828 108%);

HEX #2878C8 over HEX #F02828 to HEX #F028C8


CSS-Code:

background-image: linear-gradient(115deg, #2878C8 -2%, #F02828 50%, #F028C8 94%);


HEX #2878C8 over HEX #F02828 to HEX #F028C8


CSS-Code:

background-image: radial-gradient(circle, #2878C8 -7%, #F02828 42%, #F028C8 92%);

HEX #2878C8 over HEX #F0C828 to HEX #F02828


CSS-Code:

background-image: linear-gradient(115deg, #2878C8 11%, #F0C828 57%, #F02828 88%);


HEX #2878C8 over HEX #F0C828 to HEX #F02828


CSS-Code:

background-image: radial-gradient(circle, #2878C8 -8%, #F0C828 52%, #F02828 88%);

HEX #2878C8 over HEX #F0C828 to HEX #F028C8


CSS-Code:

background-image: linear-gradient(115deg, #2878C8 9%, #F0C828 52%, #F028C8 91%);


HEX #2878C8 over HEX #F0C828 to HEX #F028C8


CSS-Code:

background-image: radial-gradient(circle, #2878C8 -4%, #F0C828 48%, #F028C8 92%);

HEX #2878C8 over HEX #F028C8 to HEX #F02828


CSS-Code:

background-image: linear-gradient(115deg, #2878C8 -2%, #F028C8 53%, #F02828 92%);


HEX #2878C8 over HEX #F028C8 to HEX #F02828


CSS-Code:

background-image: radial-gradient(circle, #2878C8 -5%, #F028C8 42%, #F02828 106%);

HEX #2878C8 over HEX #F028C8 to HEX #F0C828


CSS-Code:

background-image: linear-gradient(115deg, #2878C8 14%, #F028C8 50%, #F0C828 89%);


HEX #2878C8 over HEX #F028C8 to HEX #F0C828


CSS-Code:

background-image: radial-gradient(circle, #2878C8 6%, #F028C8 48%, #F0C828 86%);

2-Color Gradients adjusted (24 pieces)

Show

3-Color Gradients adjusted (48 pieces)

Show