Selector de colores

1. 01Elige un color o pega un código HEXUsa el selector de color o escribe un código HEX como #3B82F6. También funcionan los códigos cortos como #0F0.
2. 02Obtén HEX, RGB y HSLEl código se traduce al instante a todos los formatos, junto con una paleta sugerida y la comprobación de contraste.
3. 03Cópialo y úsaloPulsa el botón de copiar junto a cualquier valor y pégalo en tu web, tu diseño o tu presentación.

• Diseño web y CSSCopia un valor HEX o una variable CSS lista para usar directamente en tu código o tu hoja de estilos.
• Identidad de marca y diseño gráficoFija los colores de una marca y cópialos en Canva, en una presentación o en tu herramienta de diseño.
• Comprobar la legibilidad del textoMira si sobre el color elegido se lee mejor el texto claro o el oscuro, para que el contenido siga siendo legible.

• #3B82F6 (azul)Un azul cómodo para botones y enlaces. Equivale a rgb(59, 130, 246) y hsl(217, 91%, 60%). Su contraste es de 3,68:1 con blanco y 5,71:1 con negro, así que sobre él se lee mejor el texto oscuro.
• #22C55E (verde)Un verde adecuado para mensajes de éxito o confirmación. Su versión más oscura, #147638, sirve para el texto o el borde del mismo mensaje.
• #F97316 (naranja)Un naranja con energía para un botón de llamada a la acción. Su complementario es el azul #159AF9.

• Revisa el contrastePara textos normales conviene un contraste de al menos 4,5:1 entre el texto y el fondo. Para comparar dos colores concretos, usa el comprobador de contraste.
• Mantén pocos colores de marcaPara una marca suele bastar con 2 a 4 colores fijos. Cambiarlos a menudo resta coherencia.
• Cada pantalla muestra el color un poco distintoUn color que se ve muy bien en una pantalla puede verse algo diferente en otra. Vale la pena revisarlo en varios dispositivos.

HEX es un código de seis caracteres (como #3B82F6) muy usado en webs y en CSS. RGB describe un color por la intensidad de rojo, verde y azul, de 0 a 255 cada uno. HSL lo describe por tono, saturación y luminosidad, y resulta especialmente práctico para aclarar u oscurecer un color o buscar su complementario. Los tres representan el mismo color, y esta herramienta convierte entre ellos automáticamente.

Toda la conversión se hace en tu navegador con las fórmulas estándar de color, sin llamadas a un servidor y sin guardar datos. La paleta se deriva del color que eliges. La comprobación de contraste usa el cálculo de luminancia relativa de las pautas WCAG, siempre frente al blanco puro y al negro puro; para comparar dos colores cualesquiera, está el comprobador de contraste.

¿Qué es un selector de colores?

Una herramienta para elegir un color y obtener su código en HEX, RGB y HSL, junto con una paleta sugerida y una comprobación de contraste.

¿Qué diferencia hay entre HEX, RGB y HSL?

HEX es el código habitual en webs. RGB describe el color por la intensidad de rojo, verde y azul. HSL lo describe por tono, saturación y luminosidad, lo que facilita aclararlo u oscurecerlo. Los tres representan el mismo color.

¿Cómo copio un código de color?

Pulsa el botón de copiar junto al valor que quieras (HEX, RGB, HSL o la variable CSS) y se copia al portapapeles con la confirmación "Copiado".

¿Puedo usar estos colores directamente en CSS?

Sí. Puedes copiar el valor HEX o una variable CSS lista para usar (como --color: #3B82F6;) y pegarla en tu código.

¿Se guarda el color que elijo?

No. Todo se calcula solo en tu navegador y no se guarda nada. Al recargar la página, la selección vuelve a empezar.

¿Por qué un color se ve distinto en cada pantalla?

Cada pantalla reproduce los colores de forma un poco distinta por su calibración, su brillo y su tecnología. El código es el mismo, pero el aspecto puede variar.