Selector y Convertidor de Color

• Conversión instantánea en tiempo real: cada formato se actualiza en el momento en que cambias cualquier valor: elige un color en el lienzo, arrastra el control de tono o escribe directamente en cualquier campo HEX, RGB, HSL, HSV, CMYK, HWB o LAB. Sin botones que pulsar.
• Siete formatos de color incluido CIE LAB: el convertidor admite HEX, RGB, HSL, HSV, CMYK, HWB y CIE LAB, el espacio de color perceptualmente uniforme usado en impresión, fotografía y ciencia del color. Todos los formatos son editables y copiables.
• Selector visual + verificador de contraste WCAG: el lienzo de saturación-luminosidad y el control de tono te dan un control visual preciso. El verificador de contraste WCAG integrado muestra el estado de aprobado/suspendido AA y AAA de tu color frente a fondos blanco y negro.
• 100 % privado - sin subidas: todas las conversiones de color ocurren localmente en tu navegador. Nunca se envían datos de color a un servidor, ni se almacenan ni se registran. El convertidor funciona totalmente sin conexión una vez cargada la página.

• Desarrollo web y de UI: convierte tokens de diseño entre HEX y HSL para propiedades personalizadas de CSS, u obtén los valores RGB exactos para trabajo con canvas y WebGL. El convertidor te da todos los formatos que un desarrollador web necesita en un solo lugar.
• Sistemas de diseño y colores de marca: verifica que tus colores de marca sean consistentes en representaciones HEX (web), CMYK (impresión) y LAB (perceptual). Usa el convertidor para mantener la fidelidad del color en todos los medios.
• Diseño de impresión y preimpresión: convierte colores de pantalla a CMYK para producción de impresión, o usa valores CIE LAB para especificación de color independiente del dispositivo. El convertidor maneja con precisión las conversiones de sRGB a CMYK y sRGB a LAB.
• Accesibilidad y cumplimiento WCAG: comprueba al instante la relación de contraste de tu color de primer plano frente a fondos blanco y negro. El verificador WCAG integrado muestra el estado de aprobado/suspendido AA y AAA para elegir colores accesibles sin salir de la herramienta.
• Fotografía y etalonaje: usa valores HSV para igualar el tono, la saturación y el brillo de los colores en flujos de trabajo de edición fotográfica. La salida LAB del convertidor es útil para la igualación perceptual del color en distintas condiciones de iluminación.
• Arte digital e ilustración: elige colores del lienzo visual y obtén sus valores exactos en todos los formatos para usarlos en Figma, Sketch, Procreate o cualquier otra herramienta de diseño. Las muestras predefinidas te dan acceso rápido a colores de diseño comunes.

Un selector y convertidor de color te permite elegir cualquier color visualmente y ver al instante sus valores equivalentes en todos los formatos de color principales. Distintas herramientas y flujos de trabajo usan distintas representaciones de color: los desarrolladores web usan HEX y RGB , los diseñadores usan HSL y HSV , los profesionales de impresión usan CMYK y los científicos del color usan CIE LAB . Este convertidor de color maneja los siete formatos con conversión precisa y bidireccional: cambia cualquier valor y todos los demás se actualizan al instante.

La conversión ocurre en tres pasos, íntegramente en tu navegador:

1. Elige o introduce un color: usa el lienzo de saturación-luminosidad y el control de tono para selección visual, haz clic en el selector de color nativo del navegador, escribe un código HEX o introduce valores directamente en cualquier campo de formato (RGB, HSL, HSV, CMYK, HWB o LAB).
2. Conversión instantánea en el navegador: todos los valores se convierten a través de una representación intermedia RGB común usando matemática de color precisa (sRGB a XYZ a LAB para formatos perceptuales). Tus datos de color nunca salen de tu navegador.
3. Copia cualquier formato: haz clic en el icono de copiar junto a cualquier fila de formato para copiar ese valor, o haz clic en «Copiar todo» para copiar todos los formatos a la vez. La salida de variable CSS está lista para pegar directamente en tu hoja de estilos.

• HEX: notación hexadecimal de seis dígitos (#RRGGBB), el estándar para HTML, CSS y la mayoría de las herramientas de diseño.
• RGB: canales rojo, verde y azul (0-255), usado en CSS, canvas, WebGL y procesamiento de imágenes.
• HSL: tono, saturación, luminosidad, más intuitivo para diseñadores; función de color CSS nativa desde CSS Color Level 4.
• HSV: tono, saturación, valor, usado en Photoshop, Figma y la mayoría de los selectores de color profesionales.
• CMYK: cian, magenta, amarillo y key (negro), el estándar para producción de impresión y flujos de preimpresión.
• HWB: tono, blancura, negrura, una función de color CSS más reciente (CSS Color Level 4) más intuitiva que HSL para mezclar con blanco/negro.
• CIE LAB: espacio de color perceptualmente uniforme (L* = luminosidad, a* = eje verde-rojo, b* = eje azul-amarillo), usado en ciencia del color, perfiles ICC e igualación de color independiente del dispositivo.

El verificador de contraste WCAG calcula la luminancia relativa de tu color y computa su relación de contraste frente al blanco puro (#FFFFFF) y al negro puro (#000000). Una relación de 4,5:1 cumple WCAG 2.1 AA para texto normal, 3:1 cumple AA para texto grande y componentes de UI, y 7:1 cumple AAA para texto normal. Úsalo para asegurar que tus colores de texto sean accesibles para usuarios con baja visión.