#ABABFF - #BFD9F4 | 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 #ABABFF a #BFD9F4

#ABABFF #BFD9F4

Calcule el color entre dos colores, #ABABFF y #BFD9F4. 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)

#ABABFF - #BFD9F4 | 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 #ABABFF como 0% y #BFD9F4 como 100%.

0.0%	0.0% #ABABFF	RGB 171 171 255	#ABABFF
16.7%	16.7% #AEB2FD	RGB 174 178 253	#AEB2FD
33.3%	33.3% #B1BAFB	RGB 177 186 251	#B1BAFB
50.0%	50.0% #B5C2F9	RGB 181 194 249	#B5C2F9
66.7%	66.7% #B8C9F7	RGB 184 201 247	#B8C9F7
83.3%	83.3% #BBD1F5	RGB 187 209 245	#BBD1F5
100.0%	100.0% #BFD9F4	RGB 191 217 244	#BFD9F4

#ABABFF #AEB2FD #B1BAFB #B5C2F9 #B8C9F7 #BBD1F5 #BFD9F4

#ABABFF - #BFD9F4

Mezcla HSV

#ABABFF - #BFD9F4 | 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 #ABABFF como 0% y #BFD9F4 como 100%.

0.0%	0.0% #ABABFF	RGB 171 171 255	#ABABFF
16.7%	16.7% #AEB4FD	RGB 174 180 253	#AEB4FD
33.3%	33.3% #B1BDFB	RGB 177 189 251	#B1BDFB
50.0%	50.0% #B5C6F9	RGB 181 198 249	#B5C6F9
66.7%	66.7% #B8CDF7	RGB 184 205 247	#B8CDF7
83.3%	83.3% #BBD3F5	RGB 187 211 245	#BBD3F5
100.0%	100.0% #BFD9F4	RGB 191 217 244	#BFD9F4

#ABABFF #AEB4FD #B1BDFB #B5C6F9 #B8CDF7 #BBD3F5 #BFD9F4

#ABABFF - #B5C6F9 - #BFD9F4

Códigos CSS

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #ABABFF 0%, #B5C6F9 50%, #BFD9F4 100%);
    background: -webkit-linear-gradient(top, #ABABFF 0%, #B5C6F9 50%, #BFD9F4 100%);
    background: linear-gradient(to bottom, #ABABFF 0%, #B5C6F9 50%, #BFD9F4 100%);
}
</style>