Conversión de colores
Conversiones – Detalles – Armonías – Imágenes – Vista previa – Simulación de daltonismo – CSS – Ayuda
Aquí ves tu color convertido a 15 formatos de color diferentes como RGB, CMYK, HSV, HSL, CIELab, Android, Decimal y YUV.
🤖 Convierte varios colores a la vez o 📢 obtén conversiones y armonías a través de la API REST.
| Formato | Color |
|---|---|
| Hex | B76E79 📋 |
| RGB | 183, 110, 121 📋 | Porcentaje RGB | 72%, 43%, 47% 📋 | CMY | 0.2824, 0.5686, 0.5255 📋 |
| CMYK | 0.00, 0.40, 0.34, 0.28 📋 |
| HSL | 351°, 34%, 57% 📋 | HSV | 351°, 40%, 72% 📋 | XYZ | 28.5556, 22.5996, 20.9463 📋 |
| Formato | Color |
|---|---|
| RYB | 183, 110, 121 📋 | Decimal | 12021369 📋 |
| CIELab | 54.66, 30.32, 6.37 📋 |
| CIELCh | 55, 30.982, 11.862 📋 |
| Yxy | 22.5996, 0.3960, 0.3134 📋 | Android (android.graphics.Color) | 4290211449 (0xFFB76E79) 📋 | YUV | 133.0810, -5.9559, 43.7790 📋 |
📕 HOWCOLORS.WORK
Una guía de notación de colores CSS.
o cómpralo en Leanpub!
Detalles
El color Hex B76E79 es un color oscuro, y la versión websafe es hex 996666, y el nombre del color es rose gold. Un complemento de este color sería 6EB7AC, y la versión en escala de grises es 858585.
Una versión 20% más clara del color original es F1A3AD, y 803D49 es el color 20% más oscuro. Si se satura el color en un 10%, se obtiene B75C69, y si se desatura en un 10%, es B78089.
Distribución
- Rojo (72%)
- Verde (43%)
- Azul (47%)
- Rojo (72%)
- Amarillo (43%)
- Azul (47%)
- Cian (0%)
- Magenta (40%)
- Amarillo (34%)
- Negro (28%)
- Cian (28%)
- Magenta (57%)
- Amarillo (53%)
Brillo & Gradientes de saturación
Estos gradientes muestran cómo cambia el color Hex B76E79 al cambiar el brillo en un 10 por ciento. La primera figura muestra un cambio de +10% para cada color y la segunda figura -10%.
Similar a los gradientes de brillo pero los siguientes gradientes de saturación muestran un cambio del color Hex B76E79 al cambiar la saturación en un 10% en su lugar.
Armonías
Analógicas
La armonía de colores análogos consiste en tres colores que están uno al lado del otro en la rueda de colores.
- AD7094
- B76E79
- B37360
La armonía de colores triádica agrupa tres colores que están uniformemente espaciados entre sí y forman un triángulo en la rueda de colores.
- B76E79
- 6C8C5A
- 3F8AB5
La combinación de colores complementarios es un par de colores que están en el lado opuesto de la rueda de colores.
- B76E79
- 6EB7AC
Complementarios divididos
Los colores complementarios divididoscolores complementarios difieren del esquema de colores complementarios. El esquema consiste en tres colores, el color original y dos vecinos del color complementario.
- 118FA6
- B76E79
- 4B9071
El esquema cuadrado es como el esquema de color del rectángulo, pero los cuatro colores están espaciados uniformemente en la rueda de color.
- B76E79
- 8A854E
- 24918D
- 6D82B7
.
La combinación de colores rectángulo consiste en cuatro colores que forman un rectángulo en la rueda de colores.
- B76E79
- A97854
- 24918D
- 2F8CB1
Punto dulce
El punto dulce agrupa el color original y cinco colores complementarios.
- B76E79
- EDD1D5
- AB6EB7
- 78676A
- . F7F7F7
- 787878
Imágenes SVG
Una selección de imágenes SVG que utilizan la versión hexadecimal #B76E79 del color actual.
Previsualizaciones
Fondo blanco
Esta previsualización muestra cómo se ve el color Hex B76E79 sobre un fondo blanco.
Comprobación de contraste de color
Si quieres comprobar con otras combinaciones de colores, pruebe el comprobador de contraste de color.
Fondo negro
Esta vista previa muestra el aspecto del color Hex B76E79 sobre un fondo negro.
Comprobación de contraste de color
Si quieres comprobar con otras combinaciones de colores, pruebe el Comprobador de contraste de color.
Fondo hexadecimal B76E79
Esta vista previa muestra cómo se ve el texto negro sobre un fondo con el color Hex B76E79.
Esta vista previa muestra cómo se ve el texto blanco sobre un fondo con el color Hex B76E79.
Dicromía
B76E79
858384
957E76
B76E77
Tricromía
B76E79
977B80
A17877
B76E78
Monocromía
B76E79
858585
977D81
Ejemplos de CSS
Texto
La propiedad CSS para cambiar el color del texto a Hex B76E79 se llama «color». La propiedad color puede establecerse en clases, ids o directamente en el elemento HTML.
Este ejemplo muestra el aspecto del texto en el color #B76E79.
.text, #text, p{color:#B76E79}Si quieres añadir una sombra de texto en ese color utiliza la propiedad text-shadow, puedes generar una sombra de texto directamente con nuestro 🔧 Generador de Sombras de Texto CSS.
Aquí puedes ver cómo queda el texto negro con una sombra de color #B76E79 de 4 píxeles.
.shadow{ text-shadow: 4px 4px 2px #B76E79 } Border
La propiedad CSS para cambiar el borde de un elemento a Hex B76E79 se llama «border». La propiedad border puede establecerse en clases, ids o directamente en el elemento HTML.
Este ejemplo muestra el color como border, se puede aplicar a través de la propiedad CSS «border» o «border-color».
.border, #border, table{ border:4px solid #B76E79 }Si sólo se quiere cambiar el color del borde utiliza la propiedad border-color.
.border{ border-color:#B76E79 }Si quieres añadir una sombra de caja en ese color utiliza:
Aquí puedes ver cómo queda una caja con una sombra de 4 píxeles de color #B76E79.
.boxshadow{ -moz-box-shadow:4px 4px 4px 4px #B76E79; -webkit-box-shadow:4px 4px 4px 4px #B76E79; box-shadow:4px 4px 4px 4px #B76E79 }Fondo
La propiedad CSS para cambiar el color de fondo de un elemento a Hex B76E79 se llama «fondo». La propiedad background se puede establecer en clases, ids o directamente en el elemento HTML.
.background, #background, body{ background:#B76E79 }Si sólo se debe cambiar el color de fondo se puede utilizar:
.background{ background-color:#B76E79 }Este ejemplo muestra el color como fondo, se aplica a través de la propiedad CSS «background».
Para optimizar y comprimir tu código CSS, puedes utilizar nuestro compresor y optimizador de CSS online basado en csstidy. Si quieres crear un degradado lineal o radial como fondo o borde, consulta nuestro 🌈 Generador de degradados CSS.
📕 CÓMO FUNCIONAN LOS COLORES
Una guía de notación de colores CSS.
o cómpralo en Leanpub!
Para convertir, pega una cadena en uno de estos formatos de color, por ejemplo, «B76E79», en el campo de entrada y haz clic en convertir. El resultado estará en la sección Conversiones, y las siguientes secciones le proporcionarán más detalles sobre el color.
Algunos formatos de color utilizan la misma notación, y la conversión adivinará la composición de la consulta de búsqueda. Como ejemplo, si intenta convertir la cadena «351°, 40%, 72%» podría ser un color HSV o HSL, la conversión asumirá HSL en este caso.
Como esto podría llevar a conversiones erróneas, puede definir qué formato está pasando envolviendo su cadena de color entre paréntesis con el formato delante. La cadena de búsqueda «HSV(351°, 40%, 72%)» le dará el color HSV correcto ya que no es necesario adivinar el formato. Otros ejemplos serían «CIELAB(54,66, 30,32, 6,37)», «CIELCH(55, 30,982, 11,862)», «YXY(22,5996, 0,3960, 0,3134)» y «CMYK(0,00, 0,40, 0,34, 0.28)».
Detalles
En la sección de detalles, primero se obtiene un resumen del color y, si está disponible, una descripción como «rojo apagado oscuro». Puedes ver la distribución del color en diferentes formatos. Por ejemplo, en el formato RGB, puedes conocer la cantidad de rojo, verde y azul de tu color.
Por último, obtienes los gradientes de brillo y saturación de tu color en pasos del 10%. Así que si necesitas una versión más brillante o más oscura, puedes elegirla desde aquí.
Armonías
Las armonías básicamente te muestran colores que van bien con el color que estás viendo actualmente. Si te gusta una de las armonías, puedes crear directamente un 🌈 Gradiente CSS o una 🔧 Sombra de Texto CSS a partir de ella o ver la armonía como un 🖌️ Cubo de Color.
Imágenes SVG
Esta breve sección te muestra una selección de archivos SVG que utilizan el color actual. Puedes descargar estos archivos y utilizarlos en tus proyectos, por ejemplo, como imagen de fondo.
Previsiones
¿Quieres ver cómo queda tu color sobre un fondo blanco o negro? Entonces deberías echar un vistazo a la sección «Previews» de la página de colores.
También puedes ver el contraste de tu color sobre estos fondos y obtener un enlace al Comprobador de Contraste de Color con tu color preseleccionado.
Simulación de Ceguera al Color
Cuando selecciones un color para tu proyecto, puede que quieras tener en cuenta cómo percibe este color cualquier persona con una deficiencia de visión del color. Por lo tanto, he añadido esta sección que muestra vistas previas de su color para diferentes deficiencias de visión del color.
Ejemplos de CSS
Si eres nuevo en el desarrollo web, es posible que desees ver cómo aplicar tu color como primer plano, fondo o borde. La sección «Ejemplos CSS» te ofrece exactamente esto, ayuda sobre cómo utilizar el color actual en CSS.
Si estás viendo un color en un formato no disponible en CSS, entonces verás el color convertido a un formato compatible.
Cubo de colores
¿Has decidido los colores para tu próximo proyecto y quieres descargarlos como paleta o compartirlos con tus amigos para discutir tu decisión? Entonces deberías echar un vistazo al cubo de colores. Te permite almacenar hasta 10 colores, crea automáticamente paletas de colores para cada uno de estos colores en función de la luminosidad y te ofrece una matriz WCAG.
Puedes descargar cada una de las paletas de colores o los colores seleccionados como una paleta de GIMP, Adobe® ASE o Tailwind CSS. Además, puedes ver todo como 🌈 Gradiente CSS, 🔧 Sombra de texto CSS o 📷 Imagen de paleta de colores.
Para añadir un color a tu cubo de colores, pongo un enlace «❤️ Añadir este color al cubo» en la sección de la cabecera de cada página de este sitio web.
Comprobador de contraste de colores
Cuando decides los colores para un proyecto, es esencial tener en cuenta el contraste de colores. Mi Comprobador de Contraste de Colores le permite comprobar los colores que ha seleccionado de acuerdo con las Directrices de Accesibilidad al Contenido en la Web (WCAG) 2.0.