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

✕

CSS Gradientes:
#FA844B

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 alto comparado con otros, este tono parece ser más claro.

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 250 el rojo, 132 el verde y 75 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 ninguno ciano, 47 magenta, 70 amarillo y 2 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 #FA844B - Color complementario

Lineal

HEX #FA844B a HEX #057BB4

Código CSS:

background-image: linear-gradient(135deg, #FA844B 7%, #057BB4 92%);

Radial

HEX #FA844B a HEX #057BB4

Código CSS:

background-image: radial-gradient(circle, #FA844B 10%, #057BB4 97%);

HEX #057BB4 a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #057BB4 14%, #FA844B 99%);

HEX #057BB4 a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #057BB4 3%, #FA844B 94%);

Gradientes de 2 colores de #FA844B - Colores más claros

Lineal

HEX #FA844B a HEX #FA544B

Código CSS:

background-image: linear-gradient(135deg, #FA844B 1%, #FA544B 87%);

Radial

HEX #FA844B a HEX #FA544B

Código CSS:

background-image: radial-gradient(circle, #FA844B 7%, #FA544B 96%);

HEX #FA544B a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #FA544B 14%, #FA844B 89%);

HEX #FA544B a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #FA544B 3%, #FA844B 96%);

HEX #FA844B a HEX #FA834B

Código CSS:

background-image: linear-gradient(135deg, #FA844B 3%, #FA834B 90%);

HEX #FA844B a HEX #FA834B

Código CSS:

background-image: radial-gradient(circle, #FA844B 9%, #FA834B 93%);

HEX #FA834B a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #FA834B 11%, #FA844B 93%);

HEX #FA834B a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #FA834B 2%, #FA844B 97%);

HEX #FA844B a HEX #FAB14B

Código CSS:

background-image: linear-gradient(135deg, #FA844B 4%, #FAB14B 97%);

HEX #FA844B a HEX #FAB14B

Código CSS:

background-image: radial-gradient(circle, #FA844B 6%, #FAB14B 90%);

HEX #FAB14B a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #FAB14B 12%, #FA844B 93%);

HEX #FAB14B a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #FAB14B 11%, #FA844B 95%);

HEX #FA844B a HEX #FAE04B

Código CSS:

background-image: linear-gradient(135deg, #FA844B 0%, #FAE04B 87%);

HEX #FA844B a HEX #FAE04B

Código CSS:

background-image: radial-gradient(circle, #FA844B 7%, #FAE04B 91%);

HEX #FAE04B a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #FAE04B 5%, #FA844B 96%);

HEX #FAE04B a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #FAE04B 1%, #FA844B 88%);

Gradientes de 2 colores de #FA844B - Colores más oscuros

Lineal

HEX #FA844B a HEX #F96923

Código CSS:

background-image: linear-gradient(135deg, #FA844B 11%, #F96923 88%);

Radial

HEX #FA844B a HEX #F96923

Código CSS:

background-image: radial-gradient(circle, #FA844B 1%, #F96923 89%);

HEX #F96923 a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #F96923 0%, #FA844B 93%);

HEX #F96923 a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #F96923 11%, #FA844B 93%);

HEX #FA844B a HEX #FBA074

Código CSS:

background-image: linear-gradient(135deg, #FA844B 3%, #FBA074 96%);

HEX #FA844B a HEX #FBA074

Código CSS:

background-image: radial-gradient(circle, #FA844B 10%, #FBA074 95%);

HEX #FBA074 a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #FBA074 1%, #FA844B 93%);

HEX #FBA074 a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #FBA074 0%, #FA844B 99%);

HEX #FA844B a HEX #FCBB9C

Código CSS:

background-image: linear-gradient(135deg, #FA844B 0%, #FCBB9C 93%);

HEX #FA844B a HEX #FCBB9C

Código CSS:

background-image: radial-gradient(circle, #FA844B 13%, #FCBB9C 94%);

HEX #FCBB9C a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #FCBB9C 9%, #FA844B 93%);

HEX #FCBB9C a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #FCBB9C 5%, #FA844B 93%);

Gradientes de 2 colores de #FA844B - Colores análogos

Lineal

HEX #FA844B a HEX #FA544B

Código CSS:

background-image: linear-gradient(135deg, #FA844B 7%, #FA544B 94%);

Radial

HEX #FA844B a HEX #FA544B

Código CSS:

background-image: radial-gradient(circle, #FA844B 14%, #FA544B 94%);

HEX #FA544B a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #FA544B 11%, #FA844B 91%);

HEX #FA544B a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #FA544B 13%, #FA844B 94%);

HEX #FA844B a HEX #FA834B

Código CSS:

background-image: linear-gradient(135deg, #FA844B 11%, #FA834B 90%);

HEX #FA844B a HEX #FA834B

Código CSS:

background-image: radial-gradient(circle, #FA844B 9%, #FA834B 97%);

HEX #FA834B a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #FA834B 12%, #FA844B 88%);

HEX #FA834B a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #FA834B 13%, #FA844B 93%);

HEX #FA844B a HEX #FAB14B

Código CSS:

background-image: linear-gradient(135deg, #FA844B 2%, #FAB14B 100%);

HEX #FA844B a HEX #FAB14B

Código CSS:

background-image: radial-gradient(circle, #FA844B 4%, #FAB14B 87%);

HEX #FAB14B a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #FAB14B 11%, #FA844B 89%);

HEX #FAB14B a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #FAB14B 7%, #FA844B 95%);

HEX #FA844B a HEX #FAE04B

Código CSS:

background-image: linear-gradient(135deg, #FA844B 0%, #FAE04B 95%);

HEX #FA844B a HEX #FAE04B

Código CSS:

background-image: radial-gradient(circle, #FA844B 2%, #FAE04B 87%);

HEX #FAE04B a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #FAE04B 0%, #FA844B 96%);

HEX #FAE04B a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #FAE04B 14%, #FA844B 99%);

Gradientes de 2 colores de #FA844B - Colores monocromáticos

Lineal

HEX #FA844B a HEX #F96923

Código CSS:

background-image: linear-gradient(135deg, #FA844B 10%, #F96923 94%);

Radial

HEX #FA844B a HEX #F96923

Código CSS:

background-image: radial-gradient(circle, #FA844B 0%, #F96923 88%);

HEX #F96923 a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #F96923 5%, #FA844B 88%);

HEX #F96923 a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #F96923 12%, #FA844B 90%);

HEX #FA844B a HEX #FBA074

Código CSS:

background-image: linear-gradient(135deg, #FA844B 12%, #FBA074 94%);

HEX #FA844B a HEX #FBA074

Código CSS:

background-image: radial-gradient(circle, #FA844B 4%, #FBA074 100%);

HEX #FBA074 a HEX #FA844B

Código CSS:

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

HEX #FBA074 a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #FBA074 3%, #FA844B 89%);

HEX #FA844B a HEX #FCBB9C

Código CSS:

background-image: linear-gradient(135deg, #FA844B 5%, #FCBB9C 95%);

HEX #FA844B a HEX #FCBB9C

Código CSS:

background-image: radial-gradient(circle, #FA844B 2%, #FCBB9C 86%);

HEX #FCBB9C a HEX #FA844B

Código CSS:

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

HEX #FCBB9C a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #FCBB9C 2%, #FA844B 86%);

Gradientes de 2 colores de #FA844B - Colores parcialmente complementarios

Lineal

HEX #FA844B a HEX #A0FA4B

Código CSS:

background-image: linear-gradient(135deg, #FA844B 6%, #A0FA4B 94%);

Radial

HEX #FA844B a HEX #A0FA4B

Código CSS:

background-image: radial-gradient(circle, #FA844B 12%, #A0FA4B 90%);

HEX #A0FA4B a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #A0FA4B 12%, #FA844B 97%);

HEX #A0FA4B a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #A0FA4B 9%, #FA844B 86%);

HEX #FA844B a HEX #4B5AFA

Código CSS:

background-image: linear-gradient(135deg, #FA844B 9%, #4B5AFA 86%);

HEX #FA844B a HEX #4B5AFA

Código CSS:

background-image: radial-gradient(circle, #FA844B 14%, #4B5AFA 96%);

HEX #4B5AFA a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #4B5AFA 3%, #FA844B 90%);

HEX #4B5AFA a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #4B5AFA 7%, #FA844B 97%);

Gradientes de 2 colores de #FA844B - Colores triádicos

Lineal

HEX #FA844B a HEX #4BFA83

Código CSS:

background-image: linear-gradient(135deg, #FA844B 9%, #4BFA83 92%);

Radial

HEX #FA844B a HEX #4BFA83

Código CSS:

background-image: radial-gradient(circle, #FA844B 12%, #4BFA83 100%);

HEX #4BFA83 a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #4BFA83 3%, #FA844B 96%);

HEX #4BFA83 a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #4BFA83 9%, #FA844B 99%);

HEX #FA844B a HEX #834BFA

Código CSS:

background-image: linear-gradient(135deg, #FA844B 9%, #834BFA 95%);

HEX #FA844B a HEX #834BFA

Código CSS:

background-image: radial-gradient(circle, #FA844B 13%, #834BFA 94%);

HEX #834BFA a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #834BFA 2%, #FA844B 91%);

HEX #834BFA a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #834BFA 4%, #FA844B 98%);

Gradientes de 2 colores de #FA844B - Colores rectangulares (tetradicos)

Lineal

HEX #FA844B a HEX #A0FA4B

Código CSS:

background-image: linear-gradient(135deg, #FA844B 10%, #A0FA4B 99%);

Radial

HEX #FA844B a HEX #A0FA4B

Código CSS:

background-image: radial-gradient(circle, #FA844B 5%, #A0FA4B 93%);

HEX #A0FA4B a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #A0FA4B 1%, #FA844B 86%);

HEX #A0FA4B a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #A0FA4B 0%, #FA844B 98%);

HEX #FA844B a HEX #4BC3FA

Código CSS:

background-image: linear-gradient(135deg, #FA844B 3%, #4BC3FA 98%);

HEX #FA844B a HEX #4BC3FA

Código CSS:

background-image: radial-gradient(circle, #FA844B 14%, #4BC3FA 100%);

HEX #4BC3FA a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #4BC3FA 11%, #FA844B 89%);

HEX #4BC3FA a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #4BC3FA 12%, #FA844B 93%);

HEX #FA844B a HEX #A64BFA

Código CSS:

background-image: linear-gradient(135deg, #FA844B 6%, #A64BFA 100%);

HEX #FA844B a HEX #A64BFA

Código CSS:

background-image: radial-gradient(circle, #FA844B 4%, #A64BFA 96%);

HEX #A64BFA a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #A64BFA 4%, #FA844B 89%);

HEX #A64BFA a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #A64BFA 2%, #FA844B 93%);

Gradientes de 2 colores de #FA844B - Colores cuadrados

Lineal

HEX #FA844B a HEX #6BFA4B

Código CSS:

background-image: linear-gradient(135deg, #FA844B 7%, #6BFA4B 92%);

Radial

HEX #FA844B a HEX #6BFA4B

Código CSS:

background-image: radial-gradient(circle, #FA844B 1%, #6BFA4B 86%);

HEX #6BFA4B a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #6BFA4B 13%, #FA844B 94%);

HEX #6BFA4B a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #6BFA4B 5%, #FA844B 92%);

HEX #FA844B a HEX #4BC3FA

Código CSS:

background-image: linear-gradient(135deg, #FA844B 9%, #4BC3FA 93%);

HEX #FA844B a HEX #4BC3FA

Código CSS:

background-image: radial-gradient(circle, #FA844B 5%, #4BC3FA 93%);

HEX #4BC3FA a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #4BC3FA 10%, #FA844B 96%);

HEX #4BC3FA a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #4BC3FA 8%, #FA844B 93%);

HEX #FA844B a HEX #DA4BFA

Código CSS:

background-image: linear-gradient(135deg, #FA844B 12%, #DA4BFA 93%);

HEX #FA844B a HEX #DA4BFA

Código CSS:

background-image: radial-gradient(circle, #FA844B 5%, #DA4BFA 100%);

HEX #DA4BFA a HEX #FA844B

Código CSS:

background-image: linear-gradient(135deg, #DA4BFA 8%, #FA844B 97%);

HEX #DA4BFA a HEX #FA844B

Código CSS:

background-image: radial-gradient(circle, #DA4BFA 12%, #FA844B 99%);

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.