Convertir colores

Conversiones – Detalles – Armonías – Imágenes – Vista previa – Simulación de daltonismo – CSS – Ayuda

Conversiones

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.

• 📕 HOWCOLORS.WORK
• Distribución
• Brillo & Gradientes de saturación
• Analógicas
• Tríada
• Complementarios
• Complementarios divididos
• Cuadrado
• Rectángulo
• Punto dulce
• Fondo blanco
• Comprobación de contraste de color
• Fondo negro
• Comprobación de contraste de color
• RGB 73, 108, 60 Fondo
• Dicromía
• Tricromía
• Monocromía
• Texto
• Border
• Background
• 📕 CÓMO FUNCIONAN LOS COLORES
• Conversión
• Detalles
• Armonías
• Imágenes SVG
• Previsiones
• Simulación de Ceguera al Color
• Ejemplos de CSS
• Cubo de colores
• Comprobador de contraste de colores

📕 HOWCOLORS.WORK

Una guía de notación de colores CSS.

o comprarlo en Leanpub!

Detalles

El color RGB 73, 108, 60 es un color oscuro, y la versión websafe es hex 336633. Un complemento de este color sería 95, 60, 108, y la versión en escala de grises es 92, 92, 92.
Una versión 20% más clara del color original es 123, 160, 108, y 26, 60, 16 es el color 20% más oscuro. Si se satura el color un 10%, se obtiene 65, 108, 49, y si se desatura un 10%, es 81, 108, 71.

Distribución

Brillo & Gradientes de saturación

Estos gradientes muestran cómo cambia el color RGB 73, 108, 60 al cambiar el brillo en un 10%. 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 RGB 73, 108, 60 cambiando la saturación en un 10% en su lugar.

Armonías

Imágenes SVG

Una selección de imágenes SVG utilizando la versión hexadecimal #496C3C del color actual.

Previsualizaciones

RGB 73, 108, 60 Fondo

Simulación de daltonismo

La deficiencia en la visión del color es un tema muy complejo, y no podría describir las diferentes causas mejor de lo que lo hace la Wikipedia, así que si quieres aprender más, deberías consultar su artículo sobre el daltonismo.

Dicromía

Tricromía

Monocromía

Ejemplos CSS

Texto

La propiedad CSS para cambiar el color del texto a RGB 73, 108, 60 se llama «color». La propiedad color se puede establecer en clases, ids o directamente en el elemento HTML.

Este ejemplo muestra cómo se ve el texto en el color rgb(73, 108, 60).

📋 Copy Code

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 rgb(73, 108, 60) de 4 píxeles.

📋 Copy Code

Border

La propiedad CSS para cambiar el borde de un elemento a RGB 73, 108, 60 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».

📋 Copy Code

Si sólo se debe cambiar el color del borde utilice la propiedad border-color.

📋 Copy Code

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 rgb(73, 108, 60).

📋 Copy Code

Background

La propiedad CSS para cambiar el color de fondo de un elemento a RGB 73, 108, 60 se llama «background». La propiedad background puede establecerse en clases, ids o directamente en el elemento HTML.

📋 Copy Code

Si sólo se debe cambiar el color de fondo se puede utilizar:

📋 Copy Code

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 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ómprala en Leanpub!

Cómo utilizar la conversión de colores

Conversión

Para convertir, pega una cadena en uno de estos formatos de color, por ejemplo, «496C3C», 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 «104°, 44%, 42%» 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(104°, 44%, 42%)» le dará el color HSV correcto ya que no es necesario adivinar el formato. Otros ejemplos serían «CIELAB(41,95, -22,52, 22,92)», «CIELCH(42, 32,133, 134,485)», «YXY(12,4678, 0,3233, 0,4517)» y «CMYK(0,32, 0,00, 0,44, 0,58)».

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». Puede 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. Puede descargar estos archivos y utilizarlos en sus proyectos, por ejemplo, como imagen de fondo.

Previsiones

¿Quiere ver cómo queda su color sobre un fondo blanco o negro? Entonces deberías ver la sección «Previews» de la página de color.

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 seleccionas un color para tu proyecto, es posible que quieras tener en cuenta cómo este color es percibido por 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 usted es nuevo en el desarrollo web, es posible que desee ver cómo aplicar su color como primer plano, fondo o color del 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

¿Te has decidido por unos 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 GIMP, Adobe® ASE o Tailwind CSS. Además, puedes ver todo como 🌈 Gradiente CSS, 🔧 Sombra de texto CSS, o 📷 Imagen de la 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 decidas 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.