Cómo usarlo
- cargue, suelte o pegue una imagen, o comience con Pruebe una imagen de muestra.
- Muévase sobre la imagen para ver los píxeles cercanos en la lupa, luego haga clic (en un teléfono, arrastre y levante) para seleccionar; Las teclas de flecha mueven un píxel a la vez.
- Copie HEX, RGB o HSL, revise los colores más grandes en Colores dominantes y expórtelos como CSS o JSON.
HEX, RGB y HSL comparados
- HEX: la forma hexadecimal #RRGGBB utilizada por sitios web, Figma y la mayoría del software de diseño, por ejemplo #1E3A8A.
- RGB: valores de rojo, verde y azul de 0 a 255, por ejemplo rgb(30, 58, 138), útiles en código y para agregar transparencia.
- HSL: tono (0–360°), saturación y luminosidad, por ejemplo hsl(224, 64%, 33%), conveniente para tonos más claros y más oscuros de un tono.
Preguntas frecuentes
¿Cómo obtengo un color de una imagen?
Cargue, suelte o pegue una captura de pantalla. Muévete sobre la imagen para ver la lupa y haz clic en el lugar que desees; en un teléfono, presione y arrastre con el dedo y levante para seleccionar. Los valores HEX, RGB y HSL se copian con un solo clic.
¿Debería tomar una muestra de 1 píxel o de 5×5?
Utilice 1 píxel para logotipos, iconos y capturas de pantalla planas; para fotografías, telas y tomas de productos ruidosas, utilice un promedio de 3×3 o 5×5 para que un solo píxel perdido no distorsione el resultado.
¿Cómo se resuelven los colores dominantes?
La imagen se reduce y se cuenta cada píxel; El corte mediano más la agrupación de k-medias fusionan colores similares en 3 a 8 grupos, ordenados por la parte de la imagen que cubren. Se ignoran los píxeles transparentes. Dominante significa área más grande, no foco visual.
¿Por qué el color elegido difiere del archivo de diseño?
Las capturas de pantalla y las fotografías se ven afectadas por la gestión del color de la pantalla, la compresión JPEG, la iluminación y el balance de blancos de la cámara, por lo que pueden diferir del archivo de diseño o de los colores de impresión como Pantone y CMYK. Trate las pautas de la marca como la fuente de verdad y los colores elegidos como una coincidencia cercana.
¿Cómo uso la exportación CSS y JSON?
La exportación de CSS es un conjunto de variables :root como --color-1 que se pegan directamente en una hoja de estilo; el JSON enumera HEX, RGB, HSL y comparte para desarrolladores o herramientas de diseño. También puedes exportar tu historial de colores elegidos.
¿Está cargada mi imagen?
No. La imagen se decodifica y se dibuja en un lienzo local en su navegador, y la extracción de paleta y selección se ejecuta en su dispositivo, lo que se adapta a imágenes de productos y material de cliente inéditos.