#4171BA - #AFE6BC | 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 #4171BA a #AFE6BC

#4171BA #AFE6BC

Calcule el color entre dos colores, #4171BA y #AFE6BC. 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)

#4171BA - #AFE6BC | 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 #4171BA como 0% y #AFE6BC como 100%.

0.0%	0.0% #4171BA	RGB 65 113 186	#4171BA
16.7%	16.7% #5384BA	RGB 83 132 186	#5384BA
33.3%	33.3% #6598BA	RGB 101 152 186	#6598BA
50.0%	50.0% #78ABBB	RGB 120 171 187	#78ABBB
66.7%	66.7% #8ABFBB	RGB 138 191 187	#8ABFBB
83.3%	83.3% #9CD2BB	RGB 156 210 187	#9CD2BB
100.0%	100.0% #AFE6BC	RGB 175 230 188	#AFE6BC

#4171BA #5384BA #6598BA #78ABBB #8ABFBB #9CD2BB #AFE6BC

#4171BA - #AFE6BC

Mezcla HSV

#4171BA - #AFE6BC | 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 #4171BA como 0% y #AFE6BC como 100%.

0.0%	0.0% #4171BA	RGB 65 113 186	#4171BA
16.7%	16.7% #5097C1	RGB 80 151 193	#5097C1
33.3%	33.3% #61B9C8	RGB 97 185 200	#61B9C8
50.0%	50.0% #73D0C8	RGB 115 208 200	#73D0C8
66.7%	66.7% #86D7BE	RGB 134 215 190	#86D7BE
83.3%	83.3% #9ADEB9	RGB 154 222 185	#9ADEB9
100.0%	100.0% #AFE6BC	RGB 175 230 188	#AFE6BC

#4171BA #5097C1 #61B9C8 #73D0C8 #86D7BE #9ADEB9 #AFE6BC

#4171BA - #73D0C8 - #AFE6BC

Códigos CSS

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #4171BA 0%, #73D0C8 50%, #AFE6BC 100%);
    background: -webkit-linear-gradient(top, #4171BA 0%, #73D0C8 50%, #AFE6BC 100%);
    background: linear-gradient(to bottom, #4171BA 0%, #73D0C8 50%, #AFE6BC 100%);
}
</style>