Elige un color visualmente, perfecciona sus valores HEX, RGB o HSL, comprueba el contraste y copia el CSS listo para usar en tu navegador.
Introduce #RGB, #RGBA, #RRGGBB o #RRGGBBAA. El selector de pantalla aparece si tu navegador es compatible.
La escena mantiene el último color válido hasta que se corrija este valor.
Los valores de base, tinte y sombra ahora funcionan en conjunto en un componente real.
Los colores que elijas aparecerán aquí en este dispositivo.
Cinco mezclas sRGB hacia el blanco y cinco hacia el negro, conservando el alfa.
El texto legible debe permanecer claro sobre el fondo elegido.
La transparencia se compone sobre el fondo antes de calcular la relación.
El color es totalmente transparente, por lo que no se renderiza ningún texto y no hay nada que medir. Aumenta el alfa para obtener un resultado de contraste real.
Usa este selector de color online para elegir un color visualmente o introducir un valor HEX, RGB o HSL exacto. El selector de color hexadecimal mantiene todos los formatos sincronizados, conserva la transparencia alfa y convierte una selección en una práctica familia de colores CSS. También funciona como selector de color para navegadores y teclados configurados en inglés británico.
Un selector de color CSS útil necesita más que una sola muestra. Esta herramienta mezcla cinco tintes sRGB deterministas hacia el blanco y cinco sombras hacia el negro, conservando el valor alfa seleccionado. La vista previa del componente aplicado muestra la base, un tinte y una sombra juntos, y la exportación a CSS usa nombres de variable descriptivos desde tint-1 hasta shade-5. ¿Necesitas una armonía completa en lugar de una sola familia? Envía el color al generador de paletas de colores.
En los navegadores compatibles, el botón «Seleccionar de la pantalla» abre el cuentagotas nativo del navegador para que puedas tomar una muestra de cualquier píxel visible, sin necesidad de instalar una extensión o complemento de selector de color. Si la API EyeDropper no está disponible, todos los controles manuales del selector de color siguen funcionando. La herramienta de cuentagotas mantiene tu alfa actual en lugar de reemplazarlo silenciosamente.
La vista previa de contraste compara el color de texto seleccionado con un fondo editable e informa de los resultados WCAG AA para texto normal y grande después de componer la transparencia. Considera esto como una comprobación de color específica en lugar de una auditoría de accesibilidad completa; el tamaño de fuente real, el grosor, los estados, los degradados, los iconos y los componentes circundantes todavía necesitan revisión. El verificador de contraste de color completo añade los umbrales AAA, de elementos no textuales y alternativas accesibles.
El análisis de color, las vistas previas, los colores recientes, los cálculos de contraste y la generación de CSS se ejecutan localmente en este navegador. Los colores recientes se almacenan solo en este dispositivo cuando el almacenamiento local está disponible. No se envía ningún color seleccionado a los servicios de analítica, y un enlace para compartir contiene valores de color solo cuando lo creas explícitamente.
Abre el control de color visual y elige un tono, o introduce un valor HEX, RGB o HSL. Cada selección válida actualiza la vista previa, la familia de colores, el resultado de contraste y las variables CSS.
Sí, si tu navegador es compatible con la API EyeDropper. Elige seleccionar desde la pantalla, selecciona un píxel visible y la herramienta aplicará ese valor RGB conservando el alfa existente.
Sí. Usa valores HEX de 4 u 8 dígitos, RGBA, HSLA o el deslizador alfa. Los valores HEXA, RGBA, HSLA, las vistas previas, los tintes, las sombras, el contraste, los recientes y el CSS permanecen sincronizados.
Los tintes son mezclas sRGB uniformes entre el color base y el blanco; las sombras son mezclas sRGB uniformes entre el color base y el negro. Son ayudantes deterministas, no una escala perceptual OKLCH.
No. El selector se ejecuta localmente. Los colores recientes permanecen en este navegador y los valores exactos se excluyen de las analíticas. Un enlace para compartir incluye los colores seleccionados solo después de que solicites uno.
No. HSL describe un color por su tono, saturación y luminosidad, mientras que HSV/HSB usa el tono, la saturación y el valor o brillo. Comparten el eje del tono, pero escalan la saturación de forma diferente, por lo que una conversión de HSL a HSV cambia los dos últimos números. Este selector edita HSL porque CSS admite hsl() directamente; los valores HEX y RGB permanecen idénticos en cualquier caso.
Phoenix Code te ofrece edición de HTML y CSS, búsqueda en todo el proyecto, Git y Vista Previa en Vivo en un editor de código completo para navegador o escritorio.