Cinco herramientas relacionadas
El selector de color, la extracción desde imágenes, las paletas, los degradados y el contraste comparten la base del estudio. El selector de modo abre la página de cada herramienta.
Estudio de color
Elige colores, extrae paletas de imágenes, crea tus propias paletas y degradados CSS y comprueba el contraste del texto.
Elegir modo
Selector de color
Armonía de colores
Actual
Formatos de color
Herramientas relacionadas
Tus estadísticas
0
Colores elegidos
0
Paletas exportadas
0
Degradados creados
0
Contrastes comprobados
Selector de color
Modo más usado
0%
Puntuación de actividad
Cómo usar el estudio de color
No se ha podido cargar el vídeo. Puedes seguir las instrucciones que aparecen debajo.
El vídeo muestra la interfaz en inglés.
Haz clic o arrastra el control en la barra multicolor para elegir el tono. Ajusta el brillo y la saturación en el área situada debajo. Los valores junto al área de color se actualizan al cambiarlo. En los navegadores compatibles también puedes usar «Elegir de la pantalla».
Herramientas para trabajar con colores
Colores de imágenes y GIF
Elige un color de la vista previa o extrae una paleta. Los GIF animados tienen controles de fotogramas. El cambio de tamaño, la decodificación y la agrupación pueden afectar a los colores obtenidos.
Biblioteca de degradados CSS
Elige entre 60 modelos con búsqueda o crea fondos lineales, radiales, cónicos y multipunto. Revisa los límites de exportación de código e imágenes antes de usarlos.
Mostrar 3 másMostrar menos
Seis armonías de color
Prueba colores complementarios, análogos, triádicos, complementarios divididos, tetrádicos y monocromáticos. Comprueba el contraste por separado antes de usarlos en texto.
Contraste del texto y el fondo
Compara dos colores uniformes con los cuatro umbrales WCAG AA y AAA para texto. Los filtros aproximados de la vista previa no demuestran conformidad de accesibilidad.
Prueba un ajuste de contraste
El ajuste a AA o AAA intenta modificar los valores RGB del texto. Puede fallar o cambiar el tono, así que comprueba la relación resultante.
Preguntas frecuentes
¿Qué herramientas de color hay?
El selector de color muestra cinco formatos y seis armonías. La extracción de imágenes toma colores de fotos y fotogramas de GIF. La herramienta de paletas edita muestras, el generador de degradados crea fondos CSS y el comprobador de contraste compara un par de colores uniformes con los umbrales WCAG para texto. El selector de modo abre cada herramienta en su propia página.
¿En qué formatos puedo copiar un color?
El selector muestra HEX, RGB, HSL, HSV y una estimación CMYK. Copia los valores por separado o usa Copiar todos los formatos. Los campos son de solo lectura. Los valores mostrados se redondean y CMYK no utiliza un perfil ICC de impresión.
¿Puedo extraer colores de un GIF animado?
Sí. La herramienta de extracción permite reproducir GIF animados y elegir fotogramas. Selecciona un color o extrae una paleta del fotograma elegido. Las animaciones grandes pueden necesitar mucha memoria.
¿Qué formatos de imagen puedo abrir?
Usa un formato que el navegador pueda decodificar, como PNG, JPG o WebP. HEIC y HEIF disponen de un decodificador local que se carga cuando hace falta. Los GIF animados se decodifican por fotogramas. La compatibilidad depende del navegador y aquí no hay un decodificador específico para TIFF.
Mostrar 10 másMostrar menos
¿Qué armonías de color hay?
Complementaria, Análoga, Triádica, Complementaria dividida, Tetrádica y Monocromática. Haz clic en una muestra propuesta para usarla como color actual. Una armonía combina colores, pero no comprueba la accesibilidad del texto.
¿Qué degradados puedo crear?
Los degradados lineales, radiales y cónicos admiten hasta seis paradas. Los multipunto permiten diez puntos y superponen degradados radiales CSS. La biblioteca contiene 60 modelos. Tailwind simplifica los degradados a lineales, SVG sustituye los tipos cónicos y multipunto por lineales y las imágenes tienen sus propios límites de representación. La exportación cónica como imagen requiere que Canvas admita degradados cónicos.
¿Qué relaciones de contraste exige WCAG?
El texto normal necesita al menos 4,5:1 para AA y 7:1 para AAA. El texto grande requiere 3:1 y 4,5:1, respectivamente. Un resultado válido se aplica al par de colores y al umbral de texto elegidos, no a todo un sitio web.
¿La herramienta puede ajustar el contraste por mí?
Ajustar a AA y Ajustar a AAA intentan aclarar u oscurecer los canales RGB del texto. Pueden cambiar el tono o fallar con el fondo actual. Comprueba la relación resultante antes de usar el color.
¿Qué muestran las opciones de visión del color?
Protanopía, Deuteranopía y Tritanopía aplican filtros CSS sencillos a la vista previa. Son efectos visuales aproximados, no modelos validados de visión del color ni pruebas de accesibilidad.
¿Cómo guardo una paleta?
Guárdala como modelo con nombre en este navegador o expórtala. Exportar colores ofrece archivos PNG, JPG, SVG y JSON y la copia de variables CSS. La paleta de trabajo no guardada vuelve a Material al abrir de nuevo la página.
¿Dónde se guarda el historial de colores?
El historial compartido guarda hasta 20 entradas recientes en este navegador, con su modo de origen. Abre Historial de colores para verlas. Al borrar los datos del sitio puedes perderlas. El historial no se sincroniza entre dispositivos.
¿Puedo tomar un color de la pantalla?
Elegir de la pantalla usa la API EyeDropper cuando el navegador y el dispositivo la admiten. Requiere un contexto seguro y devuelve un valor HEX sRGB. Si no está disponible, usa el control de tono y el área de color.
¿Dónde van mis imágenes y modelos?
Las imágenes elegidas se procesan en este navegador, sin enviarse a un servidor de conversión. Los modelos con nombre y el historial reciente se guardan localmente en IndexedDB. Exporta los resultados importantes antes de borrar los datos del sitio.
¿Puedo usar el estudio de color sin conexión?
Los controles y cálculos ya cargados pueden funcionar sin conexión, pero la página y todos los scripts necesarios deben estar disponibles. El decodificador HEIC se carga cuando hace falta, así que abrir un nuevo archivo HEIC puede requerir conexión para descargarlo.
Detalles técnicos
Valores y armonías de color
El selector convierte RGB a HEX, HSL, HSV y una estimación CMYK. Los valores se redondean y los campos de formato son de solo lectura. Las seis armonías desplazan el tono o varían la luminosidad. La salida CMYK no usa un perfil ICC de impresión.
Vista previa y extracción de colores
El muestreo con Canvas lee la vista previa redimensionada. La extracción automática agrupa muestras RGB mediante K-means para crear una paleta de 1 a 20 colores. El navegador decodifica la mayoría de los formatos. HEIC y HEIF tienen un decodificador local de respaldo y los GIF, controles de fotogramas.
Mostrar 4 másMostrar menos
Cálculo del contraste del texto
La relación compara la luminancia relativa de dos colores sRGB uniformes. AA exige 4,5:1 para texto normal y 3:1 para texto grande. AAA exige 7:1 y 4,5:1. Los resultados usan la relación sin redondear y no demuestran conformidad completa con WCAG.
Degradados CSS y límites de exportación
Los tipos lineal, radial y cónico usan funciones de degradado CSS. Los multipunto superponen degradados radiales. Tailwind genera código lineal simplificado y SVG sustituye los tipos cónicos y multipunto por lineales. Canvas genera PNG y JPG a 1200 × 600 píxeles. La exportación cónica necesita soporte de Canvas. Las proporciones fijas y la mezcla de colores pueden diferir de la vista previa CSS.
Edición y exportación de paletas
Puedes empezar con siete modelos de cuatro colores. Las muestras se pueden editar, añadir, eliminar, bloquear y reordenar. La exportación ofrece bandas de colores PNG, JPG o SVG, un archivo JSON y la copia de variables CSS. PNG y JPG permiten anchos de 120 a 7680 píxeles. Guarda un modelo con nombre para conservar la paleta entre visitas.
Historial y modelos en el navegador
El historial contiene hasta 20 entradas recientes en el almacenamiento IndexedDB compartido del estudio. Los modelos con nombre guardan colores y ajustes de modo localmente. La disponibilidad y conservación de los datos dependen del navegador. No hay sincronización automática entre dispositivos.