#31DBAF - #00AF7F | 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 #31DBAF a #00AF7F

#31DBAF #00AF7F

Calcule el color entre dos colores, #31DBAF y #00AF7F. 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)

#31DBAF - #00AF7F | 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 #31DBAF como 0% y #00AF7F como 100%.

0.0%	0.0% #31DBAF	RGB 49 219 175	#31DBAF
16.7%	16.7% #28D3A7	RGB 40 211 167	#28D3A7
33.3%	33.3% #20CC9F	RGB 32 204 159	#20CC9F
50.0%	50.0% #18C597	RGB 24 197 151	#18C597
66.7%	66.7% #10BD8F	RGB 16 189 143	#10BD8F
83.3%	83.3% #08B687	RGB 8 182 135	#08B687
100.0%	100.0% #00AF7F	RGB 0 175 127	#00AF7F

#31DBAF #28D3A7 #20CC9F #18C597 #10BD8F #08B687 #00AF7F

#31DBAF - #00AF7F

Mezcla HSV

#31DBAF - #00AF7F | 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 #31DBAF como 0% y #00AF7F como 100%.

0.0%	0.0% #31DBAF	RGB 49 219 175	#31DBAF
16.7%	16.7% #27D3A6	RGB 39 211 166	#27D3A6
33.3%	33.3% #1ECC9E	RGB 30 204 158	#1ECC9E
50.0%	50.0% #16C596	RGB 22 197 150	#16C596
66.7%	66.7% #0EBD8E	RGB 14 189 142	#0EBD8E
83.3%	83.3% #06B686	RGB 6 182 134	#06B686
100.0%	100.0% #00AF7F	RGB 0 175 127	#00AF7F

#31DBAF #27D3A6 #1ECC9E #16C596 #0EBD8E #06B686 #00AF7F

#31DBAF - #16C596 - #00AF7F

Códigos CSS

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

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