Convertidor de formatos de color
Convierte un color entre HEX, RGB, HSL y CMYK con vista previa en vivo (vista previa en escritorio)
HEX
#
RGB
R
G
B
HSL
H
S
L
CMYK
C
M
Y
K
Consejo: arrastra las letras de los canales para ajustar con precisión
Vista previa
🚀 Inicio rápido
- Elegir/introducir: escribe cualquier formato compatible (#1E90FF, rgb(30,144,255), hsl(210,100%,56%)) o utiliza el selector de color
- Conversión automática: al introducir un formato, los demás se actualizan al instante
- Copiar: usa el botón junto a cada formato para obtener una cadena normalizada
📌 Escenarios comunes
- Handoff de diseño: pasar HEX de maquetas a RGB/HSL de CSS para desarrollo
- Guía de estilo: unificar formato y redacción del color en la librería de componentes
- Referencia de impresión: convertir el color de pantalla a CMYK como primera estimación (requiere pruebas)
- Accesibilidad: usa la previsualización para una revisión rápida del contraste (para ratios exactos, emplea una herramienta dedicada)
🎛️ Parámetros de conversión y visualización
- Reglas de entrada: HEX solo 6 dígitos (sin alfa); RGB 0–255; H 0–360; S/L 0–100; CMYK 0–100. No distingue mayúsculas/minúsculas
- Vista previa: en escritorio hay vista previa en vivo a la derecha; en móvil no se muestra
- Selector de color: botón de paleta en la esquina superior derecha de cada tarjeta
- Política de mayúsculas de HEX: salida normalizada en mayúsculas (p. ej., #1E90FF); entrada no distingue mayúsculas/minúsculas; sin conmutador
- Ajuste fino: arrastra las letras de los canales a izquierda/derecha (Shift×10, Alt÷0.1)
- Salida de copia: el botón copiar produce cadenas estandarizadas (HEX en mayúsculas)
🧭 Consejos de uso
- Precisión: la gestión de color varía por dispositivo; el cuentagotas puede dar valores ligeramente distintos entre aplicaciones
- Alfa: los formatos actuales no incluyen alfa; usa rgba()/hsla() o un canal aparte
- Espacio de color: la web usa sRGB; en P3/Display‑P3 verifica con cuidado
- Consistencia del equipo: acordad un formato canónico en CSS (p. ej., HSL)
⚠️ Riesgos y limitaciones
- Diferencias de dispositivo: monitores/navegadores/SO gestionan el color de forma distinta; la apariencia puede variar
- CMYK aproximado: valores orientativos; para impresión real, usa perfiles ICC y flujo especializado
- Sin alfa: esta herramienta no procesa transparencia
🔒 Privacidad y seguridad
- Todo el procesamiento se realiza en tu navegador; los datos no salen de tu dispositivo
- Sin persistencia: entradas/historial se borran al cerrar la página salvo guardado explícito
❓ Preguntas frecuentes
¿Se admite la abreviatura #RGB?
No por ahora; utiliza HEX de 6 dígitos (#RRGGBB).
¿Qué rangos tienen RGB y HSL?
RGB: 0–255 (enteros); H: 0–360, S/L: 0–100%
¿Por qué CMYK difiere del resultado impreso?
CMYK depende de papel, tinta, dispositivo y perfiles ICC; aquí son valores aproximados: hay que hacer pruebas
¿Se admite canal alfa (rgba()/hsla())?
Por ahora no; usa rgba()/hsla() o mantén el alfa por separado.
¿Por qué la vista previa o los valores difieren de los de apps/navegadores?
Por gestión de color, renderizado y calibración de pantalla. La herramienta calcula en sRGB; resultado orientativo.
¿Se admite gama amplia (P3/Display‑P3)?
Actualmente basado en sRGB; en flujos P3 valida con el dispositivo objetivo y perfiles ICC.
¿Puedo convertir de CMYK a HEX/RGB?
Se admite, pero CMYK→pantalla es aproximado; para impresión se requieren perfiles ICC y pruebas.