Selector/Conversor de Colores
Selecciona colores y convierte entre diferentes formatos
Coincidencias alternativas:
Vista previa de la apariencia del texto
The quick brown fox jumps over the lazy dog
color: #6366f1; background-color: #6366f1; border-color: #6366f1;
Modelos de Color
Herramienta esencial para diseñadores y desarrolladores para convertir y manipular colores.
Entender los diferentes modelos de color es esencial para el desarrollo web, diseño UI y creación de arte digital.
Formatos Soportados
#RRGGBB
0-255, 0-255, 0-255
0°-360°, 0-100%, 0-100%
0°-360°, 0-100%, 0-100%
0-100%, ×4
16-235, 16-240, 16-240
L*: 0-100, a*/b*: -128 to +127
Detalles de los Formatos de Color
HEX (Hexadecimal)
Los colores HEX usan una notación hexadecimal de 6 dígitos precedida por #. Cada par representa valores de rojo, verde y azul (00-FF). La notación corta (#RGB) se expande a #RRGGBB. También se admite un formato de 8 dígitos (#RRGGBBAA) para transparencia alfa.
Uso: CSS, HTML, diseño web, mayoría de lenguajes de programación
RGB (Rojo, Verde, Azul)
El modelo RGB crea colores combinando luz roja, verde y azul - es un modelo aditivo. Este modelo corresponde directamente a cómo las pantallas emiten luz, haciéndolo el espacio de color nativo para pantallas digitales.
Uso: Pantallas, iluminación LED, CSS, procesamiento de imágenes digitales
HSL (Tono, Saturación, Luminosidad)
HSL representa colores basándose en la percepción humana. El tono es el ángulo en la rueda de colores, la saturación es la intensidad del color, y la luminosidad es el brillo del color. Esto hace que la manipulación del color sea más intuitiva.
Uso: CSS, generación de esquemas de color, selección de color intuitiva
HSV/HSB (Tono, Saturación, Valor)
HSV (también llamado HSB) es similar a HSL pero usa Valor en lugar de Luminosidad. El valor representa el brillo, con 100% siendo el más brillante. Este modelo coincide con cómo los artistas piensan sobre el color, haciéndolo popular en muchas aplicaciones gráficas.
Uso: Photoshop, GIMP, selectores de color en software gráfico
CMYK (Cian, Magenta, Amarillo, Clave/Negro)
CMYK es un modelo sustractivo utilizado para impresión. A diferencia de RGB que añade luz, CMYK resta luz del papel blanco. La 'K' significa Clave (negro), que mejora la calidad de impresión y reduce el uso de tinta.
Uso: Diseño impreso, impresión comercial, empaquetado
YCbCr (Luminancia, Crominancia)
YCbCr separa los componentes de luminancia (Y) y diferencia de color (Cb, Cr). Esta separación permite una compresión de video eficiente porque el ojo humano es más sensible al brillo que al color. Comúnmente utilizado en JPEG, MPEG y estándares de transmisión.
Uso: Compresión JPEG, codificación de video (H.264, HEVC), transmisión de TV
Lab (CIE L*a*b*)
Lab es un espacio de color perceptualmente uniforme diseñado para aproximar la visión humana. L* es la luminosidad, a* es el eje verde-rojo, y b* es el eje azul-amarillo. Una unidad de distancia perceptual aparece aproximadamente igual sin importar el color.
Uso: Ciencia del color, cálculos de diferencia de color (Delta E), gestión de color profesional
Pantone (PMS)
El Sistema de Coincidencia Pantone (PMS) es un sistema propietario de estandarización de colores ampliamente utilizado en impresión, moda y diseño de productos. Cada color tiene un código único que garantiza una reproducción consistente en diferentes materiales y fabricantes.
Uso: Identidad de marca, impresión comercial, diseño de empaques, industria textil
Nota: Estas son representaciones digitales aproximadas. Los colores Pantone reales pueden variar en impresión.
Fundamentos de Teoría del Color
Los colores existen en diferentes 'espacios' optimizados para diferentes propósitos. Los modelos aditivos (RGB) funcionan añadiendo luz, los modelos sustractivos (CMYK) absorbiendo luz. Los modelos perceptuales (Lab) se alinean con la visión humana.
Modelo Aditivo
RGB combina luz roja, verde y azul. Añadir las tres a máxima intensidad crea blanco. Así funcionan las pantallas, proyectores y displays digitales.
Modelo Sustractivo
CMYK absorbe (resta) longitudes de onda de luz del blanco. Combinar todos los colores crea (en teoría) negro. Así funcionan las tintas y pinturas.
Modelo Perceptual
Lab y espacios similares están diseñados alrededor de la percepción humana, haciéndolos ideales para comparación y corrección de color.
Notas sobre Conversión
- RGB ↔ HEX: Conversión sin pérdida, solo cambio de formato
- RGB ↔ HSL/HSV: Sin pérdida dentro de la gama, puede perder precisión
- RGB ↔ CMYK: Puede perder colores fuera de la gama imprimible
- RGB ↔ Lab: Usa iluminante D65, asume espacio de color sRGB
- RGB ↔ YCbCr: Usa estándar BT.601 por defecto
Estándares de Contraste WCAG
Las Pautas de Accesibilidad al Contenido Web (WCAG) definen requisitos mínimos de contraste entre texto y fondo para asegurar que todos los usuarios, incluyendo aquellos con discapacidades visuales, puedan leer el contenido.
Casos de Uso Comunes
Preguntas frecuentes
¿Cuál es la diferencia entre los formatos de color HEX, RGB y HSL?
HEX es una notación hexadecimal de seis dígitos (ej.: #FF5733) que codifica los mismos canales rojo, verde y azul que RGB pero en base 16. RGB expresa cada canal como un decimal de 0 a 255, fácil de leer y manipular en el código. HSL (Tono, Saturación, Luminosidad) separa el ángulo de color de su viveza y brillo, siendo mucho más intuitivo al crear tonos más claros u oscuros sin adivinar valores RGB. Los tres formatos son totalmente interconvertibles.
¿Qué significa el canal alfa (A) en RGBA y HSLA?
El canal alfa controla la opacidad de un color. En RGBA y HSLA, el valor A va de 0 (totalmente transparente) a 1 (totalmente opaco), o de 0 % a 100 % en notación CSS. Por ejemplo, rgba(255, 0, 0, 0.5) es un rojo con 50 % de transparencia. El alfa se usa ampliamente en superposiciones, sombras y efectos hover. La notación HEX estándar no incluye alfa, a menos que se use HEX de 8 dígitos (ej.: #FF573380).
¿Cuál es la diferencia entre HSL y HSV (HSB)?
Tanto HSL como HSV (también conocido como HSB — Tono, Saturación, Brillo) describen el color con un ángulo de tono, pero definen su tercera dimensión de forma distinta. En HSL, una Luminosidad del 50 % con Saturación máxima da la color vivo puro, 0 % es negro y 100 % es blanco. En HSV, un Valor del 100 % con Saturación máxima da el color vivo puro, y 0 % es siempre negro. HSV es común en software de edición de imágenes como Photoshop, mientras que HSL predomina en CSS.
¿En qué se diferencian los colores CMYK de RGB?
RGB utiliza mezcla aditiva de color: combinar los tres canales a plena intensidad produce blanco. CMYK utiliza mezcla sustractiva: las tintas absorben la luz para producir tonos oscuros. RGB es el modelo nativo para pantallas y cámaras, mientras que CMYK es estándar para impresión offset. En proyectos de impresión, convierta los colores a CMYK cuanto antes, ya que no todos los colores RGB vivos pueden reproducirse en papel, especialmente los azules eléctricos y los verdes neón.
¿Por qué un mismo color se ve distinto en diferentes pantallas o dispositivos?
La apariencia del color varía entre dispositivos debido a diferencias en tecnología de pantalla, perfiles de color y calibración de hardware. Cada pantalla tiene un ámbito de color (gama), que es el rango de colores que puede mostrar. Los monitores básicos pueden cubrir solo el 60-72 % del sRGB, mientras que los monitores profesionales alcanzan el 99 % del sRGB o las gamas más amplias P3 y AdobeRGB. Los perfiles ICC indican al sistema operativo cómo interpretar los valores de color de ese dispositivo. Sin calibración, #FF5733 puede parecer naranja en una pantalla y rojo-naranja en otra. Para trabajo de color preciso, use un monitor calibrado por hardware.
Herramientas Relacionadas
Convertidor de Imagen a Base64
Convertir imágenes a codificación Base64, soporta formatos PNG, JPG, GIF, SVG, WebP, generar Data URI y fondos CSS
Compresor y Formateador CSS
Comprima o formatee código CSS, elimine espacios en blanco y comentarios para optimizar el tamaño del archivo, o formatee código para legibilidad
Generador de paleta
Generador profesional de paletas de colores con mezcla de colores, creación de degradados, esquemas de colores y exportación a CSS/SCSS/JSON
Codificador/Decodificador HTML
Convertir caracteres especiales a entidades HTML con formatos nombrados, decimales y hexadecimales para prevenir ataques XSS
Codificador/Decodificador Base64
Codifique y decodifique rápidamente cadenas Base64, compatible con conversión de texto y archivos
Codificador/Decodificador URL
Codifique y decodifique URLs para garantizar el cumplimiento y la usabilidad