Elige un color y obtén sus valores HEX, RGB, CMYK, HSV y HSL al instante

Un selector de color es una herramienta online gratuita que te permite elegir un color y leer al instante su valor en cinco formatos: HEX, RGB, CMYK, HSV y HSL. Elige un color en la paleta o pega un valor HEX o RGB, y copia el formato que necesites con un clic. También incluye un comprobador de contraste WCAG para probar un color de texto sobre un color de fondo y confirmar que es accesible. Todo funciona en tu navegador, gratis y sin registro.

HEX

RGB

CMYK

HSV

HSL

Color

WCAG contrast checker

Check that a text color is readable on a background color. WCAG 2.1 requires a ratio of at least 4.5:1 for normal text and 3:1 for large text.

Text color (HEX)

Background color (HEX)

Contrast ratio

Sample text: check how readable this is

AA normal text (4.5:1)
AA large text (3:1)
AAA normal text (7:1)
AAA large text (4.5:1)

Cómo usar el selector de color

Elige un color en la paleta o escribe un valor HEX o RGB para ver el color que representa.
Copia cualquiera de los cinco formatos con el botón de copiar que hay al lado.
Baja hasta el comprobador de contraste para probar un color de texto sobre un color de fondo y ver qué niveles WCAG cumple.

¿Qué formato de color deberías usar?

Formato	Ideal para	Ejemplo
HEX	Webs, CSS, herramientas de diseño	#f4ae00
RGB	Pantallas, CSS con transparencia (rgba)	rgb(244, 174, 0)
CMYK	Impresión: folletos, packaging, tarjetas de visita	0%, 29%, 100%, 4%
HSV	Selectores de color en software de diseño	hsv(43°, 100%, 96%)
HSL	Paletas CSS: tonos más claros y más oscuros del mismo matiz	hsl(43°, 100%, 45%)

Usos habituales

Igualar el color de una marca cuando solo tienes un código HEX de un diseñador.
Convertir un color web a CMYK antes de enviar los archivos a imprenta.
Comprobar que el texto de los botones y del cuerpo cumple el requisito de contraste WCAG 2.1 de 4.5:1.
Crear una paleta CSS: mantén el matiz y la saturación y cambia solo la luminosidad HSL.

Preguntas frecuentes sobre el selector de color

¿El selector de color es gratis?

Sí, el selector de color y el comprobador de contraste son totalmente gratis, sin registro y sin límites de uso.

¿Cuál es la diferencia entre HEX, RGB, CMYK, HSV y HSL?

HEX y RGB describen los mismos colores de pantalla en notaciones distintas: HEX es la forma compacta que se usa en CSS y en las herramientas de diseño, y RGB indica los valores de rojo, verde y azul. CMYK describe la cobertura de tinta para impresión. HSV y HSL describen un color por su matiz, lo que resulta cómodo para crear paletas y ajustar el brillo.

¿Cómo convierto HEX a RGB?

Pega el valor HEX en el campo HEX y el valor RGB aparece de inmediato en el campo RGB. La conversión también funciona al revés: escribe un valor RGB y obtendrás el código HEX.

¿Qué relación de contraste necesito para la accesibilidad?

El nivel AA de WCAG 2.1 exige una relación de al menos 4.5:1 para el texto normal y 3:1 para el texto grande (18pt o más, o 14pt en negrita). El nivel AAA exige 7:1 para el texto normal. El comprobador de contraste de esta página muestra cuáles de estos niveles cumple tu par de colores.

¿Puedo convertir un color de pantalla a un color de impresión?

Sí, la herramienta muestra el valor CMYK de cualquier color que elijas. Ten en cuenta que la conversión a CMYK es una aproximación: el color impreso final también depende del perfil de la impresora y del papel, así que pide siempre una prueba impresa para los colores críticos de una marca.

Selector de color