#31E2E2 - #00BCC3 | colorate

colorate es una herramienta de esquema de color para diseñadores y desarrolladores. Esta ayudará a inspirarse y servirá de recurso para su trabajo de color. Haz que este sitio sea mejor

Mezcla #31E2E2 a #00BCC3

#31E2E2 #00BCC3

Calcule el color entre dos colores, #31E2E2 y #00BCC3. En el cálculo de los valores RGB, la saturación entre los colores diferentes es baja. Al calcular los valores de HSV, la saturación entre los diferentes colores no es baja.

Mezcla RGB (Linear)

#31E2E2 - #00BCC3 | colorate

Cálculo del color entre dos colores según el valor RGB. Para colores que están distantes entre sí, la saturación entre los dos colores disminuye. Expande el color entre dos colores con #31E2E2 como 0% y #00BCC3 como 100%.

0.0%	0.0% #31E2E2	RGB 49 226 226	#31E2E2
16.7%	16.7% #28DBDC	RGB 40 219 220	#28DBDC
33.3%	33.3% #20D5D7	RGB 32 213 215	#20D5D7
50.0%	50.0% #18CFD2	RGB 24 207 210	#18CFD2
66.7%	66.7% #10C8CD	RGB 16 200 205	#10C8CD
83.3%	83.3% #08C2C8	RGB 8 194 200	#08C2C8
100.0%	100.0% #00BCC3	RGB 0 188 195	#00BCC3

#31E2E2 #28DBDC #20D5D7 #18CFD2 #10C8CD #08C2C8 #00BCC3

#31E2E2 - #00BCC3

Mezcla HSV

#31E2E2 - #00BCC3 | colorate

Cálculo del color entre dos colores según el valor de HSV. Incluso entre distintos colores de color, la saturación entre los dos colores no disminuye. Expande el color entre dos colores con #31E2E2 como 0% y #00BCC3 como 100%.

0.0%	0.0% #31E2E2	RGB 49 226 226	#31E2E2
16.7%	16.7% #27DBDC	RGB 39 219 220	#27DBDC
33.3%	33.3% #1FD5D7	RGB 31 213 215	#1FD5D7
50.0%	50.0% #16CFD2	RGB 22 207 210	#16CFD2
66.7%	66.7% #0EC8CD	RGB 14 200 205	#0EC8CD
83.3%	83.3% #07C2C8	RGB 7 194 200	#07C2C8
100.0%	100.0% #00BCC3	RGB 0 188 195	#00BCC3

#31E2E2 #27DBDC #1FD5D7 #16CFD2 #0EC8CD #07C2C8 #00BCC3

#31E2E2 - #16CFD2 - #00BCC3

Códigos CSS

<style type="text/css">
/* RGB Gradient */
div {
    background: -moz-linear-gradient(top, #31E2E2 0%, #00BCC3 100%);
    background: -webkit-linear-gradient(top, #31E2E2 0%, #00BCC3 100%);
    background: linear-gradient(to bottom, #31E2E2 0%, #00BCC3 100%);
}

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #31E2E2 0%, #16CFD2 50%, #00BCC3 100%);
    background: -webkit-linear-gradient(top, #31E2E2 0%, #16CFD2 50%, #00BCC3 100%);
    background: linear-gradient(to bottom, #31E2E2 0%, #16CFD2 50%, #00BCC3 100%);
}
</style>