¿Qué formatos de color se admiten?
Puedes pegar o editar valores HEX (#2563EB), rgb()/rgba() y hsl()/hsla(). Los editores de canal mantienen las tres representaciones sincronizadas.
web
Selector de color / Conversor
Convierte HEX, RGB y HSL con vista previa en vivo, contraste WCAG, copiar y cuentagotas del navegador.
Texto de muestra sobre fondo
#2563EB
HEX
RGB
rgb(37, 99, 235)
HSL
hsl(221, 83%, 53%)
Contraste WCAG
AARelación de contraste: 5.17:1
AA requiere 4,5:1 para texto normal y 3:1 para texto grande. AAA requiere 7:1 para texto normal.
Primer plano sobre fondo
Fondo sobre primer plano
curso de color para desarrolladores
Qué aprenderás en este curso de color para desarrolladores.
Acerca de esta herramienta
El selector y convertidor de color de DevCove ayuda a desarrolladores frontend y de diseño a traducir colores entre HEX, RGB y HSL sin salir del navegador. Elige una muestra de primer plano, pega cadenas de color CSS, edita valores de canal y copia fragmentos CSS listos para usar. Compara texto contra un color de fondo con una relación de contraste WCAG simplificada e indicaciones AA / AAA. Cuando tu navegador admite la API EyeDropper, muestrea colores de cualquier parte de la pantalla.
Cómo usar esta herramienta
Usa este convertidor de color cuando necesites valores listos para CSS para temas, componentes o comprobaciones de accesibilidad:
- Elige un color de primer plano con la entrada de color nativa o pega una cadena HEX / RGB / HSL.
- Edita campos de canal HEX, RGB o HSL: los valores permanecen sincronizados mientras escribes.
- Establece una muestra de fondo para evaluar el contraste del texto con indicaciones simplificadas de relación WCAG.
- Copia formatos individuales o usa Copiar todos los formatos para notas de entrega de diseño.
- Usa Elegir color cuando tu navegador admita la API EyeDropper para muestrear de la pantalla.
- Carga presets como azul DevCove, negro pizarra o verde de éxito para puntos de partida rápidos.
Funciones
Diseñado para trabajo cotidiano de CSS e interfaz en lugar de gestión completa de sistemas de diseño:
- Sincronización en vivo entre campos HEX, RGB y HSL.
- Vista previa de primer plano y fondo con texto de muestra.
- Relación de contraste WCAG simplificada con indicaciones AA / AAA / texto grande.
- Copia HEX, RGB, HSL o salida de formatos agrupados.
- Analizador de pegado para cadenas #hex, rgb(), rgba(), hsl() y hsla().
- Muestras preset para colores de marca y semánticos comunes.
- Soporte de cuentagotas del navegador cuando está disponible.
- Conversión 100 % del lado del cliente: los colores no se suben.
- Complementa codificador de entidades HTML, codificador de URL y probador de regex para flujos frontend.
Preguntas frecuentes
¿Qué tan precisa es la comprobación de contraste WCAG?
DevCove calcula luminancia relativa y relación de contraste usando la fórmula WCAG estándar para colores sRGB. Es una indicación rápida para pares de texto, no un sustituto de auditar temas completos o interfaz no textual.
¿Por qué falta el botón del cuentagotas?
La API EyeDropper está disponible en navegadores de escritorio basados en Chromium. Safari y Firefox pueden ocultar el botón hasta que haya soporte disponible.
¿Se suben mis colores?
No. El análisis y la conversión ocurren enteramente en tu navegador.
¿La transparencia alpha afecta al contraste?
Esta herramienta evalúa valores RGB opacos de primer plano y fondo. Para superposiciones translúcidas, aplana los colores contra el fondo previsto antes de confiar en la relación.