Estudio de color reúne cinco herramientas. Usa «Selector de color» para un color, «Colores de imagen» para obtener colores de una imagen, «Creador de paletas» para crear una colección, «Generador de degradados» para fondos con transiciones y «Comprobador de contraste» para comparar el texto con su fondo. Cada pestaña abre su propia página. Guarda o exporta el trabajo que quieras conservar antes de cambiar de herramienta.
Elegir un color y copiar su código
Abre «Selector de color». Mueve el control por la franja de colores para elegir un tono, como azul o verde.
Mueve el control dentro del cuadrado grande para aclarar, oscurecer o reducir la intensidad del color.
Busca el formato que necesitas en «Formatos de color» y pulsa su botón de copia.
Pega el valor copiado en la aplicación o el documento donde lo necesites.
Los campos de formato muestran el resultado y no se pueden editar. «Copiar todos los formatos» copia los cinco valores con sus etiquetas. HEX, RGB, HSL, HSV y CMYK describen el mismo color de distintas formas.
HEX, RGB y HSL sirven para definir estilos web. Los valores HSV y CMYK son conversiones numéricas, no declaraciones CSS listas para pegar. CMYK no utiliza un perfil de impresora o papel, por lo que no puede predecir el color exacto de la impresión.
«Elegir de la pantalla» abre el cuentagotas del navegador si está disponible. Elige un píxel visible para usar su color o pulsa Escape para cancelar. Esta función no está disponible en dispositivos táctiles y algunos navegadores de escritorio tampoco la admiten.
Encontrar colores que combinen
Las opciones de «Armonía de colores» proponen combinaciones a partir del color actual. Selecciona una propuesta para convertirla en el color actual y actualizar los valores de formato.
| Opción | Colores que propone |
|---|---|
| Complementaria | El color actual y otro en el lado opuesto del círculo cromático. |
| Triádica | Tres colores distribuidos a intervalos iguales por el círculo cromático. |
| Análoga | El color actual y sus dos vecinos en el círculo cromático. |
| Complementaria dividida | El color actual y dos colores cercanos a su opuesto. |
| Tetrádica | Cuatro colores distribuidos por el círculo cromático. |
| Monocromática | Variaciones más claras y más oscuras del tono actual. |
Estas propuestas no comprueban si el texto será legible. Antes de usarlas para texto y fondo, comprueba ambos colores juntos en «Comprobador de contraste». «Guardar como ajuste predefinido» guarda el color actual y su armonía para otro momento.
Obtener colores de una imagen
Abre «Colores de imagen» y añade una imagen de tu dispositivo.
Espera a que aparezcan los colores propuestos. Cambia «Número de colores» si necesitas más o menos sugerencias.
Haz clic en una muestra para seleccionarla y copiar su valor HEX. El panel del color seleccionado también muestra RGB, HSL, HSV y CMYK.
Haz clic en otro lugar de la imagen para añadir el color de ese punto.
«Número de colores» permite entre 1 y 20 sugerencias automáticas. Los colores elegidos a mano se añaden aparte, así que la lista final puede ser más larga. Las sugerencias proceden de píxeles muestreados y grupos de colores. No son un recuento de todos los colores distintos de la imagen original.
«Filtrar tonos extremos» excluye los píxeles muy oscuros y muy claros al buscar sugerencias. Desactívalo si necesitas esos colores o si la imagen es principalmente blanca y negra. Cambiar esta opción o «Número de colores» recalcula las sugerencias. En una imagen fija, también sustituye los colores elegidos a mano.
«Mostrar puntos» muestra las marcas de muestreo en la imagen. Al desactivarlo se ocultan las marcas sin borrar los colores. Arrastra una marca visible para tomar el color de otro lugar. Con el ratón, la vista ampliada ayuda a localizar el punto exacto.
Elimina una muestra con su control de borrado. «Quitar la imagen y empezar de nuevo» pide confirmación antes de quitar la imagen actual y sus colores. Los ajustes predefinidos guardados se conservan.
Las imágenes grandes pueden reducirse para el lienzo de muestreo. Por eso, un valor seleccionado puede proceder de la imagen mostrada y redimensionada, en lugar de un píxel intacto a la resolución original. La transparencia no se trata como un canal de color independiente.
Elegir colores de un GIF animado
Un GIF animado se abre con una línea de tiempo de fotogramas. Elige un fotograma con los botones anterior y siguiente, el deslizador o una miniatura. También puedes reproducir y pausar la animación.
Haz clic en la imagen para recoger un color del fotograma actual. La lista combina las selecciones guardadas de los fotogramas utilizados. Cambiar de fotograma no extrae automáticamente una paleta nueva de cada uno.
Para recalcular los colores automáticos del fotograma actual, cambia «Número de colores» o «Filtrar tonos extremos». Las selecciones de cada fotograma del GIF se conservan por separado, por lo que los colores de otros fotogramas pueden seguir en la lista conjunta. Guarda un ajuste predefinido de imagen para conservar la imagen, las selecciones por fotograma y las posiciones de muestreo.
Crear y editar una paleta
Abre «Creador de paletas» para empezar con los colores Material o elige otro ajuste predefinido rápido. Si has cambiado la configuración actual, aplicar un ajuste predefinido puede pedir confirmación antes de sustituirla.
«Paleta aleatoria» cambia los colores desbloqueados. Bloquea los que quieras conservar y vuelve a generar la paleta. El bloqueo protege ese color durante la generación aleatoria. No impide editarlo, eliminarlo ni sustituirlo por un ajuste predefinido.
«Añadir color» añade otra muestra. Cada muestra tiene controles para editarla y borrarla, además de un asa para cambiarla de posición. Debe quedar al menos un color. Haz clic en el valor mostrado para copiarlo y usa HEX o RGB para cambiar el formato de copia.
En un ordenador, «Editar color» abre el selector de color del navegador. En un dispositivo táctil abre un diálogo con controles de color y campos HEX y RGB. Pulsa «Aplicar» para conservar el cambio o «Cancelar» para descartarlo.
«Deshacer» y «Rehacer» recorren los cambios recientes de la paleta. Su historial conserva hasta 50 estados durante la sesión actual de la página. «Restablecer» pide confirmación antes de restaurar la paleta predeterminada.
«Modo concentración» muestra la paleta y sus controles en un espacio más amplio. Pulsa Escape o «Salir del modo concentración» para volver. Al recargar la página, la paleta de trabajo vuelve al estado inicial. Usa «Guardar como ajuste predefinido» o «Descargar paleta» antes de salir.
Descargar o copiar una colección de colores
Abre el diálogo de exportación con «Descargar colores» en «Colores de imagen» o con «Descargar paleta» en «Creador de paletas». PNG, JPG y SVG crean una franja de muestras. «Incluir códigos HEX» e «Incluir códigos RGB» añaden las etiquetas correspondientes a la imagen.
JSON descarga los valores de color como datos estructurados. «Copiar CSS» copia propiedades personalizadas numeradas, como --color-1, que puedes usar en la hoja de estilos de un sitio web. Para PNG y JPG, ajusta «Ancho (px)» entre 120 y 7680 píxeles. La altura es la sexta parte del ancho, redondeada a un píxel entero. SVG utiliza un espacio de coordenadas de 1200 × 200.
La imagen exportada contiene los colores recogidos, no la fotografía importada. Exporta antes de vaciar el espacio de trabajo si quieres conservar o compartir un archivo independiente.
Crear un degradado
Abre «Generador de degradados» y elige un tipo de degradado. Una parada de color sitúa un color en un punto concreto de la transición. Al moverla cambia dónde aparece ese color.
| Tipo | Qué puedes ajustar |
|---|---|
| Lineal | Arrastra los extremos para cambiar la dirección. Mueve un punto intermedio a lo largo de la línea para cambiar la posición de su color. |
| Radial | Mueve el centro en el área de dirección y coloca los colores en la barra «Paradas de color». |
| Cónico | Mueve el centro y el control del ángulo inicial, o introduce un ángulo. Ajusta los colores en la barra de paradas. |
| Multipunto | Distribuye puntos de color independientes por el área y arrástralos para cambiar cómo se superponen las zonas de color. |
Haz clic en una zona vacía del área lineal o multipunto para añadir un color. En los degradados radiales y cónicos, haz clic en la barra de paradas. Los tipos lineal, radial y cónico permiten hasta seis paradas. El multipunto permite hasta diez puntos. Siempre quedan al menos dos.
Haz clic en un punto para editar su color. Un doble clic lo elimina donde se admite ese gesto. En dispositivos táctiles, los puntos lineales y multipunto también admiten un doble toque. Para eliminar una parada radial o cónica, mantén pulsado su control sin moverlo. También puedes enfocarlo con Tab y pulsar Delete.
Al añadir un color lineal, las paradas se redistribuyen sobre la línea existente. «Invertir degradado» invierte su orden y «Restablecer dirección» restaura la dirección o el centro del tipo actual. La vista previa se actualiza al editar.
«Degradados predefinidos» ofrece diseños de partida. «Explorar biblioteca» abre una colección más amplia con un campo de búsqueda. Aplicar un ajuste predefinido sustituye los ajustes actuales del degradado, tras pedir confirmación cuando corresponde. Amplía la vista previa con su control para examinarla mejor y pulsa Escape para volver.
Usar el degradado en otro lugar
CSS proporciona el degradado de la vista previa. Cópialo en una declaración background de tu hoja de estilos. SCSS incluye una variable con el degradado y un ejemplo de uso.
La salida Tailwind simplifica el resultado a una dirección lineal y un máximo de tres colores. Puede omitir paradas intermedias, posiciones exactas y la forma de un degradado radial, cónico o multipunto. Usa CSS si necesitas conservar esos detalles.
SVG genera código vectorial para un degradado lineal o radial. Los degradados cónicos y multipunto se sustituyen por una aproximación lineal en SVG, por lo que se verán distintos. El comentario generado indica esa sustitución.
«Descargar degradado» exporta un PNG o JPG de 1200 × 600 píxeles. El diálogo de exportación también permite copiar código CSS, Tailwind, SCSS o SVG. Revisa la imagen exportada a su tamaño final, porque sus proporciones pueden diferir de la vista previa. Guarda la imagen o el código antes de salir, ya que el degradado de trabajo no es un ajuste predefinido guardado.
Comprobar si el texto es legible
Abre «Comprobador de contraste».
Introduce los colores del texto y del fondo como valores HEX de seis dígitos, incluido el #, o elige cada uno con su selector.
Consulta la relación de contraste y los cuatro resultados AA y AAA.
Si la pareja no alcanza el umbral, ajusta un color o prueba «Ajustar a AA» o «Ajustar a AAA» y comprueba de nuevo el resultado.
Por ejemplo, el texto negro sobre blanco tiene una relación de 21:1. Blanco sobre blanco tiene 1:1. Un número mayor indica una diferencia de luminancia más grande.
| Categoría de texto | Mínimo AA | Mínimo AAA |
|---|---|---|
| Texto normal | 4.5:1 | 7:1 |
| Texto grande | 3:1 | 4.5:1 |
WCAG considera grande el texto a partir de 18 puntos, unos 24 píxeles CSS, o de 14 puntos en negrita, unos 18,7 píxeles CSS. Los cuatro indicadores muestran ambas categorías a la vez. Cambiar el tamaño de fuente de la vista previa no cambia la relación entre los colores.
Estos umbrales proceden de la guía WCAG de contraste mínimo y de la guía de contraste mejorado. Que una pareja cumpla el umbral no demuestra que toda la página sea accesible.
«Ajustar a AA» y «Ajustar a AAA» intentan aclarar u oscurecer el texto sin cambiar el fondo. Buscan los umbrales de texto normal. Algunas parejas no se pueden corregir con este método. En ese caso, elige otro color de texto o de fondo manualmente.
Usa un valor completo, como #336699. Un valor incompleto o inválido deja activo el último color aceptado. La relación se muestra con dos decimales, pero el resultado utiliza el cálculo sin redondear.
Los filtros de color aproximados solo cambian la vista previa. Son efectos visuales sencillos, no una simulación fiable de cómo ve los colores una persona concreta. Tampoco cambian el cálculo del contraste.
Conservar ajustes predefinidos y colores recientes
«Guardar como ajuste predefinido» guarda una configuración con nombre desde «Selector de color», «Colores de imagen», «Creador de paletas» o «Comprobador de contraste». Escribe un nombre y pulsa «Guardar ajuste predefinido». «Ajustes predefinidos» abre la lista guardada. En el teléfono, usa el botón con forma de marcador. Selecciona un ajuste predefinido para restaurarlo en la herramienta correspondiente.
Los ajustes predefinidos se guardan en este navegador. Los ajustes predefinidos de imagen pueden incluir la imagen importada, sus colores y las posiciones de muestreo. No se comparten automáticamente con otro dispositivo y pueden desaparecer al borrar los datos del navegador. Descarga copias de los trabajos importantes.
«Eliminar» elimina un ajuste predefinido guardado tras pedir confirmación. «Eliminar todo» elimina toda la colección guardada tras pedir confirmación. Ninguna de estas acciones borra los archivos originales del dispositivo.
«Historial de colores» conserva hasta 20 entradas recientes. Seleccionar una entrada copia su valor HEX y, en «Selector de color», también aplica ese color. Vaciar el historial de colores es independiente de borrar los ajustes predefinidos.
Si el resultado no parece correcto
Si una imagen no se abre, prueba con un JPG o PNG más pequeño. HEIC y HEIF disponen de un decodificador adicional. Para otras variantes, la compatibilidad depende del navegador. Solo se abre una imagen a la vez.
Si los colores extraídos no recogen el detalle que buscas, haz clic en esa zona manualmente. Desactiva «Filtrar tonos extremos» cuando necesites colores casi negros o casi blancos. Las sugerencias automáticas describen grupos de colores muestreados. Su promedio puede no existir como un píxel exacto de la imagen.
Si el degradado copiado difiere de la vista previa, comprueba el formato de código. Tailwind y algunas salidas SVG son aproximaciones. CSS conserva el tipo de degradado y las posiciones.
Si la copia está bloqueada en «Selector de color» o «Colores de imagen», selecciona el valor en el campo de salida y usa el comando de copia habitual. Para una paleta, exporta JSON o una imagen. El procesamiento y las colecciones guardadas permanecen en el navegador, pero su almacenamiento no sustituye a una copia de seguridad.
Usar el teclado
| Acción | Teclas |
|---|---|
| Pasar de un control a otro | Tab |
| Activar el botón enfocado | Enter |
| Copiar el texto seleccionado de un campo de salida |
MacCommand + C
Windows / LinuxCtrl + C
|
| Cerrar el historial, los ajustes predefinidos, la exportación o la vista previa del degradadoEscape también cierra el modo de concentración de la paleta. | Escape |
| Editar la parada radial o cónica enfocadaPrimero enfoca el control de la parada con Tab. | Enter o Espacio |
| Eliminar la parada radial o cónica enfocadaQuedan al menos dos paradas. No se aplica a los puntos del lienzo lineal. | Delete o Backspace |
| Confirmar un número de colores o un tamaño de fuente introducidoCon el campo numérico correspondiente enfocado. | Enter |
La paleta utiliza los botones «Deshacer» y «Rehacer». La herramienta no asigna Cmd + Z ni Ctrl + Z a los cambios de la paleta. Esos atajos siguen funcionando normalmente al editar texto.