Selector
Códigos de color
Haz clic en cualquier fila para copiarla al portapapeles.
Extraer color de una imagen
Arrastra o sube una imagen y haz clic en cualquier punto para tomar ese píxel. Tu archivo nunca sale del navegador.
Paletas armónicas
Paletas generadas a partir de tu color. Haz clic en una muestra para activarla.
Escala de color (50 → 900)
Tintes y sombras listos para tu sistema de diseño. El 500 es el color elegido.
Comprobador de contraste (WCAG)
Comprueba tu color como texto y como fondo. El texto de cuerpo debería alcanzar 4,5:1 o más.
Conversores
Nombres de color
Colores que puedes escribir por su nombre en CSS y HTML, agrupados por familia. Abre uno para ver sus códigos, paletas y contraste.
Cómo usar el selector de color
Muévete horizontalmente por el cuadrado para cambiar la saturación y verticalmente para cambiar el brillo. La primera barra ajusta el tono y la segunda la opacidad. Selecciona un control y usa las flechas para ajustes de una unidad, o mantén Shift para moverte de diez en diez.
El campo de texto acepta casi cualquier formato: #3B82F6, rgb(59 130 246), hsl(217, 91%, 60%), hsv(217, 76%, 96%), cmyk(76%, 47%, 0%, 4%) y nombres CSS como tomato.
El cuentagotas toma un color de cualquier parte de la pantalla en navegadores compatibles con la API EyeDropper (Chrome, Edge). En Safari y Firefox, sube una imagen y haz clic sobre ella para lograr lo mismo. Las imágenes se procesan localmente y nunca se suben.
Preguntas frecuentes
¿Cuál es la diferencia entre HEX y RGB?
Describen el mismo color. HEX (#FF6347) escribe rojo, verde y azul con dos dígitos hexadecimales cada uno; RGB (255, 99, 71) escribe los mismos números en decimal. CSS acepta ambos, y para la transparencia se usa rgba() o un HEX de 8 dígitos.
¿Qué valores debo usar para imprimir?
La impresión usa CMYK. El CMYK que se muestra aquí es una conversión matemática sin perfil ICC, así que tómalo como punto de partida y sigue el perfil o la referencia Pantone que indique tu imprenta.
¿Por qué importa el contraste?
Un texto con poco contraste respecto al fondo es difícil de leer. WCAG 2.1 exige al menos 4,5:1 para el texto de cuerpo y 3:1 para el texto grande (18pt o más).
¿Dónde van las imágenes que subo?
A ninguna parte. Las imágenes se abren solo en tu navegador, se usan para leer píxeles y se descartan al cerrar la página. Los colores guardados quedan en el almacenamiento local de este navegador.
¿Es gratis?
Sí, sin registro. La publicidad de la página cubre los costes de funcionamiento.