Pick colors, convert between HEX/RGB/HSL, and check WCAG contrast ratios.
All color conversion and contrast calculations run locally in your browser — no data is uploaded. The WCAG contrast ratios follow the official W3C standard (≥4.5:1 for normal text, ≥3:1 for large text).
HEX, RGB and HSL describe the same pixel in different languages. HEX is a compact 24-bit integer; RGB is three light intensities (each 0–255); HSL is perceptual — hue (the color), saturation (intensity), lightness (dark↔light). Contrast, meanwhile, is a ratio of relative luminance, not a "brightness difference" you eyeball.
#E76F51 == rgb(231, 111, 81). Raise lightness or drop saturation and you get a different tint/paste — even though hue, the 'color name', barely moves. That is why HSL is friendlier for design tweaks.
You want a button background that keeps its 'coral' identity but passes AA on white.
To pick a color: use the color wheel or enter a HEX/RGB/HSL value — the tool shows conversions between all formats and checks WCAG accessibility contrast ratios.
FreeToolHub Color Picker is a free browser-based tool that picks colors and converts between HEX, RGB, and HSL with WCAG contrast checking, no signup.
Elige colores con conversión HEX, RGB y HSL y verificación de contraste WCAG AA/AAA. 100% en el navegador, gratis, sin registro.
Esta herramienta unifica las dos tareas que lleva consigo cualquier decisión de color en una interfaz: elegir el color y demostrar que se lee bien. Elige cualquier color con el selector visual o escribiendo el HEX, y la herramienta lo convierte al instante a RGB y HSL, con controles deslizantes para afinar tono, saturación y luminosidad. Combínalo con un segundo color —el texto sobre el fondo— y el motor WCAG calcula la relación de contraste y la califica según los umbrales AA y AAA para texto normal y grande. Eso convierte la accesibilidad en una decisión que tomas mientras la paleta todavía está en movimiento, en lugar de una auditoría posterior al lanzamiento.
Los diseñadores de UI que construyen paletas accesibles comprueban el contraste de los botones y las etiquetas antes de la entrega, no después de la revisión legal. Los desarrolladores frontend que convierten los valores HEX de marca en HSL para variantes de opacidad y sistemas de temas hacen la aritmética en un solo sitio. Los equipos de contenido verifican la legibilidad del texto superpuesto sobre imágenes de portada. Y los dueños de pequeños negocios que auditan su propio sitio frente a WCAG 2.1 AA —cada vez más un requisito de contratación y legal bajo la ADA en Estados Unidos y la EN 301 549 en Europa— obtienen respuestas de aprobado o suspenso sin comprar una herramienta de auditoría.
(1) Elige tus colores de primer plano y de fondo mediante el selector, escribiendo el HEX o con los controles deslizantes de RGB/HSL. (2) La relación de contraste se calcula en vivo como un único número, desde 1:1 (idénticos) hasta 21:1 (negro sobre blanco). (3) El panel de veredicto califica ambos colores contra cuatro umbrales: texto normal AA 4,5:1, texto grande AA 3:1, AAA normal 7:1 y AAA grande 4,5:1, con verde o rojo en cada fila. (4) Copia los formatos para CSS: cadenas hex, rgb() y hsl() listas para pegar. Cambiar cualquiera de las dos casillas a negro o blanco sugiere automáticamente la mejor opción de texto.
WCAG 2.1 define dos niveles de conformidad con umbrales numéricos. El nivel AA, la referencia legal y de contratación, exige 4,5:1 para texto normal y 3:1 para texto grande —18,66 px en negrita o 24 px normal y por encima—, además de 3:1 para componentes de interfaz con significado como bordes de campos y botones de icono. El nivel AAA eleva el texto normal a 7:1 y baja el texto grande a 4,5:1. Los fallos habituales son previsibles: texto gris de marcador alrededor de 3:1, botones con color de marca y etiquetas blancas, y texto de baja opacidad sobre imágenes. Soluciones prácticas que respetan el diseño: oscurecer el texto en lugar del fondo, reservar los grises más claros para estados deshabilitados, y probar las superposiciones contra las zonas más claras y más oscuras de la imagen. La matemática se basa en la luminancia, así que la misma pareja puede invertir el veredicto cuando la luminosidad de cualquiera de los dos colores se desplaza aunque sea levemente — por eso comprobar en vivo durante el diseño supera a corregir en bloque después.
Son umbrales de accesibilidad web del W3C. AA exige una relación de contraste de al menos 4,5:1 para texto normal de cuerpo (3:1 para texto grande de 18 pt o más); AAA, el nivel más estricto, exige 7:1. Este verificador puntúa tu par de primer plano y fondo en vivo y te dice qué niveles supera, de modo que los botones y el texto siguen siendo legibles para personas con baja visión — y legalmente seguros bajo normas de accesibilidad como el European Accessibility Act.
No hace falta: elige un color una vez y la herramienta muestra todos los formatos a la vez. HEX para archivos de diseño, RGB para el trabajo con transparencia en rgba(), y HSL para construir paletas (sus ejes de tono, saturación y luminosidad se corresponden con cómo ajustan el color las personas). Los valores son representaciones matemáticamente equivalentes del mismo color sRGB.
Los dos últimos dígitos son el canal alfa (opacidad): #3B82F6 es totalmente opaco, mientras que #3B82F680 es ese mismo azul al 50 % de transparencia. El HEX de 8 dígitos funciona en todos los navegadores y CSS modernos, y a menudo resulta más claro que rgba() porque el color base sigue siendo reconocible a simple vista en el código.
HEX para tokens de diseño compartidos (compacto y universalmente entendido), rgba() cuando necesites calcular la transparencia a partir de un color base, y HSL cuando las paletas se deriven por programa (rotar el tono, ajustar la luminosidad). Dentro de un proyecto, la consistencia importa más que el formato en sí: mezclar tres formatos para la misma variable es exactamente como se cuelan los errores de contraste.
Yes. Pick any two colors and it instantly calculates the WCAG 2.1 contrast ratio (range 1:1 to 21:1). AA compliance requires 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+). AAA requires 7:1. The tool flags pass/fail for each level with specific remediation suggestions.
It converts between HEX (#3B82F6), RGB (59, 130, 246), HSL (217°, 91%, 60%), and displays the closest Tailwind CSS utility class. Copy any format with one click. The visual picker supports hue, saturation, lightness, and alpha channels for precise color selection without needing design software.
What do you call a really smart cookie?
No signups, no data sold. Every tool is free to use — the free tier allows 5 downloads or saves per day, and the optional Pro plan ($7/mo, $59/yr) adds unlimited downloads, batch processing, white-label exports and an ad-free experience.
☕Support me on Ko-fi— support the free tier100% of proceeds go towards hosting & building more free tools.