#00CCBC - #CAFFB1 | 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 #00CCBC a #CAFFB1

#00CCBC #CAFFB1

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

#00CCBC - #CAFFB1 | 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 #00CCBC como 0% y #CAFFB1 como 100%.

0.0%	0.0% #00CCBC	RGB 0 204 188	#00CCBC
16.7%	16.7% #21D4BA	RGB 33 212 186	#21D4BA
33.3%	33.3% #43DDB8	RGB 67 221 184	#43DDB8
50.0%	50.0% #65E5B6	RGB 101 229 182	#65E5B6
66.7%	66.7% #86EEB4	RGB 134 238 180	#86EEB4
83.3%	83.3% #A8F6B2	RGB 168 246 178	#A8F6B2
100.0%	100.0% #CAFFB1	RGB 202 255 177	#CAFFB1

#00CCBC #21D4BA #43DDB8 #65E5B6 #86EEB4 #A8F6B2 #CAFFB1

#00CCBC - #CAFFB1

Mezcla HSV

#00CCBC - #CAFFB1 | 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 #00CCBC como 0% y #CAFFB1 como 100%.

0.0%	0.0% #00CCBC	RGB 0 204 188	#00CCBC
16.7%	16.7% #18D49E	RGB 24 212 158	#18D49E
33.3%	33.3% #33DD89	RGB 51 221 137	#33DD89
50.0%	50.0% #4FE57C	RGB 79 229 124	#4FE57C
66.7%	66.7% #6EEE7A	RGB 110 238 122	#6EEE7A
83.3%	83.3% #9AF68E	RGB 154 246 142	#9AF68E
100.0%	100.0% #CAFFB1	RGB 202 255 177	#CAFFB1

#00CCBC #18D49E #33DD89 #4FE57C #6EEE7A #9AF68E #CAFFB1

#00CCBC - #4FE57C - #CAFFB1

Códigos CSS

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

/* HSV Gradient */
div {
    background: -moz-linear-gradient(top, #00CCBC 0%, #4FE57C 50%, #CAFFB1 100%);
    background: -webkit-linear-gradient(top, #00CCBC 0%, #4FE57C 50%, #CAFFB1 100%);
    background: linear-gradient(to bottom, #00CCBC 0%, #4FE57C 50%, #CAFFB1 100%);
}
</style>