Convertidor de Codigo de Color

Convierte codigos de color en lote entre formatos HEX, RGB, HSL. Pega multiples colores y obtiene todas las conversiones a la vez.

Caracteristicas principales

Conversión masiva de colores
Soporte para HEX, RGB, HSL, RGBA, HSLA
Copia de resultados individuales o de todos
Vista previa del color para cada entrada

Guide

Los colores en sistemas digitales se representan mediante códigos numéricos. Diferentes contextos exigen diferentes formatos de código de color. Los desarrolladores web usan códigos hexadecimales y funciones de color CSS. Los diseñadores gráficos trabajan con CMYK para impresión y RGB para pantalla. Los diseñadores de UI hacen referencia a HSL para ajustes de color intuitivos. Entender estos formatos, cómo se relacionan entre sí y cuándo usar cada uno es esencial para cualquiera que trabaje con color digital. Esta guía cubre los principales formatos de código de color, las matemáticas de conversión y aplicaciones prácticas en diseño y desarrollo. RGB (Rojo, Verde, Azul) es el modelo de color fundamental para las pantallas. Cada píxel de tu monitor, teléfono o tableta produce color mezclando luz roja, verde y azul a diferentes intensidades. Cada canal va de 0 (sin luz) a 255 (intensidad máxima). RGB(255, 0, 0) es rojo puro. RGB(0, 255, 0) es verde puro. RGB(0, 0, 255) es azul puro. RGB(255, 255, 255) es blanco (todos los canales al máximo). RGB(0, 0, 0) es negro (sin luz). RGB(128, 128, 128) es un gris medio (partes iguales de cada canal a media intensidad). El modelo RGB se llama aditivo porque combinar todos los colores a intensidad completa produce blanco, lo que coincide con cómo funciona la luz físicamente. Los códigos de color hexadecimales son el formato de color más común en la web. Un código hex es simplemente un valor RGB escrito en base 16. El código hex #FF0000 es RGB(255, 0, 0), que es rojo. Los dos primeros caracteres (FF) representan el canal rojo, los dos siguientes (00) representan el verde y los dos últimos (00) representan el azul. FF en hexadecimal equivale a 255 en decimal. 00 equivale a 0. 80 equivale a 128. Convertir entre hex y RGB es una conversión de base: divide el código hex en tres pares y convierte cada par de base 16 a base 10. Los códigos hexadecimales abreviados usan tres caracteres en lugar de seis. #F00 es equivalente a #FF0000. Cada carácter se duplica: #F00 se convierte en #FF0000, #39F se convierte en #3399FF, #000 se convierte en #000000. Esta abreviatura solo funciona cuando cada par consta de dos caracteres idénticos. #3A7F2B no se puede abreviar porque ningún par tiene dígitos idénticos. Usa la abreviatura en código para mayor brevedad cuando esté disponible, pero ten en cuenta que algunas herramientas y sistemas de diseño siempre generan la forma completa de seis caracteres. Los códigos hexadecimales de ocho dígitos añaden un canal alfa (transparencia). #FF000080 es rojo con un 50 por ciento de opacidad. Los dos últimos dígitos (80, que es 128 en decimal, aproximadamente el 50 por ciento de 255) definen el valor alfa. #FF0000FF es rojo completamente opaco (idéntico a #FF0000). #FF000000 es rojo completamente transparente (invisible). El hex de ocho dígitos está soportado en CSS moderno y todos los navegadores principales. Ten en cuenta que algunos formatos (como el desarrollo en Android) colocan el canal alfa primero (#80FF0000), así que comprueba la convención de tu plataforma. HSL (Tono, Saturación, Luminosidad) representa el color de una manera que coincide con cómo los humanos piensan sobre el color. El tono es el ángulo del color en una rueda de colores: 0 grados es rojo, 120 grados es verde, 240 grados es azul y 360 grados vuelve al rojo. La saturación es la intensidad del color de 0 por ciento (gris) a 100 por ciento (completamente vívido). La luminosidad es el brillo de 0 por ciento (negro) a 100 por ciento (blanco), siendo el 50 por ciento el color normal. HSL(0, 100 por ciento, 50 por ciento) es rojo puro. HSL(120, 100 por ciento, 50 por ciento) es verde puro. HSL(60, 100 por ciento, 50 por ciento) es amarillo puro, a medio camino entre el rojo y el verde en la rueda de tono. La ventaja práctica de HSL sobre RGB es la manipulación intuitiva del color. Para aclarar un color, aumenta el valor de luminosidad. Para hacerlo más apagado, disminuye la saturación. Para cambiar el tono (de rojo hacia naranja, por ejemplo), ajusta el ángulo de tono. En RGB, lograr estos mismos ajustes exige cambiar múltiples valores de canal simultáneamente, lo que hace más difícil predecir el resultado. Los diseñadores que construyen paletas de colores a menudo trabajan en HSL porque pueden crear variaciones armoniosas ajustando sistemáticamente un parámetro cada vez. HSV (Tono, Saturación, Valor) está estrechamente relacionado con HSL pero define el brillo de manera diferente. En HSV, el valor representa el brillo máximo del color. A V=100 por ciento, el color es tan brillante como sea posible. A V=0 por ciento, el color es negro independientemente del tono y la saturación. HSV es el modelo de color nativo en muchas herramientas de diseño, incluido el selector de color de Adobe Photoshop. La diferencia entre HSL y HSV es sutil pero importante: HSL(0, 100 por ciento, 100 por ciento) es blanco, mientras que HSV(0, 100 por ciento, 100 por ciento) es rojo puro. HSV es más intuitivo para pintores y diseñadores que piensan en matizar con blanco frente a sombrear con negro. HSL es más simétrico y a menudo preferido en CSS. HWB (Tono, Blancura, Negritud) es una función de color CSS más nueva que ofrece otro modelo intuitivo. El tono es el mismo que en HSL y HSV. La blancura define cuánto blanco se mezcla (0 por ciento a 100 por ciento). La negritud define cuánto negro se mezcla (0 por ciento a 100 por ciento). HWB(0, 0 por ciento, 0 por ciento) es rojo puro. HWB(0, 100 por ciento, 0 por ciento) es blanco. HWB(0, 0 por ciento, 100 por ciento) es negro. HWB(0, 50 por ciento, 0 por ciento) es un rosa claro (rojo mezclado con 50 por ciento de blanco). Muchos diseñadores encuentran HWB el modelo más intuitivo porque refleja el concepto físico de mezclar pintura con blanco o negro. CSS soporta hwb() en todos los navegadores modernos. CMYK (Cian, Magenta, Amarillo, Clave/Negro) es el modelo de color usado en impresión. Mientras que las pantallas añaden luz (mezcla de colores aditiva), las impresoras depositan tinta que absorbe luz (mezcla de colores sustractiva). La tinta cian absorbe la luz roja. La magenta absorbe el verde. El amarillo absorbe el azul. El canal clave (negro) existe porque mezclar tintas CMY teóricamente produce negro pero prácticamente produce un marrón oscuro embarrado. Añadir una tinta negra dedicada produce oscuros más limpios y ahorra tinta de color. Los valores CMYK van de 0 por ciento a 100 por ciento para cada canal. Convertir entre RGB y CMYK no es una simple fórmula matemática. La conversión teórica (C = 1 - R/255, M = 1 - G/255, Y = 1 - B/255, luego extrayendo K como el mínimo de C, M, Y) te da un punto de partida, pero los colores de impresión reales dependen de la tinta, el papel, la prensa de impresión y el perfil de color ICC. Los flujos de trabajo de impresión profesional usan sistemas de gestión de color con perfiles calibrados para asegurar una reproducción precisa. El convertidor WebRecast realiza la conversión matemática, que es adecuada para aproximaciones, referencias rápidas y trabajos de color no críticos. Para trabajos de impresión de producción, usa siempre un flujo de trabajo con gestión de color y perfiles calibrados. Las funciones de color CSS se han expandido significativamente en los últimos años. Los formatos tradicionales son hex (#FF0000), rgb(255, 0, 0) y hsl(0, 100 por ciento, 50 por ciento). CSS moderno también soporta la función hwb() (Tono, Blancura, Negritud), la función lab() (espacio de color CIE LAB para colores perceptualmente uniformes), la función lch() (CIE LCH, la forma cilíndrica de LAB) y la función oklch() (una versión corregida de LCH que produce resultados más predecibles). Estos espacios de color más nuevos abordan limitaciones en RGB y HSL, particularmente en torno a la uniformidad perceptual, donde dos colores con la misma luminosidad HSL pueden parecer bastante diferentes en brillo para el ojo humano. OKLCH merece especial atención porque se está convirtiendo rápidamente en el espacio de color recomendado para diseño web. OKLCH significa OK Lightness Chroma Hue (Luminosidad OK, Crominancia, Tono) y produce resultados perceptualmente uniformes. Esto significa que una luminosidad del 70 por ciento parece igual de brillante en todos los tonos, a diferencia de HSL donde el amarillo al 50 por ciento de luminosidad parece mucho más brillante que el azul al 50 por ciento de luminosidad. Para crear paletas de colores accesibles, generar estados de hover de botones consistentes y construir sistemas de tokens de diseño, OKLCH produce mejores resultados que HSL. La sintaxis es oklch(70 por ciento 0.15 250) donde 70 por ciento es luminosidad, 0.15 es crominancia (intensidad de color) y 250 es el ángulo de tono. Los colores CSS con nombre incluyen 148 nombres predefinidos como red, blue, coral, darkslategray y papayawhip. Estos nombres se asignan a valores hexadecimales específicos (coral es #FF7F50, papayawhip es #FFEFD5). Los colores con nombre son convenientes para prototipado y legibles en código, pero te limitan a una paleta fija. La mayoría del CSS de producción usa códigos hexadecimales o funciones HSL para un control preciso. Los nombres de color tienen orígenes históricos: algunos provienen de los colores del sistema de ventanas X11 de los años 80, razón por la cual hay rarezas como que darkgray sea más claro que gray. La transparencia alfa (opacidad) está disponible en todos los formatos de color CSS modernos. rgba(255, 0, 0, 0.5) es rojo con 50 por ciento de opacidad. hsla(0, 100 por ciento, 50 por ciento, 0.5) es el mismo color. En CSS moderno (Nivel 4), también puedes escribir rgb(255 0 0 / 50 por ciento) usando la sintaxis separada por espacios con una barra antes del valor alfa. El canal alfa va de 0 (completamente transparente) a 1 (completamente opaco) en funciones CSS, o de 0 a 255 en hex de 8 dígitos. La diferencia entre la transparencia alfa en un color y la propiedad CSS opacity es importante: opacity afecta a todo el elemento y sus hijos, mientras que el alfa de color afecta solo a ese valor de color específico. El contraste de color es una consideración crítica para la accesibilidad. Las Directrices de Accesibilidad para el Contenido Web (WCAG) exigen relaciones de contraste mínimas entre los colores del texto y del fondo. El Nivel AA exige 4,5:1 para texto normal y 3:1 para texto grande. El Nivel AAA exige 7:1 para texto normal y 4,5:1 para texto grande. La relación de contraste se calcula a partir de la luminancia relativa de dos colores usando la fórmula (L1 + 0,05) / (L2 + 0,05), donde L1 es el color más claro. La luminancia relativa usa una fórmula ponderada que tiene en cuenta la percepción humana: L = 0,2126R + 0,7152G + 0,0722B (después de la corrección gamma). El verde contribuye más a la luminosidad percibida, razón por la cual el texto verde sobre blanco necesita valores RGB más altos que el texto rojo para alcanzar el mismo contraste. El daltonismo afecta aproximadamente al 8 por ciento de los hombres y al 0,5 por ciento de las mujeres. El tipo más común es el daltonismo rojo-verde (deuteranopía y protanopía), donde los rojos y verdes parecen similares. La tritanopía (daltonismo azul-amarillo) es rara. La acromatopsia (daltonismo completo) es extremadamente rara. Al seleccionar colores para interfaces, gráficos o visualizaciones de datos, evita depender únicamente del color para transmitir información. Usa el color en combinación con formas, patrones, etiquetas o posición. Probar tu paleta de colores con un simulador de daltonismo ayuda a identificar combinaciones problemáticas. Los colores azul y naranja son distinguibles por casi todos los tipos de daltonismo. Construir una paleta de colores para un sitio web o aplicación típicamente comienza con un color de marca principal. Desde esa base, derivas una paleta completa de tonos, matices y colores complementarios. En HSL, crear tonos significa disminuir la luminosidad manteniendo constantes el tono y la saturación. Crear matices significa aumentar la luminosidad. Crear un color complementario significa añadir 180 grados al tono. Los colores análogos están dentro de los 30 grados del tono base. Los colores triádicos están separados 120 grados. Los colores de complementario dividido están a 150 y 210 grados de la base. Estas relaciones de teoría del color son fáciles de calcular en HSL y engorrosas en RGB o hex. Los tokens de diseño y las propiedades personalizadas CSS (variables) son la forma moderna de gestionar colores en una base de código. Define tus colores una vez como propiedades personalizadas CSS: --color-primary: hsl(220, 90 por ciento, 56 por ciento); --color-primary-light: hsl(220, 90 por ciento, 72 por ciento); --color-primary-dark: hsl(220, 90 por ciento, 40 por ciento). Haz referencia a estas variables a lo largo de tus hojas de estilo. Cuando necesites cambiar el color principal, actualiza un valor. Los sistemas de diseño como Material Design y Tailwind CSS organizan los colores en escalas (50, 100, 200 hasta 900) que representan variaciones de luminosidad de cada tono. El modo oscuro exige un enfoque diferente del color que simplemente invertir todo. En el modo oscuro, los fondos son oscuros (no negro puro, lo cual causa demasiado contraste y fatiga visual) y el texto es claro (no blanco puro por la misma razón). Las superficies en diferentes niveles de elevación usan tonos de fondo ligeramente más claros. Los colores de marca a menudo necesitan saturación reducida y luminosidad aumentada en el modo oscuro para mantener la legibilidad sin parecer ásperos sobre fondos oscuros. Un sistema de color bien diseñado usando propiedades personalizadas CSS puede cambiar entre paletas claras y oscuras cambiando valores de variable en el nivel raíz. Los espacios de color más allá de sRGB se están volviendo importantes para las pantallas modernas. El espacio de color sRGB, usado por los valores hexadecimales y RGB estándar, cubre solo alrededor del 35 por ciento de los colores visibles. Display P3, usado por dispositivos Apple y muchos monitores modernos, cubre alrededor del 45 por ciento. Rec. 2020, usado en televisión HDR, cubre alrededor del 75 por ciento. Las nuevas funciones CSS color-mix(), color() y oklch() pueden acceder a estas gamas más amplias. Un color especificado como color(display-p3 1 0 0) produce un rojo más vívido que #FF0000 en pantallas que soportan P3. A medida que las pantallas de gama amplia se convierten en estándar, entender los espacios de color más allá de sRGB se vuelve cada vez más importante para ofrecer experiencias visuales vibrantes. Convertir colores de forma programática en JavaScript usa matemáticas directas. Para convertir hex a RGB: parseInt(hex.substring(1,3), 16) da el canal rojo, y de manera similar para verde y azul. Para convertir RGB a HSL: normaliza R, G, B al rango 0-1, calcula los valores máximo y mínimo, deriva la luminosidad como (max+min)/2, la saturación del delta entre máximo y mínimo, y el tono de qué canal es el máximo. Estas fórmulas están bien documentadas e implementadas en cada biblioteca de manipulación de color (chroma.js, color, tinycolor2 en JavaScript, colour en Python y palette en Rust). Los degradados usan múltiples códigos de color. Un degradado lineal CSS transiciona entre colores: background: linear-gradient(to right, #FF0000, #0000FF) crea un degradado de rojo a azul. Los degradados en RGB pueden producir colores intermedios embarrados porque la línea recta entre dos colores en el espacio RGB puede pasar por regiones no saturadas. Los degradados en HSL u oklch a menudo producen transiciones más vibrantes porque siguen la rueda de colores. La interpolación de degradados CSS moderna con "in oklch" produce transiciones perceptualmente suaves: background: linear-gradient(in oklch, #FF0000, #0000FF). Esta es una mejora notable para degradados entre colores complementarios. El convertidor de color WebRecast acepta entrada en cualquier formato soportado e instantáneamente muestra los valores equivalentes en todos los demás formatos. Introduce un código hex y ve los valores RGB, HSL, HSV y CMYK. Introduce un valor HSL y obtén los equivalentes hex y RGB. Esto elimina las matemáticas de conversión manual y reduce los errores al traducir entre herramientas de diseño (que pueden mostrar HSV) y CSS (que usa hex, RGB o HSL). El convertidor también muestra una vista previa visual del color para que puedas verificar que coincide con tu intención. El color en la visualización de datos exige especial atención. Los gráficos, diagramas y mapas deben usar colores que sean distinguibles entre sí, significativos para el espectador y accesibles para personas con deficiencias de visión de color. Las escalas de color secuenciales (de claro a oscuro de un tono) funcionan para datos continuos como temperatura o densidad de población. Las escalas de color divergentes (dos tonos que se encuentran en un punto medio neutro) funcionan para datos con un punto central significativo, como beneficio/pérdida o desviación de la media. Las escalas de color categóricas (tonos distintos) funcionan para datos nominales como categorías de productos. Herramientas como ColorBrewer proporcionan paletas respaldadas por investigación optimizadas para diferentes tipos de datos y requisitos de accesibilidad. La gestión del color entre dispositivos es un desafío continuo. El mismo código hex puede verse diferente en distintas pantallas debido a variaciones en la tecnología de visualización, calibración, brillo e iluminación ambiental. sRGB es el espacio de color estándar para la web, y la mayoría de las pantallas están calibradas para aproximarse a él. Los diseñadores profesionales calibran sus monitores usando colorímetros (dispositivos de hardware que miden la salida de la pantalla) y perfiles ICC. Para el desarrollo web donde no puedes controlar la pantalla del usuario, diseña con márgenes de contraste suficientes para que las ligeras diferencias de renderizado de color no afecten a la usabilidad o legibilidad. La extracción de color de imágenes es útil para crear paletas que coincidan con fotografías, activos de marca o imágenes de inspiración. El proceso implica muestrear colores dominantes usando algoritmos como agrupamiento de k-medias, corte mediano o cuantización de octree. Estos algoritmos agrupan píxeles similares e identifican los colores más representativos. Herramientas como Adobe Color, Coolors y varios paquetes npm (color-thief, vibrant.js) automatizan este proceso. Extraer de 5 a 8 colores dominantes de una imagen destacada y usarlos como colores de acento asegura consistencia visual entre las imágenes y los elementos de UI. La psicología del color, aunque no es una ciencia exacta, tiene algunos efectos documentados en la percepción. El rojo aumenta la urgencia percibida y se usa comúnmente para anuncios de ventas y estados de error. El azul transmite confianza y profesionalismo, razón por la cual las instituciones financieras y las plataformas de redes sociales lo favorecen. El verde señala éxito, seguridad y temas ambientales. El naranja se asocia con la acción y se usa comúnmente para botones de llamada a la acción. El amarillo llama la atención y funciona para advertencias. Estas asociaciones están influenciadas culturalmente: el blanco representa luto en algunas culturas de Asia Oriental, mientras que el rojo significa suerte y prosperidad en la cultura china. Considera el contexto cultural de tu público objetivo al elegir esquemas de color. Consejos prácticos para trabajar con códigos de color: incluye siempre el símbolo de almohadilla (#) al escribir códigos hexadecimales en CSS, ya que es sintaxis obligatoria. Usa dígitos hexadecimales en minúsculas para mayor consistencia (#ff0000 en lugar de #FF0000), que también es la convención usada por la mayoría de los minimizadores y formateadores CSS. Prefiere HSL en tu CSS cuando necesites crear variaciones de color de forma programática. Usa hex de 8 dígitos o rgba/hsla para la transparencia en lugar de la propiedad CSS opacity, que afecta a todo el elemento incluidos los hijos. Almacena tus colores de marca como tokens de diseño y hazles referencia de forma consistente en todo tu proyecto en lugar de codificar valores de color en componentes individuales. Al comunicar colores con un equipo de diseño, incluye tanto el código hex como la muestra visual para evitar ambigüedades por diferencias de calibración de pantalla.

Preguntas frecuentes

¿En qué se diferencia de un conversor de color normal?

Esta herramienta está diseñada para desarrolladores que necesitan convertir varios colores a la vez, con un formato de salida apto para código.

¿Qué formatos de color están admitidos?

Se admiten los formatos HEX (#RRGGBB), RGB(r,g,b), HSL(h,s%,l%), RGBA y HSLA.