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

✕

CSS Gradientes:
RGB 55 97 103

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 55 el rojo, 97 el verde y 103 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 47 ciano, 6 magenta, ninguno amarillo y 60 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 RGB 55 97 103 - Color complementario

Lineal

HEX #376167 a HEX #C89E98

Código CSS:

background-image: linear-gradient(135deg, #376167 2%, #C89E98 87%);

Radial

HEX #376167 a HEX #C89E98

Código CSS:

background-image: radial-gradient(circle, #376167 13%, #C89E98 91%);

HEX #C89E98 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #C89E98 10%, #376167 91%);

HEX #C89E98 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #C89E98 14%, #376167 95%);

Gradientes de 2 colores de RGB 55 97 103 - Colores más claros

Lineal

HEX #376167 a HEX #37665F

Código CSS:

background-image: linear-gradient(135deg, #376167 3%, #37665F 87%);

Radial

HEX #376167 a HEX #37665F

Código CSS:

background-image: radial-gradient(circle, #376167 5%, #37665F 91%);

HEX #37665F a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #37665F 3%, #376167 87%);

HEX #37665F a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #37665F 13%, #376167 90%);

HEX #376167 a HEX #376166

Código CSS:

background-image: linear-gradient(135deg, #376167 14%, #376166 95%);

HEX #376167 a HEX #376166

Código CSS:

background-image: radial-gradient(circle, #376167 1%, #376166 89%);

HEX #376166 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #376166 1%, #376167 99%);

HEX #376166 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #376166 4%, #376167 95%);

HEX #376167 a HEX #375466

Código CSS:

background-image: linear-gradient(135deg, #376167 3%, #375466 92%);

HEX #376167 a HEX #375466

Código CSS:

background-image: radial-gradient(circle, #376167 14%, #375466 96%);

HEX #375466 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #375466 7%, #376167 89%);

HEX #375466 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #375466 10%, #376167 95%);

HEX #376167 a HEX #374766

Código CSS:

background-image: linear-gradient(135deg, #376167 14%, #374766 99%);

HEX #376167 a HEX #374766

Código CSS:

background-image: radial-gradient(circle, #376167 3%, #374766 97%);

HEX #374766 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #374766 9%, #376167 92%);

HEX #374766 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #374766 11%, #376167 96%);

Gradientes de 2 colores de RGB 55 97 103 - Colores más oscuros

Lineal

HEX #376167 a HEX #28474B

Código CSS:

background-image: linear-gradient(135deg, #376167 2%, #28474B 89%);

Radial

HEX #376167 a HEX #28474B

Código CSS:

background-image: radial-gradient(circle, #376167 7%, #28474B 87%);

HEX #28474B a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #28474B 10%, #376167 95%);

HEX #28474B a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #28474B 8%, #376167 90%);

HEX #376167 a HEX #376066

Código CSS:

background-image: linear-gradient(135deg, #376167 8%, #376066 98%);

HEX #376167 a HEX #376066

Código CSS:

background-image: radial-gradient(circle, #376167 10%, #376066 100%);

HEX #376066 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #376066 2%, #376167 96%);

HEX #376066 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #376066 14%, #376167 94%);

HEX #376167 a HEX #457A81

Código CSS:

background-image: linear-gradient(135deg, #376167 7%, #457A81 90%);

HEX #376167 a HEX #457A81

Código CSS:

background-image: radial-gradient(circle, #376167 8%, #457A81 95%);

HEX #457A81 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #457A81 9%, #376167 92%);

HEX #457A81 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #457A81 1%, #376167 88%);

HEX #376167 a HEX #54939C

Código CSS:

background-image: linear-gradient(135deg, #376167 6%, #54939C 89%);

HEX #376167 a HEX #54939C

Código CSS:

background-image: radial-gradient(circle, #376167 9%, #54939C 87%);

HEX #54939C a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #54939C 10%, #376167 95%);

HEX #54939C a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #54939C 1%, #376167 91%);

Gradientes de 2 colores de RGB 55 97 103 - Colores análogos

Lineal

HEX #376167 a HEX #37665F

Código CSS:

background-image: linear-gradient(135deg, #376167 14%, #37665F 97%);

Radial

HEX #376167 a HEX #37665F

Código CSS:

background-image: radial-gradient(circle, #376167 13%, #37665F 95%);

HEX #37665F a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #37665F 10%, #376167 91%);

HEX #37665F a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #37665F 0%, #376167 90%);

HEX #376167 a HEX #376166

Código CSS:

background-image: linear-gradient(135deg, #376167 13%, #376166 92%);

HEX #376167 a HEX #376166

Código CSS:

background-image: radial-gradient(circle, #376167 9%, #376166 97%);

HEX #376166 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #376166 12%, #376167 96%);

HEX #376166 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #376166 4%, #376167 96%);

HEX #376167 a HEX #375466

Código CSS:

background-image: linear-gradient(135deg, #376167 6%, #375466 92%);

HEX #376167 a HEX #375466

Código CSS:

background-image: radial-gradient(circle, #376167 0%, #375466 89%);

HEX #375466 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #375466 3%, #376167 97%);

HEX #375466 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #375466 7%, #376167 99%);

HEX #376167 a HEX #374766

Código CSS:

background-image: linear-gradient(135deg, #376167 12%, #374766 87%);

HEX #376167 a HEX #374766

Código CSS:

background-image: radial-gradient(circle, #376167 11%, #374766 90%);

HEX #374766 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #374766 5%, #376167 91%);

HEX #374766 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #374766 7%, #376167 87%);

Gradientes de 2 colores de RGB 55 97 103 - Colores monocromáticos

Lineal

HEX #376167 a HEX #28474B

Código CSS:

background-image: linear-gradient(135deg, #376167 13%, #28474B 97%);

Radial

HEX #376167 a HEX #28474B

Código CSS:

background-image: radial-gradient(circle, #376167 10%, #28474B 98%);

HEX #28474B a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #28474B 10%, #376167 89%);

HEX #28474B a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #28474B 8%, #376167 95%);

HEX #376167 a HEX #376066

Código CSS:

background-image: linear-gradient(135deg, #376167 1%, #376066 97%);

HEX #376167 a HEX #376066

Código CSS:

background-image: radial-gradient(circle, #376167 14%, #376066 91%);

HEX #376066 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #376066 0%, #376167 92%);

HEX #376066 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #376066 14%, #376167 86%);

HEX #376167 a HEX #457A81

Código CSS:

background-image: linear-gradient(135deg, #376167 2%, #457A81 99%);

HEX #376167 a HEX #457A81

Código CSS:

background-image: radial-gradient(circle, #376167 3%, #457A81 94%);

HEX #457A81 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #457A81 11%, #376167 88%);

HEX #457A81 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #457A81 3%, #376167 87%);

HEX #376167 a HEX #54939C

Código CSS:

background-image: linear-gradient(135deg, #376167 6%, #54939C 86%);

HEX #376167 a HEX #54939C

Código CSS:

background-image: radial-gradient(circle, #376167 12%, #54939C 98%);

HEX #54939C a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #54939C 0%, #376167 98%);

HEX #54939C a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #54939C 8%, #376167 86%);

Gradientes de 2 colores de RGB 55 97 103 - Colores parcialmente complementarios

Lineal

HEX #376167 a HEX #463766

Código CSS:

background-image: linear-gradient(135deg, #376167 5%, #463766 89%);

Radial

HEX #376167 a HEX #463766

Código CSS:

background-image: radial-gradient(circle, #376167 13%, #463766 91%);

HEX #463766 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #463766 13%, #376167 96%);

HEX #463766 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #463766 4%, #376167 88%);

HEX #376167 a HEX #665937

Código CSS:

background-image: linear-gradient(135deg, #376167 13%, #665937 94%);

HEX #376167 a HEX #665937

Código CSS:

background-image: radial-gradient(circle, #376167 11%, #665937 93%);

HEX #665937 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #665937 2%, #376167 99%);

HEX #665937 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #665937 7%, #376167 86%);

Gradientes de 2 colores de RGB 55 97 103 - Colores triádicos

Lineal

HEX #376167 a HEX #663761

Código CSS:

background-image: linear-gradient(135deg, #376167 2%, #663761 87%);

Radial

HEX #376167 a HEX #663761

Código CSS:

background-image: radial-gradient(circle, #376167 4%, #663761 87%);

HEX #663761 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #663761 3%, #376167 87%);

HEX #663761 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #663761 3%, #376167 94%);

HEX #376167 a HEX #616637

Código CSS:

background-image: linear-gradient(135deg, #376167 8%, #616637 98%);

HEX #376167 a HEX #616637

Código CSS:

background-image: radial-gradient(circle, #376167 12%, #616637 95%);

HEX #616637 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #616637 6%, #376167 91%);

HEX #616637 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #616637 3%, #376167 91%);

Gradientes de 2 colores de RGB 55 97 103 - Colores rectangulares (tetradicos)

Lineal

HEX #376167 a HEX #463766

Código CSS:

background-image: linear-gradient(135deg, #376167 2%, #463766 89%);

Radial

HEX #376167 a HEX #463766

Código CSS:

background-image: radial-gradient(circle, #376167 10%, #463766 95%);

HEX #463766 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #463766 4%, #376167 86%);

HEX #463766 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #463766 14%, #376167 95%);

HEX #376167 a HEX #663C37

Código CSS:

background-image: linear-gradient(135deg, #376167 0%, #663C37 97%);

HEX #376167 a HEX #663C37

Código CSS:

background-image: radial-gradient(circle, #376167 12%, #663C37 87%);

HEX #663C37 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #663C37 1%, #376167 100%);

HEX #663C37 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #663C37 5%, #376167 89%);

HEX #376167 a HEX #576637

Código CSS:

background-image: linear-gradient(135deg, #376167 8%, #576637 88%);

HEX #376167 a HEX #576637

Código CSS:

background-image: radial-gradient(circle, #376167 2%, #576637 89%);

HEX #576637 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #576637 11%, #376167 100%);

HEX #576637 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #576637 10%, #376167 86%);

Gradientes de 2 colores de RGB 55 97 103 - Colores cuadrados

Lineal

HEX #376167 a HEX #543766

Código CSS:

background-image: linear-gradient(135deg, #376167 6%, #543766 91%);

Radial

HEX #376167 a HEX #543766

Código CSS:

background-image: radial-gradient(circle, #376167 12%, #543766 93%);

HEX #543766 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #543766 12%, #376167 98%);

HEX #543766 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #543766 5%, #376167 98%);

HEX #376167 a HEX #663C37

Código CSS:

background-image: linear-gradient(135deg, #376167 1%, #663C37 96%);

HEX #376167 a HEX #663C37

Código CSS:

background-image: radial-gradient(circle, #376167 8%, #663C37 98%);

HEX #663C37 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #663C37 4%, #376167 99%);

HEX #663C37 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #663C37 0%, #376167 95%);

HEX #376167 a HEX #496637

Código CSS:

background-image: linear-gradient(135deg, #376167 14%, #496637 96%);

HEX #376167 a HEX #496637

Código CSS:

background-image: radial-gradient(circle, #376167 1%, #496637 95%);

HEX #496637 a HEX #376167

Código CSS:

background-image: linear-gradient(135deg, #496637 5%, #376167 89%);

HEX #496637 a HEX #376167

Código CSS:

background-image: radial-gradient(circle, #496637 13%, #376167 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.