Consulta en una sola pantalla la búsqueda de nombres de color, conversión de códigos y extracción de colores de imagen
Obtenga colores de códigos de color o imágenes, y verifique la impresión del color, nombres de colores cercanos, combinaciones de colores y legibilidad del texto.
Introducir color
Elegir por nombre de color
Mostrar colores representativosLos nombres usan colores CSS estándar del W3C y etiquetas en español. La apariencia y los nombres cotidianos pueden variar; usa HEX o RGB en especificaciones.
Resultado de conversión
Elige un color entre HEX, RGB, HSL, colores recomendados o nombres de color.
Los nombres de color se muestran como referencia.
Comprueba la legibilidad del color de texto seleccionado sobre este color de fondo.
Seleccionar imagen
Aún no se ha seleccionado ninguna imagen.
Imagen y paleta
Al cargar una imagen, se mostrará aquí. Haga clic en la imagen para obtener con precisión el color de esa posición.
Selecciona una imagen y pulsa «Extraer colores principales»
Los resultados no se muestran hasta que elijas un color o una imagen.
Qué puede hacer esta herramienta de color y paletas
Convierte HEX, RGB y HSL, encuentra nombres CSS próximos, toma píxeles de una imagen y extrae una paleta de 2 a 16 colores. La imagen permanece en el navegador.
Nombres de color próximos
Consulta nombres localizados, palabras clave CSS y valores HEX exactos.
Conversión precisa
Admite HEX de 3, 4, 6 y 8 dígitos con transparencia.
Extracción de imagen
Toma un píxel o agrupa los colores dominantes.
Contraste
Calcula contraste WCAG para texto normal y grande.
Pasos para convertir códigos de color
- Elegir formato de entradaUse HEX para códigos de color web, RGB para valores en pantalla y HSL para ajustar tono, saturación y brillo.
- Ingresar valor para analizarEl HEX se puede ingresar con o sin #. RGB es de 0 a 255, y S y L de HSL son de 0 a 100.
- Revisar resultados en los tres formatosSi incluye transparencia, se muestra como HEX de 8 dígitos y con la sintaxis de barra de CSS.
- Elegir propuesta de combinaciónAl pulsar un color sugerido, se vuelve a analizar usando ese color como nueva referencia.
- Comprueba el contraste con el color de fondoEl texto del cuerpo debe tener al menos 4.5:1 y no depender solo del color para transmitir información.
Pasos para extraer los colores principales de una imagen
- Elegir imagen del dispositivoSe admiten PNG, JPEG, WebP, GIF y BMP de hasta 25 MB. Para GIF animados, se usa el primer fotograma.
- Haz clic en la imagen si es necesarioPuedes verificar primero el color exacto de una posición específica, como un logotipo, ropa o fondo.
- Elegir número de colores a extraerPara logotipos, se recomiendan de 3 a 5 colores; para fotografías, de 6 a 10. Si aumenta demasiado el número de colores, aparecerán colores similares.
- Extraer colores principalesReduce la imagen a una resolución ligera y agrupa hasta unos 14,000 píxeles.
- Guarda en CSS, JSON y PNGPara desarrollo web, CSS es adecuado; para análisis y reutilización, JSON; para documentos compartidos, PNG.
Diferencias entre HEX, RGB y HSL
| Formato | Ejemplo | Características | Usos principales |
|---|---|---|---|
| HEX | #087F72 | Expresión corta de RGB en hexadecimal | CSS, especificaciones de diseño y colores de marca |
| RGB | rgb(8 127 114) | Expresa rojo, verde y azul de 0 a 255 | Procesamiento de imágenes, Canvas y verificación de valores de color |
| HSL | hsl(174 88% 26%) | Ajusta por separado tono, saturación y brillo | Variaciones de brillo, desarrollo de combinaciones y diseño de temas |
| Alpha | 80%／CC | Expresa la opacidad como 0–100% o 00–FF | Superposición, fondo, sombra y superposición |
Busca nombres y revisa colores próximos
Busca nombres en español, palabras clave CSS como midnightblue, valores HEX o familias de color. Las coincidencias CSS exactas se separan de los candidatos visualmente próximos calculados en Oklab.
Los nombres cambian entre sectores, países, impresión y catálogos. Usa HEX o RGB en la especificación final; considera nombres como “caqui” solo una referencia.
Precisión y límites de la extracción de paleta de imágenes
Esta herramienta agrupa los píxeles de la imagen por distancia de color y calcula el color central y la proporción de cada grupo. Está diseñada para resumir mejor la compresión JPEG y los matices finos de las fotografías que un simple recuento de colores idénticos frecuentes.
Por otro lado, no es una IA que entienda el significado de la fotografía o el sujeto para elegir colores. Los colores de logotipos pequeños, texto fino o colores de acento con área pequeña pueden no aparecer en los colores principales. En ese caso, haga clic directamente en la imagen para muestrear el color. Los colores en pantalla varían según la configuración del monitor, el perfil de color y el navegador.
Cómo interpretar la relación de contraste
Para texto de tamaño normal, la relación de contraste con el fondo debe ser de al menos 4.5:1; para texto grande, de al menos 3:1 (referencia WCAG AA). Combinaciones como texto blanco sobre amarillo brillante, aunque difieran en tono, son difíciles de leer si el brillo es similar.
Los logotipos, elementos decorativos y texto incidental en fotografías tienen un tratamiento diferente, pero para información importante como texto principal, botones y etiquetas de entrada, asegure un contraste con margen. En fondos con degradado o fotografías, la relación varía según la ubicación, por lo que verifique también en la posición menos legible.
Uso de colores complementarios, análogos y triádicos
| Paleta | Composición | Usos adecuados | Aviso |
|---|---|---|---|
| Complementario | Lado opuesto del círculo cromático | CTA, advertencias y acentos fuertes | Si las áreas son iguales, el estímulo es fuerte |
| Colores análogos | 30 grados antes y después del color base | Fondo y materiales con aspecto uniforme | Comprueba por separado la diferencia de luminosidad con el texto |
| Tríada | Tres colores a 120 grados | Categorización, gráficos y diseño claro | División de roles: un color principal y dos auxiliares |
| Complementario dividido | Dos colores adyacentes al complementario | Acento más suave que el complementario | No uniformar demasiado la saturación |
Procesamiento sin enviar imagen ni datos de color
La carga de imágenes, reducción, obtención de píxeles, agrupamiento, conversión de color, cálculo de contraste y creación de CSS, JSON y PNG se realizan en el navegador. Las imágenes o colores extraídos no se envían al servidor de WiseChecker, a APIs externas ni a IA generativa.
‘Seleccionar color en pantalla’ utiliza la API EyeDropper proporcionada por los navegadores compatibles. Solo se recibe del navegador el color permitido, y no se guarda ni envía la imagen completa de la pantalla. Al recargar la página, la imagen cargada y los resultados se eliminan.
Preguntas frecuentes sobre el selector de color y la extracción de paletas
¿Se sube la imagen a un servidor?
No. Se carga y procesa con Canvas en el navegador.
¿Se pueden extraer colores de un PNG transparente?
Es posible. Los píxeles con baja opacidad se excluyen del recuento de colores principales, y al hacer clic para muestrear se obtiene el valor RGBA.
El color del logotipo no se extrae de la foto
Los colores con área pequeña pueden no convertirse en colores principales. Haga clic directamente en la parte del logotipo.
¿Qué es el octavo dígito en HEX?
Los dos últimos dígitos son la transparencia. 00 es totalmente transparente y FF totalmente opaco.
¿Los nombres de color mostrados son nombres oficiales?
Se distingue entre coincidencia exacta con un color estándar CSS y un nombre de color representativo cercano. Los nombres de color pueden variar según el campo, país, material impreso o producto, por lo que para una especificación precisa, incluya también el HEX o RGB.
¿Por qué al elegir caqui se acerca al amarillo?
La palabra clave CSS khaki es #F0E68C. Los catálogos de ropa, pintura e impresión pueden usar el mismo nombre para colores distintos; indica HEX o RGB.
¿La comprobación de contraste por sí sola garantiza la accesibilidad?
No es suficiente. También se necesitan otras pistas además del color, como el tamaño del texto, la indicación de foco y el orden de lectura.
¿Puedo usar comercialmente los colores extraídos?
Además del código de color en sí, verifique los derechos y condiciones de uso de la imagen original, el logotipo y las pautas de marca.