Selector de color de imagen
Elige una foto, un logotipo o una captura. Selecciona un píxel o extrae una paleta para tu próximo diseño.
PNG, JPEG o WebP · hasta 20 MiB y 16 millones de píxeles
Elige una imagen para seleccionar tu primer color.
Haz clic o toca un punto. Enfoca la imagen y usa las flechas para moverte un píxel; mantén Shift para moverte 10 píxeles. Las coordenadas empiezan en 0 en la esquina superior izquierda.
Píxel seleccionado
Selecciona un punto de la imagen.
Tus colores seleccionados
Guarda hasta 12 colores de esta imagen y descarga sus valores.
Comprobar dos colores juntos
Usa el par de muestra, ingresa tus colores o asigna un color de la imagen al texto y al fondo. Revisa la vista previa y el contraste, y copia los valores para tu diseño.
Color seleccionado de la imagen
Elige un píxel y úsalo como color del texto o del fondo.
Elegir otra imagen restablece el par de muestra.
Elige la superficie opaca debajo de los colores transparentes.
Usa #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb(0, 0, 0) o rgba(0, 0, 0, 0.5). Los canales RGB usan enteros de 0 a 255; alfa usa de 0 a 1.
Vista previa del par
Un lugar para tu próxima idea
Trae un cuaderno, toma asiento y empieza con un pequeño boceto.
Relación de contraste
7.46:1
La relación se redondea para mostrarla. Los resultados usan su precisión completa.
| Tamaño del texto | AA | AAA |
|---|---|---|
| Texto normal | Cumple | Cumple |
| Texto grande | Cumple | Cumple |
Texto grande significa al menos 18 pt normal o 14 pt en negrita. Revisa el tamaño usado en tu diseño final.
Detalles del par
{
"standard": "WCAG 2.2 SC 1.4.3 / 1.4.6",
"colorSpace": "sRGB",
"channels": "RGB 0–255; alpha 0–1",
"foreground": [
35,
78,
82,
1
],
"background": [
245,
230,
200,
1
],
"backdrop": [
255,
255,
255,
1
],
"renderedForeground": [
35,
78,
82,
1
],
"renderedBackground": [
245,
230,
200,
1
],
"ratio": 7.46158578805981,
"checks": {
"normalAA": true,
"normalAAA": true,
"largeAA": true,
"largeAAA": true
}
}Los resultados describen este par. Usa los colores originales si los bordes del texto tienen suavizado. La transparencia se calcula sobre la base opaca elegida.
Guía de contraste WCAGExtraer una paleta de tu imagen
Extrae colores para tu diseño y copia o descarga la paleta.
Elige una imagen arriba para extraer su paleta.
El archivo y los valores permanecen en la memoria de esta página. La herramienta no los sube ni almacena. Los servicios habituales del sitio funcionan por separado.
Prueba una muestra original de seis colores
Este PNG original contiene seis bloques de color uniforme, incluidos uno rojo semitransparente y otro totalmente transparente. Descárgalo y selecciónalo arriba para revisar los píxeles.
Descargar PNG de muestra
De los píxeles a colores reutilizables
- Elige un PNG, JPEG o WebP local. La vista previa se adapta a tu pantalla, pero el muestreo usa las dimensiones naturales de la imagen.
- Haz clic, toca o usa las flechas para seleccionar un píxel. Copia HEX para los canales RGB o RGBA para incluir la transparencia.
- Guarda los colores y descarga una lista JSON o TXT con sus valores y coordenadas. Abrir otra imagen borra la selección y la lista anteriores.
Antes de empezar
¿Es gratis este selector de color?
Sí. Elegir, copiar y descargar colores se ejecuta en tu navegador, sin cuenta ni créditos.
¿Qué significa el valor de transparencia?
Alfa es 0 para transparencia total y 255 para opacidad total. HEX sin alfa y RGB muestran los canales de color; RGBA y HEX de ocho dígitos incluyen transparencia. El tablero es un fondo de vista previa, no un color muestreado de la imagen.
¿Por qué cambia el aspecto del color en otra aplicación?
Son valores de píxeles decodificados por el navegador. Los perfiles de color, el procesamiento del navegador, la pantalla y la impresión pueden cambiar su aspecto. Usa los valores en tu diseño y revisa el resultado en su destino.
¿La herramienta sube mi imagen?
No. El archivo local se decodifica y muestrea en esta página. La herramienta no lo envía a un servidor ni lo guarda en el historial. Cargar la página y descargar la muestra pública usa la conexión normal del sitio.
¿Puedo crear una paleta desde mi imagen?
Sí. Usa Extraer paleta para obtener tres, cinco u ocho colores representativos y copiarlos o descargarlos. También puedes elegir y guardar a mano hasta 12 colores con sus coordenadas.