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

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 #25B5C0 to HEX #E30045


CSS-Code:

background-image: linear-gradient(135deg, #25B5C0 -2%, #E30045 93%);

Radial

HEX #25B5C0 to HEX #E30045


CSS-Code:

background-image: radial-gradient(circle, #25B5C0 1%, #E30045 192%);

HEX #25B5C0 to HEX #13235B


CSS-Code:

background-image: linear-gradient(135deg, #25B5C0 9%, #13235B 91%);


HEX #25B5C0 to HEX #13235B


CSS-Code:

background-image: radial-gradient(circle, #25B5C0 14%, #13235B 201%);

HEX #E30045 to HEX #25B5C0


CSS-Code:

background-image: linear-gradient(135deg, #E30045 0%, #25B5C0 95%);


HEX #E30045 to HEX #25B5C0


CSS-Code:

background-image: radial-gradient(circle, #E30045 3%, #25B5C0 196%);

HEX #E30045 to HEX #13235B


CSS-Code:

background-image: linear-gradient(135deg, #E30045 6%, #13235B 94%);


HEX #E30045 to HEX #13235B


CSS-Code:

background-image: radial-gradient(circle, #E30045 1%, #13235B 202%);

HEX #13235B to HEX #25B5C0


CSS-Code:

background-image: linear-gradient(135deg, #13235B 12%, #25B5C0 99%);


HEX #13235B to HEX #25B5C0


CSS-Code:

background-image: radial-gradient(circle, #13235B -1%, #25B5C0 194%);

HEX #13235B to HEX #E30045


CSS-Code:

background-image: linear-gradient(135deg, #13235B 12%, #E30045 109%);


HEX #13235B to HEX #E30045


CSS-Code:

background-image: radial-gradient(circle, #13235B -4%, #E30045 198%);

Lineal

HEX #25B5C0 over HEX #E30045 to HEX #13235B


CSS-Code:

background-image: linear-gradient(135deg, #25B5C0 -1%, #E30045 54%, #13235B 88%);

Radial

HEX #25B5C0 over HEX #E30045 to HEX #13235B


CSS-Code:

background-image: radial-gradient(circle, #25B5C0 12%, #E30045 54%, #13235B 107%);

HEX #25B5C0 over HEX #13235B to HEX #E30045


CSS-Code:

background-image: linear-gradient(135deg, #25B5C0 7%, #13235B 49%, #E30045 97%);


HEX #25B5C0 over HEX #13235B to HEX #E30045


CSS-Code:

background-image: radial-gradient(circle, #25B5C0 7%, #13235B 57%, #E30045 107%);

HEX #E30045 over HEX #25B5C0 to HEX #13235B


CSS-Code:

background-image: linear-gradient(135deg, #E30045 10%, #25B5C0 53%, #13235B 105%);


HEX #E30045 over HEX #25B5C0 to HEX #13235B


CSS-Code:

background-image: radial-gradient(circle, #E30045 8%, #25B5C0 45%, #13235B 89%);

HEX #E30045 over HEX #13235B to HEX #25B5C0


CSS-Code:

background-image: linear-gradient(135deg, #E30045 2%, #13235B 46%, #25B5C0 105%);


HEX #E30045 over HEX #13235B to HEX #25B5C0


CSS-Code:

background-image: radial-gradient(circle, #E30045 -7%, #13235B 56%, #25B5C0 103%);

HEX #13235B over HEX #25B5C0 to HEX #E30045


CSS-Code:

background-image: linear-gradient(135deg, #13235B 2%, #25B5C0 53%, #E30045 87%);


HEX #13235B over HEX #25B5C0 to HEX #E30045


CSS-Code:

background-image: radial-gradient(circle, #13235B 8%, #25B5C0 49%, #E30045 101%);

HEX #13235B over HEX #E30045 to HEX #25B5C0


CSS-Code:

background-image: linear-gradient(135deg, #13235B 1%, #E30045 54%, #25B5C0 101%);


HEX #13235B over HEX #E30045 to HEX #25B5C0


CSS-Code:

background-image: radial-gradient(circle, #13235B 4%, #E30045 54%, #25B5C0 109%);

2-Color Gradients adjusted (12 pieces)

Show

3-Color Gradients adjusted (12 pieces)

Show