Extrae colores de imágenes con precisión perfecta. Obtén valores de Couleur HEX, RGB, HSL y HWB de cualquier imagen.
Características
- Extracción Precisa: Extrae colores de imágenes con precisión perfecta a nivel de píxel. Haz clic en cualquier lugar para obtener datos de Couleur precisos.
- Multi-formato: Obtén valores de Couleur en múltiples formatos (HEX, RGB, HSL, HWB) para satisfacer diferentes necesidades.
- Vista Previa en Tiempo Real: Vista previa de Couleur en tiempo real y visualización de coordenadas. Lo que ves es lo que obtienes para diseñadores.
- Copia Rápida: Funcionalidad de copia con un clic para fácil integración. Aplica rápidamente valores de Couleur a tus proyectos.
Guía de uso
- Paso 1: Sube una imagen haciendo clic en "Subir Imagen" o arrastrando.
- Paso 2: Haz clic en cualquier parte de la imagen para extraer valores de Couleur.
- Paso 3: Copia cualquier formato de Couleur para usar en tus proyectos.
Detalles técnicos
Modelos de Color
Los modelos de Couleur comunes incluyen RGB (luz aditiva), HSL (tono/saturación/luminosidad), HEX (hexadecimal) y CMYK (impresión sustractiva). Cada modelo está optimizado para usos específicos, las pantallas digitales utilizan principalmente RGB y la impresión CMYK.
Representación de Couleur
La web utiliza formatos HEX (#FFFFFF), RGB (rgb(255,255,255)), RGBA (con alfa) y HSL. Cada modelo tiene diferentes propósitos en diseño y desarrollo. HEX es conciso, RGB es intuitivo y HSL facilita el ajuste de Couleur.
Conversión de Couleur
La conversión entre modelos de Couleur implica transformaciones matemáticas. Cada modelo tiene ventajas específicas para diferentes casos de uso como diseño, impresión o accesibilidad. La API Canvas se usa para leer datos de píxeles y convertir a varios formatos.
Preguntas frecuentes
- ¿Cómo funciona el selector de Couleur?
- El selector de Couleur utiliza la API Canvas para leer datos de píxeles de las imágenes. Cuando haces clic en la imagen, extrae los valores RGBA en esas coordenadas y los convierte en varios formatos de Couleur incluyendo HEX, RGB, HSL y HWB para visualización.
- ¿Qué formatos de imagen son compatibles?
- La herramienta admite todos los formatos de imagen web comunes incluyendo JPG, PNG, GIF y WebP. Puedes cargar imágenes arrastrando y soltando o haciendo clic para seleccionar un archivo.
- ¿Cómo usar los valores de Couleur extraídos?
- Los valores de Couleur extraídos se muestran en formatos HEX, RGB, HSL y HWB. Haz clic en cualquier formato para copiarlo al portapapeles y usarlo directamente en CSS, herramientas de diseño o código.
- ¿Puedo extraer varios colores a la vez?
- Puedes extraer un Couleur a la vez. Sin embargo, puedes hacer clic sucesivamente en diferentes partes de la imagen para extraer varios colores y copiar cada uno según sea necesario.
- ¿Qué significan las coordenadas de Couleur?
- Las coordenadas (X, Y) representan la posición del píxel clicado en la imagen. X es la posición horizontal (0 a la izquierda), Y es la posición vertical (0 arriba), ayudándote a localizar fácilmente el mismo Couleur más tarde.
Documentación relacionada
- MDN - Canvas API - API Canvas HTML5 para gráficos y visualización
- MDN - Documentación SVG - Documentación y tutoriales de gráficos vectoriales escalables
- W3C - Especificación SVG - Especificación SVG oficial del W3C
- MDN - CSS Color - Valores de Couleur CSS y espacios de Couleur
- Web.dev - Gráficos y efectos visuales - Mejores prácticas para gráficos y animaciones web