Herramientas Web

Selector de color

Elige un color con el selector, escribe un código o tómalo de una imagen. Verás al instante su valor en HEX, RGB, HSL, HSV, CMYK y OKLCH, si el texto se lee bien sobre él y qué colores combinan.

Se procesa en tu dispositivo. No se sube nada.

Azul

El texto blanco se lee mejor sobre este color.

El color elegido es el
21,00:1Excelente
  • AA · texto normal (4,5:1)
  • AA · texto grande (3:1)
  • AAA · texto normal (7:1)
  • AAA · texto grande (4,5:1)
  • Componentes de interfaz (3:1)

Paso a paso

Cómo se usa

  1. Arrastra en el cuadro de color y mueve las barras de tono y opacidad. También puedes escribir un código en cualquier formato, por ejemplo #2447F5, rgb(36, 71, 245) o un nombre como «azul».
  2. Copia el valor que necesites con el botón junto a cada formato: HEX, RGB, HSL, HSV, CMYK u OKLCH.
  3. Para tomar un color de la pantalla usa el cuentagotas, o abre «Desde imagen», sube una foto y toca el punto que quieres.
  4. En «Contraste» comprueba si tu texto cumple las pautas WCAG AA y AAA sobre un fondo. En «Variantes» encontrarás tintes, sombras y armonías, y en «Favoritos» guardas los tuyos.
FAQ

Preguntas frecuentes

¿Cómo paso un color de HEX a RGB, o al revés?

Escribe o pega el código en cualquiera de los campos y los demás se actualizan al momento. Por ejemplo, #2447F5 equivale a rgb(36, 71, 245) y a hsl(230, 91%, 55%). Puedes copiar cada formato con un clic.

¿Qué formatos de color entiende?

HEX de 3, 6 y 8 dígitos (con o sin #), rgb() y rgba(), hsl() y hsla(), hsv(), cmyk(), oklch(), tres números separados por comas y nombres de color en inglés o en español, como red, tomato, azul o celeste. Si no se entiende lo que escribiste, el campo lo indica.

¿Qué significan AA y AAA en el contraste?

Son los niveles de las pautas de accesibilidad WCAG. AA pide una relación de contraste de 4,5 a 1 para texto normal y de 3 a 1 para texto grande. AAA es más exigente: 7 a 1 y 4,5 a 1. Los componentes de interfaz, como bordes de botones o íconos, necesitan 3 a 1.

¿Puedo tomar un color de cualquier parte de la pantalla?

En Chrome, Edge y otros navegadores basados en Chromium aparece el botón «Cuentagotas», que permite elegir un color de cualquier punto de la pantalla. En el resto, abre «Desde imagen», sube una captura o foto y toca el punto que te interesa.

¿El CMYK es exacto para imprimir?

No. Es una conversión aproximada desde RGB. Las impresoras y los perfiles de color de cada taller dan resultados distintos, así que úsalo como referencia y pide siempre una prueba impresa antes de producir.

¿Se guardan mis colores o mis imágenes en algún servidor?

No. Todo se calcula en tu dispositivo. Los favoritos se guardan solo en tu navegador y las imágenes que subes no salen de él.

Para qué sirve un selector de color

Cuando diseñas una página, una presentación o una imagen necesitas el mismo color en formatos distintos: HEX para CSS, RGB para pantallas, HSL para ajustar tonos, CMYK como referencia para imprenta. Esta herramienta los calcula todos a la vez y los mantiene sincronizados, así no tienes que convertir a mano.

Contraste y accesibilidad

Un texto que no se lee bien deja fuera a mucha gente, no solo a quienes tienen baja visión. El verificador de contraste calcula la relación entre el color del texto y el del fondo según la fórmula de WCAG 2.1 y te dice qué niveles cumple. Si no llega, te propone el color más cercano que sí lo hace, para que cambies lo mínimo.

Armonías de color

  • Complementario: el color opuesto en el círculo cromático. Da máximo contraste.
  • Análogos: vecinos del color base. Se ven tranquilos y coherentes.
  • Triádico: tres colores equidistantes. Es vibrante y equilibrado.
  • Monocromático: el mismo tono con distinta luminosidad. Ideal para interfaces sobrias.

Formatos de color explicados

  • HEX: seis cifras precedidas por # (por ejemplo #2447F5). Es el formato más usado en CSS y en herramientas de diseño.
  • RGB: cantidad de rojo, verde y azul, de 0 a 255, que es como una pantalla compone el color.
  • HSL y HSV: tono, saturación y luminosidad (o valor). Son cómodos para hacer un color más claro, más oscuro o más apagado.
  • CMYK: una aproximación para imprenta; el resultado real depende del papel y de la tinta.
  • OKLCH: un espacio moderno de CSS en el que cambiar la luminosidad no altera el tono percibido.

Tomar un color de la pantalla

Si tu navegador lo permite, el cuentagotas toma el color de cualquier punto visible de la pantalla. En los demás, sube una imagen y toca el punto que te interesa. También puedes escribir un nombre de color en español, como «celeste», y la herramienta lo reconoce.

Variantes y favoritos

Desde un color base obtienes tintes y sombras en pasos parejos, para armar una escala de grises azulados o de un tono de marca. Guarda los que uses seguido como favoritos y vuelve a aplicarlos con un clic.

Privacidad

Los favoritos se guardan solo en tu navegador y las imágenes que subes no salen de tu dispositivo.

Actualizada el 29 de septiembre de 2026