#ABC6DB - #5477A1 | 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 #ABC6DB a #5477A1

#ABC6DB #5477A1

Calcule el color entre dos colores, #ABC6DB y #5477A1. 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)

#ABC6DB - #5477A1 | 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 #ABC6DB como 0% y #5477A1 como 100%.

0.0%	0.0% #ABC6DB	RGB 171 198 219	#ABC6DB
16.7%	16.7% #9CB8D1	RGB 156 184 209	#9CB8D1
33.3%	33.3% #8EABC7	RGB 142 171 199	#8EABC7
50.0%	50.0% #7F9EBE	RGB 127 158 190	#7F9EBE
66.7%	66.7% #7191B4	RGB 113 145 180	#7191B4
83.3%	83.3% #6284AA	RGB 98 132 170	#6284AA
100.0%	100.0% #5477A1	RGB 84 119 161	#5477A1

#ABC6DB #9CB8D1 #8EABC7 #7F9EBE #7191B4 #6284AA #5477A1

#ABC6DB - #5477A1

Mezcla HSV

#ABC6DB - #5477A1 | 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 #ABC6DB como 0% y #5477A1 como 100%.

0.0%	0.0% #ABC6DB	RGB 171 198 219	#ABC6DB
16.7%	16.7% #9AB8D1	RGB 154 184 209	#9AB8D1
33.3%	33.3% #8AAAC7	RGB 138 170 199	#8AAAC7
50.0%	50.0% #7B9DBE	RGB 123 157 190	#7B9DBE
66.7%	66.7% #6D90B4	RGB 109 144 180	#6D90B4
83.3%	83.3% #6083AA	RGB 96 131 170	#6083AA
100.0%	100.0% #5477A1	RGB 84 119 161	#5477A1

#ABC6DB #9AB8D1 #8AAAC7 #7B9DBE #6D90B4 #6083AA #5477A1

#ABC6DB - #7B9DBE - #5477A1

Códigos CSS

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #ABC6DB 0%, #7B9DBE 50%, #5477A1 100%);
    background: -webkit-linear-gradient(top, #ABC6DB 0%, #7B9DBE 50%, #5477A1 100%);
    background: linear-gradient(to bottom, #ABC6DB 0%, #7B9DBE 50%, #5477A1 100%);
}
</style>