Guía de uso
Este selector de color convierte el tono que eliges en los números que entienden los programas. Abre el diálogo de color integrado en tu navegador y muestra el color seleccionado como código HEX, por ejemplo #8f39e8, y como valor RGB, por ejemplo rgb(143, 57, 232), listos para pegar en una hoja de estilos, un programa de diseño o una guía de marca. Todo ocurre en tu navegador.
Cómo usar el selector de color
- Haz clic en la muestra de color para abrir el diálogo de color del navegador.
- Elige un tono en la paleta o, si el diálogo lo permite, escribe directamente un valor HEX o RGB.
- Pulsa el botón para ejecutar la herramienta y verás los códigos HEX y RGB.
- Copia el resultado y pega los códigos donde los vayas a usar.
Cómo se leen los códigos HEX y RGB
Las pantallas forman cada color mezclando luz roja, verde y azul. La notación RGB expresa la intensidad de cada canal con un número del 0 al 255: rgb(255, 0, 0) es rojo puro, rgb(0, 0, 0) es negro y rgb(255, 255, 255) es blanco. Entre los tres canales se describen 256 × 256 × 256 = 16 777 216 colores.
Un código HEX son esos mismos tres números escritos en base 16. En #ff8800, ff es el rojo (255), 88 el verde (136) y 00 el azul (0): el color es rgb(255, 136, 0), un naranja intenso. Si cada par repite su dígito, el código se puede abreviar, y #f80 equivale exactamente a #ff8800. Dos dígitos más al final añaden transparencia: #ff880080 es ese naranja con una opacidad aproximada del 50 %.
Formatos de color comparados
| Formato | Ejemplo (el mismo naranja) | Dónde se usa |
|---|---|---|
| HEX | #ff8800 | CSS, HTML, herramientas de diseño, manuales de marca |
| RGB / RGBA | rgb(255, 136, 0) | CSS, transparencias, programación |
| HSL | hsl(32, 100%, 50%) | Crear variantes más claras u oscuras de un mismo tono |
| CMYK | 0, 47, 100, 0 | Imprenta; la conversión desde colores de pantalla es aproximada |
La herramienta muestra HEX y RGB. HSL describe el color por su tono (de 0 a 360 grados), su saturación y su luminosidad, y por eso gusta a los diseñadores para tareas como oscurecer un botón al pasar el cursor: se mantiene el tono y se baja la luminosidad. CMYK, el modelo de la imprenta, depende del papel y del perfil de color de cada impresora. Muchos morados y verdes vivos de pantalla no se pueden reproducir con tinta con la misma intensidad, así que para colores de impresión exactos fíate de los valores que te dé tu imprenta.
Contraste y accesibilidad
Un color bonito no siempre es legible como texto. Las Pautas de Accesibilidad para el Contenido Web (WCAG) piden, en el nivel AA, un contraste mínimo de 4,5:1 para el texto normal y de 3:1 para el texto grande. El texto blanco sobre #ff8800, por ejemplo, queda muy por debajo; en cambio, el texto oscuro sobre ese mismo naranja cumple de sobra. Después de elegir los colores, comprueba cada pareja de texto y fondo con una calculadora de contraste, y no dejes que el color transmita información por sí solo: acompaña un estado de error en rojo con un icono o un mensaje.
Tomar colores de la pantalla y mantener la coherencia
El diálogo de color cambia según el navegador y el sistema operativo. Algunos incluyen un cuentagotas que permite hacer clic en cualquier punto de la pantalla, como un logotipo o una foto, y capturar el color de ese píxel. Si no aparece, tendrás que elegir el tono en la paleta a mano.
El mismo código HEX puede verse algo distinto en dos monitores por diferencias de brillo, gama de color y calibración. En la web, los colores se interpretan por defecto en el espacio sRGB. Para mantener la coherencia de una marca, define cada código una vez y reutiliza exactamente ese valor en todas partes. No registres como oficial un color tomado de una captura o de una foto comprimida, porque la compresión y los perfiles de color pueden desplazar el tono.
Usos habituales
- Escribir colores de fondo, texto y botones en una hoja de estilos.
- Pasar los colores de un logotipo o una marca a un diseñador, un desarrollador o una imprenta.
- Crear una pequeña paleta para que presentaciones, gráficos e imágenes para redes repitan los mismos tonos.
- Pasar rápidamente de HEX a RGB cuando dos programas esperan formatos distintos.
Para entender a fondo cómo funcionan estos códigos, consulta la guía de códigos de color HEX y RGB. Si escribes CSS, la herramienta para formatear CSS mantiene ordenada la hoja de estilos, y encontrarás más utilidades en herramientas de diseño.
Privacidad
La elección del color y la conversión de códigos se hacen íntegramente en tu navegador; el color elegido no se envía a nuestro servidor. La página solo suma una unidad a un contador anónimo de uso.