Paso 1
Elige o ingresa un color
Utilice el selector visual, aplique un código HEX válido de tres o seis dígitos, elija una muestra rápida o inicie el cuentagotas en pantalla cuando su navegador lo admita.
Selector de color en línea gratuito: HEX, RGB y HSL
Elija un color visualmente o ingrese un valor HEX, luego ajuste RGB, HSL y opacidad. Obtenga una vista previa del resultado, compare tonos cercanos y copie el código de color exacto sin iniciar sesión.
Elige y edita un color
Color inicial: #0F766E. Cada control válido actualiza una selección sRGB de 8 bits.
Acepta #RGB o #RRGGBB. La opacidad se controla por separado.
Vista previa de transparencia
#0F766E
Vista previa de texto opaco
Texto blanco5.47:1
Texto negro3.84:1
Copiar valores de color
HSV es una referencia de diseño; las otras filas son valores listos para CSS.
Tonos relacionados
Selecciona un tinte, tono o color complementario.
Guardado para esta pestaña
Hasta ocho colores; recargar borra el conjunto.
Aún no hay colores guardados.
Cómo elegir un color en línea
Paso 2
Ajustar RGB, HSL y opacidad
Ajusta los canales rojo, verde y azul o cambia el tono, la saturación, la luminosidad y la opacidad. Cada control válido mantiene sincronizadas las vistas previas y los formatos de salida.
Paso 3
Vista previa, guardar y copiar el valor
Verifique la transparencia y el texto claro u oscuro, pruebe con un tono relacionado, guarde hasta ocho candidatos de la pestaña actual y luego copie el valor exacto que su CSS o herramienta de diseño necesita.
Editar valores HEX, RGB, HSL y Alpha
Los controles expresan un color sRGB de 8 bits en varias formas útiles. Elija la representación que coincida con la información que ya tiene o el ajuste que necesita realizar.
Utilice HEX para códigos de color web compactos
Ingresa #RGB o #RRGGBB y aplícalo sin perder el color válido anterior cuando el campo esté incompleto. Copie HEX de seis dígitos para un color base opaco o HEX de ocho dígitos cuando se necesite un canal alfa.
Ajustar canales rojo, verde y azul
RGB expone los tres canales 0-255 sRGB directamente. Úselo cuando una especificación o aplicación de diseño le proporcione valores numéricos de rojo, verde y azul o cuando un canal necesite una pequeña corrección.
Cambiar tono, saturación, luminosidad y alfa
El tono gira entre 0 y 360 grados, la saturación controla la intensidad del color, la luminosidad se mueve hacia el blanco o negro y el alfa controla la transparencia. Estos controles permanecen limitados a rangos válidos.
Vista previa de un color en superficies claras y oscuras
Un código numérico es más fácil de juzgar cuando aparece en contextos realistas. Utilice estas vistas previas como evidencia para la próxima decisión, no como una revisión completa de accesibilidad.
Compruebe el color sobre la transparencia
Un tablero de ajedrez hace visible la opacidad en lugar de mostrar cada valor alfa solo contra el blanco. Compare la vista previa transparente con la muestra de base opaca antes de copiar un formato con reconocimiento alfa.
Comparar texto en blanco y negro
El espacio de trabajo coloca texto blanco y negro sobre el color opaco seleccionado e informa cada relación de contraste. Esto ayuda a identificar una dirección probable antes de probar el par real de primer plano y fondo.
Ejecutar una comprobación completa del contraste para un par de colores
Un fondo seleccionado y dos colores de texto de muestra no pueden validar una interfaz completa. Utilice el Comprobador de contraste de color dedicado para probar el par exacto y revisar los umbrales de texto normal y texto grande.
Cuentagotas del navegador, privacidad y límites de color
Las API del navegador y los valores de color digitales tienen límites prácticos. La página mantiene los controles alternativos utilizables y explica lo que los números seleccionados pueden y no pueden representar.
Utilice el cuentagotas de pantalla cuando sea compatible
El EyeDropper es una mejora progresiva con disponibilidad limitada del navegador. Requiere que haga clic en un botón, devuelve un color de pantalla seleccionado, se puede cancelar con Escape y puede requerir un contexto seguro.
Mantener los colores seleccionados en la pestaña actual
El selector convierte valores y mantiene muestras guardadas en el estado de página actual. No necesita una cuenta ni una solicitud externa de procesamiento de color, y no promete almacenamiento permanente ni disponibilidad fuera de línea.
Trate el resultado como un color web sRGB
La herramienta utiliza valores sRGB de 8 bits para flujos de trabajo web y de pantalla. No lee perfiles de imagen, no genera valores de gama amplia ni garantiza coincidencias con impresoras, tintas, papel, pintura o sistemas de color patentados.
Privacidad y límites
Los cálculos de color y las muestras guardadas permanecen en esta pestaña del navegador y no se envían a un servicio de color externo. La pantalla opcional EyeDropper se inicia solo después de hacer clic y no está disponible en todos los navegadores o contextos.
- • La entrada de color visual y la apariencia y disponibilidad del cuentagotas en pantalla varían según el navegador y la plataforma.
- • Esta herramienta utiliza valores sRGB de 8 bits y no proporciona impresión, pintura, PANTONE o coincidencia de gama amplia con administración de color.
- • No carga imágenes ni píxeles de muestra de un archivo de imagen.
- • Las muestras guardadas son temporales en el estado de la pestaña actual y se borran al recargar.
Preguntas frecuentes
¿Este selector de color es de uso gratuito?
Sí. Este selector de color se puede utilizar de forma gratuita en línea sin necesidad de registrarse ni iniciar sesión. La página no coloca la selección de colores, la edición de canales, las muestras guardadas de la pestaña actual ni las acciones de copia detrás de una puerta de cuenta.
¿Cómo uso el selector de color en línea?
Elija un color con el control visual, ingrese un valor HEX válido de tres o seis dígitos o use Seleccionar de la pantalla en un navegador compatible. Ajuste RGB, HSL u opacidad, revise las vistas previas y luego copie el formato que necesita.
¿Qué formatos de color puedo copiar?
Puede copiar HEX opaco, HEX con reconocimiento alfa, CSS RGB moderno, CSS HSL moderno, valores de referencia HSV y una declaración de propiedad personalizada CSS. Cuando la opacidad es inferior al 100%, las filas con reconocimiento alfa la incluyen explícitamente.
¿Cuál es la diferencia entre HEX, RGB y HSL?
HEX y RGB describen los mismos canales rojo, verde y azul sRGB de 8 bits en diferente sintaxis. HSL representa ese color por tono, saturación y luminosidad, lo que puede resultar más conveniente cuando desea rotar un tono o hacer que un color sea más apagado, más claro o más oscuro.
¿Puedo agregar opacidad o copiar un color alfa?
Sí. Ajuste la opacidad de 0% a 100%. La vista previa transparente se actualiza sobre un tablero de ajedrez y las filas variables alfa HEX, RGB, HSL y CSS incluyen la opacidad seleccionada. Opaque HEX sigue estando disponible como color base de seis dígitos.
¿Puedo elegir un color desde cualquier lugar de mi pantalla?
En un navegador compatible y en un contexto seguro, Seleccionar desde la pantalla inicia el cuentagotas del navegador después de hacer clic. Elija un píxel de la pantalla o presione Escape para cancelar. Si el botón no está disponible, utilice el selector visual normal o los campos numéricos.
¿Este selector de color carga o guarda mis colores?
No se carga ninguna entrada de color a un servicio de color externo. El color seleccionado y las muestras guardadas sólo existen en el estado de página actual. Al volver a cargar o cerrar la pestaña se borra el conjunto de trabajo guardado.
¿Puedo elegir un color de una imagen cargada?
No. Esta ruta es un selector de color general y un conversor de formato; no carga imágenes ni píxeles de imágenes de muestra. En un navegador compatible, la pantalla opcional EyeDropper puede muestrear un píxel visible después de una acción explícita del usuario.
¿Las relaciones de contraste mostradas garantizan la accesibilidad?
No. Comparan el color base opaco con el blanco y el negro solo como vista previa rápida. Pruebe el par real de primer plano y fondo en el Comprobador de contraste de color dedicado y revise el resto de la interfaz, incluido el tamaño del texto, el peso, los estados y las señales sin color.
¿El color seleccionado coincidirá con la impresión, la pintura o con cada pantalla?
No necesariamente. Esta herramienta funciona con colores web sRGB de 8 bits. La calibración de pantalla, los perfiles de imagen, los espacios de color de amplia gama, los perfiles de impresora, las tintas, el papel, la pintura y los sistemas de color patentados pueden producir resultados diferentes incluso cuando un valor numérico parece similar.
Herramientas relacionadas
Continúa con otra herramienta basada en navegador.
Cd Herramientas de diseño gratuitas
Comprueba el contraste del par de colores
Comprobador de contraste de color
Pruebe el texto y los colores de fondo con WCAG 2.2 AA y AAA. Vea la relación de contraste exacta, obtenga una vista previa del tamaño y peso de fuente seleccionados e identifique si el par pasa.
Gd Herramientas de diseño gratuitas
Construir un gradiente CSS
Generador de degradados CSS
Crea degradados lineales, radiales o cónicos con dos a seis paradas de color. Obtenga una vista previa del resultado en vivo, ajuste la dirección u origen relevante y copie CSS listo para usar sin iniciar sesión.
Gd Herramientas de diseño gratuitas
Aplicar color a una sombra CSS
Generador de sombras CSS
Crea sombras en capas CSS con hasta cuatro capas editables. Ajuste los desplazamientos, el desenfoque, la extensión, el color, la opacidad y el modo de inserción, obtenga una vista previa del resultado y copie el CSS sin iniciar sesión.
Od Herramientas de diseño gratuitas
Preparar un activo SVG
Optimizador de SVG
Cargue o pegue el marcado SVG, optimícelo localmente con SVGO y compare el código, el tamaño del archivo y el resultado visual antes de descargarlo. No es necesario iniciar sesión ni cargar el servidor.