Selector de Color

Elige un color y consúltalo en hex, rgb y hsl. Obtén una rampa de 9 pasos de tinte y sombra y comprueba el contraste WCAG entre dos colores cualesquiera. Todo ocurre en tu navegador — no se sube nada.

Tu color

Acepta #rgb, #rrggbb, rgb(r, g, b) y hsl(h, s%, l%). Actualiza la muestra en vivo.

HEX #1F5FBF
RGB rgb(31, 95, 191)
HSL hsl(218, 72%, 44%)

Rampa de tinte y sombra

Cuatro más claros, después el color base, después cuatro más oscuros. Haz clic en un paso para convertirlo en tu color principal.

Contraste WCAG

Color del texto.

Color de la superficie.

— : 1
AA — texto normal
— necesita 4,5
AA — texto grande
— necesita 3,0
AAA — texto normal
— necesita 7,0
AAA — texto grande
— necesita 4,5

Muestra grande, 24px.

Muestra de cuerpo a 16px. El veloz murciélago hindú comía feliz cardillo y kiwi. 0123456789.

Copiar

La razón de contraste es la fórmula de luminancia relativa WCAG 2.x. La rampa se genera interpolando la luminosidad HSL, que no es perceptualmente uniforme — trátala como un punto de partida, no como una escala perceptiva. Todo se ejecuta localmente en tu navegador.