Convertir colores
Convertidor de color online gratuito que reconoce HEX (3, 4, 6, 8 dígitos), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), la nueva sintaxis CSS Color 4 (separada por espacios), todos los 147 colores nombrados CSS y cualquiera de ellos con alfa. Salida de cada formato a la vez, copiable individualmente. Una paleta integrada genera sombras (pasos más oscuros), tintes (pasos más claros), complementario, análogo, triádico y tetrádico. Un verificador de contraste WCAG muestra si el color cumple AA / AAA contra blanco y negro para texto normal y grande. Abre el cuentagotas del SO (Chrome / Edge) para elegir cualquier color en pantalla.
Cómo usar
Cualquier formato: HEX, RGB, HSL, OKLCH, incluso nombres CSS como tomato.
Los once aparecen a la vez, copia con un clic.
Sombras, tintes y armonías derivadas de tu color.
Contraste WCAG contra blanco y negro con veredicto AA/AAA.
Convierte entre 11 formatos de color, construye paletas, comprueba contraste WCAG — todo en un solo lugar
Todos los formatos
Contraste (WCAG)
Paleta
Recientes
Funciones
Usos típicos
- Buscar el OKLCH de un color HEX de marca para un sistema de diseño CSS Color 4.
- Convertir valores de píxel RGB de una captura de pantalla a HSL para un eje de gráfica.
- Encontrar un color complementario para un estado hover de botón.
- Comprobar si el texto del cuerpo cumple WCAG AA contra un fondo elegido.
- Elegir un color de otra pestaña o ventana vía cuentagotas del sistema.
Por qué este
Muchos convertidores solo hacen HEX↔RGB↔HSL. Nosotros incluimos OKLab y OKLCH — los nuevos espacios CSS Color 4 que coinciden con la percepción humana mucho mejor que HSL (sin saltos sorpresa en luminosidad al cambiar el tono). La generación de paleta corre en OKLab para que los pasos se vean perceptualmente uniformes, no matemáticamente. El contraste se calcula en el espacio de luminancia WCAG 2 con los umbrales 4.5:1 y 3:1 deletreados.
Preguntas frecuentes
¿Qué es OKLCH?
Un espacio de color perceptualmente uniforme introducido como parte de CSS Color 4. A diferencia de HSL — donde luminosidad 50% puede verse muy diferente en distintos tonos — la luminosidad OKLCH es consistente en todo el espectro, lo que hace los tokens de diseño predecibles. Si estás construyendo un sistema de diseño moderno, vale la pena aprender OKLCH.
¿Mi color incluye alfa?
Sí — cualquiera de HEX de ocho dígitos, rgba(), hsla(), o sintaxis de espacio con sufijo alfa (rgb(255 0 0 / 50%)) se interpreta y refleja en cada formato de salida que soporta alfa.
¿Por qué mi paleta de sombras se ve "escalonada" en lugar de suave?
Sombras y tintes se interpolan en OKLab y luego se proyectan a tu espacio objetivo, así que cada paso es perceptualmente igual — eso a menudo produce resultados visualmente más suaves que un cambio ingenuo de luminosidad HSL, pero colores iniciales muy oscuros o muy claros se recortan cerca de los extremos.
CMYK — ¿preciso para impresión?
No — la salida CMYK es una conversión rápida en espacio de pantalla, no consciente de perfil ICC. Para impresión, toma el CMYK que ves aquí como punto de partida y verifica en herramientas Adobe / Affinity contra el perfil de impresión real.
¿Cuentagotas no funciona — por qué?
La EyeDropper API solo está disponible en navegadores basados en Chromium (Chrome, Edge, Brave) en este momento. Firefox y Safari ocultarán el botón con un tooltip si no se soporta.
¿Los nombres HEX distinguen mayúsculas?
No, HEX es hex (0-9, a-f o A-F). Emitimos minúsculas por defecto para coincidir con la recomendación CSS Color 4; la salida sigue siendo válida sin importar cómo la pegues de nuevo.
¿Móvil?
Sí. El cuentagotas no está disponible en navegadores móviles — usa el selector de color nativo en su lugar.
Podemos hacerlo — ¡y es gratis! Solo envíanos un mensaje rápido con tu idea. Si quieres comentarla en detalle, déjanos tu email y te responderemos. Puedes mantener el anonimato.
