Dear color lovers – together, we’ll have a more colorful future. Support us on

✕

CSS Gradientes:
#367C5E

Información

cerrar todo

Gradientes de 2 colores - Color complementario

Sugerimos CSS gradientes de dos tonos de color, tal como el color base y el color complementario.

Encuentre ejemplos de transición de colores lineares y radiales.

Diseño web: Copie el código CSS para integración facil a su página web.

Gradientes de 2 colores - Colores más claros

Escoja CSS gradientes de dos tonos de color, tal como uno del color base y un tono más claro.

Encuentre ejemplos de transición de colores lineares y radiales de Colores más claros.

Diseño web: Copie el código CSS para integración fácil en su página web.

Gradientes de 2 colores - Colores más oscuros

Permitanos sugerirle CSS gradientes de dos tonos de color, tal como uno del color base y un tono más claro.

Encuentre ejemplos de transición de colores lineares y radiales de Colores más claros.

Diseño web: Copie el código CSS para integración fácil en su página web.

Mostrar opciones

Descripción

Como el valor de los colores es relativamente bajo comparado con otros, este tono parece ser más oscuro

La descomposición del color en el sistema de color RGB: en este tono de color estan, de entre máximo 255 componentes de colores, respectivamente 54 el rojo, 124 el verde y 94 el azul.

De esta proporción de mezcla resulta un tono de color conveniente en la mitad de la intersección.

Usted puede ver en la representación, como el color se compone de tres elementos: del rojo (arriba), del verde (abajo a la derecha) y del azul (abajo a la izquierda). Puede ver el color resultante en el medio.

El color esta compuesto de la siguiente manera en el sistema de color CMYK: Hay en este tono de color, de entre máximo 100 componentes de colores 56 ciano, ninguno magenta, 24 amarillo y 51 negro.

De esta proporción de mezcla resulta un tono de color conveniente en la mitad de la intersección.

Usted puede ver en la representación, como el color se compone de cuatro elementos: del cian (arriba en la parte izquierda), del magenta (arriba en la parte derecha), del amarillo (abajo en la parte derecha) y del negro o key (abajo en la parte izquierda). Puede ver el color resultante en el medio.

Verificación de su paleta de colores como fabricante.

Proporcione a diseñadores y agencias valores cromáticos precisos.

Vámonos

Gradientes de 2 colores de #367C5E - Color complementario

Lineal

HEX #367C5E a HEX #C983A1

Código CSS:

background-image: linear-gradient(135deg, #367C5E 11%, #C983A1 91%);

Radial

HEX #367C5E a HEX #C983A1

Código CSS:

background-image: radial-gradient(circle, #367C5E 13%, #C983A1 89%);

HEX #C983A1 a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #C983A1 11%, #367C5E 86%);

HEX #C983A1 a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #C983A1 2%, #367C5E 98%);

Gradientes de 2 colores de #367C5E - Colores más claros

Lineal

HEX #367C5E a HEX #367C4B

Código CSS:

background-image: linear-gradient(135deg, #367C5E 13%, #367C4B 96%);

Radial

HEX #367C5E a HEX #367C4B

Código CSS:

background-image: radial-gradient(circle, #367C5E 12%, #367C4B 92%);

HEX #367C4B a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #367C4B 5%, #367C5E 94%);

HEX #367C4B a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #367C4B 2%, #367C5E 86%);

HEX #367C5E a HEX #367C5D

Código CSS:

background-image: linear-gradient(135deg, #367C5E 2%, #367C5D 86%);

HEX #367C5E a HEX #367C5D

Código CSS:

background-image: radial-gradient(circle, #367C5E 14%, #367C5D 86%);

HEX #367C5D a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #367C5D 5%, #367C5E 93%);

HEX #367C5D a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #367C5D 0%, #367C5E 92%);

HEX #367C5E a HEX #367C70

Código CSS:

background-image: linear-gradient(135deg, #367C5E 12%, #367C70 89%);

HEX #367C5E a HEX #367C70

Código CSS:

background-image: radial-gradient(circle, #367C5E 3%, #367C70 92%);

HEX #367C70 a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #367C70 4%, #367C5E 92%);

HEX #367C70 a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #367C70 6%, #367C5E 97%);

HEX #367C5E a HEX #36757C

Código CSS:

background-image: linear-gradient(135deg, #367C5E 1%, #36757C 88%);

HEX #367C5E a HEX #36757C

Código CSS:

background-image: radial-gradient(circle, #367C5E 9%, #36757C 95%);

HEX #36757C a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #36757C 1%, #367C5E 96%);

HEX #36757C a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #36757C 13%, #367C5E 94%);

Gradientes de 2 colores de #367C5E - Colores más oscuros

Lineal

HEX #367C5E a HEX #295F48

Código CSS:

background-image: linear-gradient(135deg, #367C5E 11%, #295F48 89%);

Radial

HEX #367C5E a HEX #295F48

Código CSS:

background-image: radial-gradient(circle, #367C5E 3%, #295F48 99%);

HEX #295F48 a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #295F48 13%, #367C5E 89%);

HEX #295F48 a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #295F48 1%, #367C5E 92%);

HEX #367C5E a HEX #439874

Código CSS:

background-image: linear-gradient(135deg, #367C5E 4%, #439874 94%);

HEX #367C5E a HEX #439874

Código CSS:

background-image: radial-gradient(circle, #367C5E 0%, #439874 99%);

HEX #439874 a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #439874 12%, #367C5E 94%);

HEX #439874 a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #439874 12%, #367C5E 92%);

HEX #367C5E a HEX #51B389

Código CSS:

background-image: linear-gradient(135deg, #367C5E 5%, #51B389 89%);

HEX #367C5E a HEX #51B389

Código CSS:

background-image: radial-gradient(circle, #367C5E 9%, #51B389 93%);

HEX #51B389 a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #51B389 11%, #367C5E 99%);

HEX #51B389 a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #51B389 12%, #367C5E 91%);

Gradientes de 2 colores de #367C5E - Colores análogos

Lineal

HEX #367C5E a HEX #367C4B

Código CSS:

background-image: linear-gradient(135deg, #367C5E 1%, #367C4B 95%);

Radial

HEX #367C5E a HEX #367C4B

Código CSS:

background-image: radial-gradient(circle, #367C5E 0%, #367C4B 100%);

HEX #367C4B a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #367C4B 9%, #367C5E 97%);

HEX #367C4B a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #367C4B 10%, #367C5E 92%);

HEX #367C5E a HEX #367C5D

Código CSS:

background-image: linear-gradient(135deg, #367C5E 6%, #367C5D 99%);

HEX #367C5E a HEX #367C5D

Código CSS:

background-image: radial-gradient(circle, #367C5E 14%, #367C5D 89%);

HEX #367C5D a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #367C5D 13%, #367C5E 98%);

HEX #367C5D a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #367C5D 7%, #367C5E 96%);

HEX #367C5E a HEX #367C70

Código CSS:

background-image: linear-gradient(135deg, #367C5E 8%, #367C70 87%);

HEX #367C5E a HEX #367C70

Código CSS:

background-image: radial-gradient(circle, #367C5E 12%, #367C70 90%);

HEX #367C70 a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #367C70 1%, #367C5E 91%);

HEX #367C70 a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #367C70 10%, #367C5E 91%);

HEX #367C5E a HEX #36757C

Código CSS:

background-image: linear-gradient(135deg, #367C5E 12%, #36757C 86%);

HEX #367C5E a HEX #36757C

Código CSS:

background-image: radial-gradient(circle, #367C5E 2%, #36757C 86%);

HEX #36757C a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #36757C 4%, #367C5E 89%);

HEX #36757C a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #36757C 13%, #367C5E 90%);

Gradientes de 2 colores de #367C5E - Colores monocromáticos

Lineal

HEX #367C5E a HEX #295F48

Código CSS:

background-image: linear-gradient(135deg, #367C5E 3%, #295F48 95%);

Radial

HEX #367C5E a HEX #295F48

Código CSS:

background-image: radial-gradient(circle, #367C5E 14%, #295F48 98%);

HEX #295F48 a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #295F48 11%, #367C5E 94%);

HEX #295F48 a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #295F48 14%, #367C5E 87%);

HEX #367C5E a HEX #439874

Código CSS:

background-image: linear-gradient(135deg, #367C5E 4%, #439874 96%);

HEX #367C5E a HEX #439874

Código CSS:

background-image: radial-gradient(circle, #367C5E 5%, #439874 100%);

HEX #439874 a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #439874 7%, #367C5E 90%);

HEX #439874 a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #439874 10%, #367C5E 93%);

HEX #367C5E a HEX #51B389

Código CSS:

background-image: linear-gradient(135deg, #367C5E 4%, #51B389 96%);

HEX #367C5E a HEX #51B389

Código CSS:

background-image: radial-gradient(circle, #367C5E 11%, #51B389 86%);

HEX #51B389 a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #51B389 10%, #367C5E 94%);

HEX #51B389 a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #51B389 6%, #367C5E 86%);

Gradientes de 2 colores de #367C5E - Colores parcialmente complementarios

Lineal

HEX #367C5E a HEX #36467C

Código CSS:

background-image: linear-gradient(135deg, #367C5E 6%, #36467C 91%);

Radial

HEX #367C5E a HEX #36467C

Código CSS:

background-image: radial-gradient(circle, #367C5E 0%, #36467C 93%);

HEX #36467C a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #36467C 3%, #367C5E 94%);

HEX #36467C a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #36467C 8%, #367C5E 93%);

HEX #367C5E a HEX #7C4236

Código CSS:

background-image: linear-gradient(135deg, #367C5E 4%, #7C4236 94%);

HEX #367C5E a HEX #7C4236

Código CSS:

background-image: radial-gradient(circle, #367C5E 3%, #7C4236 90%);

HEX #7C4236 a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #7C4236 11%, #367C5E 95%);

HEX #7C4236 a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #7C4236 12%, #367C5E 93%);

Gradientes de 2 colores de #367C5E - Colores triádicos

Lineal

HEX #367C5E a HEX #5D367C

Código CSS:

background-image: linear-gradient(135deg, #367C5E 11%, #5D367C 91%);

Radial

HEX #367C5E a HEX #5D367C

Código CSS:

background-image: radial-gradient(circle, #367C5E 10%, #5D367C 90%);

HEX #5D367C a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #5D367C 5%, #367C5E 98%);

HEX #5D367C a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #5D367C 0%, #367C5E 88%);

HEX #367C5E a HEX #7C5D36

Código CSS:

background-image: linear-gradient(135deg, #367C5E 12%, #7C5D36 86%);

HEX #367C5E a HEX #7C5D36

Código CSS:

background-image: radial-gradient(circle, #367C5E 4%, #7C5D36 97%);

HEX #7C5D36 a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #7C5D36 3%, #367C5E 93%);

HEX #7C5D36 a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #7C5D36 0%, #367C5E 92%);

Gradientes de 2 colores de #367C5E - Colores rectangulares (tetradicos)

Lineal

HEX #367C5E a HEX #36467C

Código CSS:

background-image: linear-gradient(135deg, #367C5E 14%, #36467C 91%);

Radial

HEX #367C5E a HEX #36467C

Código CSS:

background-image: radial-gradient(circle, #367C5E 13%, #36467C 96%);

HEX #36467C a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #36467C 1%, #367C5E 92%);

HEX #36467C a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #36467C 0%, #367C5E 100%);

HEX #367C5E a HEX #7C3654

Código CSS:

background-image: linear-gradient(135deg, #367C5E 9%, #7C3654 94%);

HEX #367C5E a HEX #7C3654

Código CSS:

background-image: radial-gradient(circle, #367C5E 11%, #7C3654 88%);

HEX #7C3654 a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #7C3654 0%, #367C5E 97%);

HEX #7C3654 a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #7C3654 4%, #367C5E 93%);

HEX #367C5E a HEX #7C6B36

Código CSS:

background-image: linear-gradient(135deg, #367C5E 8%, #7C6B36 87%);

HEX #367C5E a HEX #7C6B36

Código CSS:

background-image: radial-gradient(circle, #367C5E 5%, #7C6B36 89%);

HEX #7C6B36 a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #7C6B36 12%, #367C5E 86%);

HEX #7C6B36 a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #7C6B36 3%, #367C5E 90%);

Gradientes de 2 colores de #367C5E - Colores cuadrados

Lineal

HEX #367C5E a HEX #3B367C

Código CSS:

background-image: linear-gradient(135deg, #367C5E 4%, #3B367C 87%);

Radial

HEX #367C5E a HEX #3B367C

Código CSS:

background-image: radial-gradient(circle, #367C5E 3%, #3B367C 99%);

HEX #3B367C a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #3B367C 0%, #367C5E 100%);

HEX #3B367C a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #3B367C 5%, #367C5E 91%);

HEX #367C5E a HEX #7C3654

Código CSS:

background-image: linear-gradient(135deg, #367C5E 8%, #7C3654 91%);

HEX #367C5E a HEX #7C3654

Código CSS:

background-image: radial-gradient(circle, #367C5E 14%, #7C3654 95%);

HEX #7C3654 a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #7C3654 14%, #367C5E 98%);

HEX #7C3654 a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #7C3654 14%, #367C5E 98%);

HEX #367C5E a HEX #777C36

Código CSS:

background-image: linear-gradient(135deg, #367C5E 14%, #777C36 100%);

HEX #367C5E a HEX #777C36

Código CSS:

background-image: radial-gradient(circle, #367C5E 1%, #777C36 99%);

HEX #777C36 a HEX #367C5E

Código CSS:

background-image: linear-gradient(135deg, #777C36 4%, #367C5E 97%);

HEX #777C36 a HEX #367C5E

Código CSS:

background-image: radial-gradient(circle, #777C36 7%, #367C5E 86%);

Mostrar más paletas de colores

Servicios

Colores

RGB a HEX

convierta de RGB rojo verde azul a #RRGGBB

RGB a CMYK

convierta de RGB rojo verde azul a CMYK cian / magenta / amarillo / negro

RGB a RAL®

convierta de RGB rojo verde azul a RAL®-número (RAL 0000)

RGB a HKS®

convierta de RGB rojo verde azul a HKS®-número (HKS 00)

RGB a PANTONE®

convierta de RGB rojo verde azul a Pantone®-número (Pantone 0000)

RGB a Sherwin Williams®

convierta de RGB rojo verde azul a Sherwin Williams®-número (SW 0000)

RGB a NCS®

convierta de RGB rojo verde azul a NCS-número (S0000-X00X)

CMYK a HEX

convierta de CMYK cian / magenta / amarillo / negro a #RRGGBB

CMYK a RGB

convierta de CMYK cian / magenta / amarillo / negro a RGB rojo verde azul

CMYK a RAL®

convierta de CMYK cian / magenta / amarillo / negro a RAL®-número (RAL 0000)

CMYK a HKS®

convierta de CMYK cian / magenta / amarillo / negro a HKS®-número (HKS 00)

CMYK a PANTONE®

convierta de CMYK cian / magenta / amarillo / negro a Pantone®-número (Pantone 0000)

CMYK a Sherwin Williams®

convierta de CMYK cian / magenta / amarillo / negro a Sherwin Williams®-número (SW 0000)

CMYK a NCS®

convierta de CMYK cian / magenta / amarillo / negro a NCS-número (S0000-X00X)

HEX a RGB

convierta de #RRGGBB a RGB rojo verde azul

HEX a CMYK

convierta de #RRGGBB a CMYK cian / magenta / amarillo / negro

HEX a RAL®

convierta de #RRGGBB a RAL®-número (RAL 0000)

HEX a HKS®

convierta de #RRGGBB a HKS®-número (HKS 00)

HEX a PANTONE®

convierta de #RRGGBB a Pantone®-número (Pantone 0000)

HEX a Sherwin Williams®

convierta de #RRGGBB a Sherwin Williams®-número (SW 0000)

HEX a NCS®

convierta de #RRGGBB a NCS-número (S0000-X00X)

RAL® a RGB

convierta de RAL®-número (RAL 0000) a RGB rojo verde azul

RAL® a CMYK

convierta de RAL®-número (RAL 0000) a CMYK cian / magenta / amarillo / negro

RAL® a HEX

convierta de RAL®-número (RAL 0000) a #RRGGBB

RAL® a HKS®

convierta de RAL®-número (RAL 0000) a HKS®-número (HKS 00)

RAL® a PANTONE®

convierta de RAL®-número (RAL 0000) a Pantone®-número (Pantone 0000)

RAL® a Sherwin Williams®

convierta de RAL®-número (RAL 0000) a Sherwin Williams®-número (SW 0000)

RAL® a NCS®

convierta de RAL®-número (RAL 0000) a NCS-número (S0000-X00X)

HKS® a RGB

convierta de HKS®-número (HKS 00) a RGB rojo verde azul

HKS® a CMYK

convierta de HKS®-número (HKS 00) a CMYK cian / magenta / amarillo / negro

HKS® a HEX

convierta de HKS®-número (HKS 00) a #RRGGBB

HKS® a RAL®

convierta de HKS®-número (HKS 00) a RAL®-número (RAL 0000)

HKS® a PANTONE®

convierta de HKS®-número (HKS 00) a Pantone®-número (Pantone 0000)

HKS® a Sherwin Williams®

convierta de HKS®-número (HKS 00) a Sherwin Williams®-número (SW 0000)

HKS® a NCS®

convierta de HKS®-número (HKS 00) a NCS-número (S0000-X00X)

PANTONE® a RGB

convierta de Pantone®-número (Pantone 0000) a RGB rojo verde azul

PANTONE® a CMYK

convierta de Pantone®-número (Pantone 0000) a CMYK cian / magenta / amarillo / negro

PANTONE® a HEX

convierta de Pantone®-número (Pantone 0000) a #RRGGBB

PANTONE® a RAL®

convierta de Pantone®-número (Pantone 0000) a RAL®-número (RAL 0000)

PANTONE® a HKS®

convierta de Pantone®-número (Pantone 0000) a HKS®-número (HKS 00)

PANTONE® a Sherwin Williams®

convierta de Pantone®-número (Pantone 0000) a Sherwin Williams®-número (SW 0000)

PANTONE® a NCS®

convierta de Pantone®-número (Pantone 0000) a NCS-número (S0000-X00X)

Sherwin Williams® a RGB

convierta de Sherwin Williams®-número (SW 0000) a RGB rojo verde azul

Sherwin Williams® a CMYK

convierta de Sherwin Williams®-número (SW 0000) a CMYK cian / magenta / amarillo / negro

Sherwin Williams® a HEX

convierta de Sherwin Williams®-número (SW 0000) a #RRGGBB

Sherwin Williams® a RAL®

convierta de Sherwin Williams®-número (SW 0000) a RAL®-número (RAL 0000)

Sherwin Williams® a HKS®

convierta de Sherwin Williams®-número (SW 0000) a HKS®-número (HKS 00)

Sherwin Williams® a PANTONE®

convierta de Sherwin Williams®-número (SW 0000) a Pantone®-número (Pantone 0000)

Sherwin Williams® a NCS®

convierta de Sherwin Williams®-número (SW 0000) a NCS-número (S0000-X00X)

NCS® a RGB

convierta de NCS-número (S0000-X00X) a RGB rojo verde azul

NCS® a CMYK

convierta de NCS-número (S0000-X00X) a CMYK cian / magenta / amarillo / negro

NCS® a HEX

convierta de NCS-número (S0000-X00X) a #RRGGBB

NCS® a RAL®

convierta de NCS-número (S0000-X00X) a RAL®-número (RAL 0000)

NCS® a HKS®

convierta de NCS-número (S0000-X00X) a HKS®-número (HKS 00)

NCS® a PANTONE®

convierta de NCS-número (S0000-X00X) a Pantone®-número (Pantone 0000)

NCS® a Sherwin Williams®

convierta de NCS-número (S0000-X00X) a Sherwin Williams®-número (SW 0000)

Códigos

Para guardar estas paletas de color, tendrá que iniciar una sesión personal.

Acceda a su cuenta

o

Crear una cuenta

Paleta de colores actual Compartir
¿Debe ser público o privado?
Enlace(s) después de compartir.

Público

Cancelar Compartir

Paleta de colores compartida
Por favor, copie y guarde el enlace deseado.

Compartir

Ver

OK, he copiado los enlaces

Tus colores se guardarán en una nueva paleta de colores.
Consúltala en tu perfil.
Puedes personalizarla aún más y compartirla.

Mostrar paleta de colores

Crea una paleta de colores

DescargarDescargar en varios formatos

Haciendo clic en puede crear paletas y descargar las muestras de color.