aliceblue azul cielo muy claro
Códigos de color (HEX, RGB y HSL)
Busca y copia el HEX, el RGB y el HSL de los 139 colores con nombre de CSS, y comprueba el contraste combinando tú mismo el color del texto y el del fondo.
Combinar el color del texto y el del fondo
Hola ABC 123
Texto grande de 24px
Contraste 12.63:1
- Texto normal 4.5:1 — Cumple
- Texto grande (24px o más; 19px o más en negrita) 3:1 — Cumple
Al copiar salen dos líneas, color y background: así no se pierde cuál es el texto y cuál el fondo.
Combinaciones recientes
Solo se miden dos colores opacos. Si hay transparencia o el fondo es una imagen, esta herramienta no emite un resultado.
Aquí ves el contraste de los dos colores elegidos, nada más. No garantiza la accesibilidad de toda la pantalla.
Colores con nombre
Son los 139 colores que CSS entiende por su nombre. Los 9 pares de nombres que apuntan al mismo color van juntos en una fila (148 nombres en total).
La descripción en español no es un nombre estándar: es la nuestra para explicar el color. El nombre que se copia a otro sitio es el inglés.
Alcance
139 colores
antiquewhite pardo grisáceo claro
Otros formatos y funciones
aqua · cyan cian vivo
Otros formatos y funciones
aquamarine verde azulado luminoso
Otros formatos y funciones
azure blanco con un punto de cian
Otros formatos y funciones
beige amarillo grisáceo muy claro
Otros formatos y funciones
bisque naranja muy claro
Otros formatos y funciones
black negro
Otros formatos y funciones
blanchedalmond naranja amarillento muy claro
Otros formatos y funciones
blue azul
Otros formatos y funciones
blueviolet violeta azulado vivo
Otros formatos y funciones
brown marrón rojizo
Otros formatos y funciones
burlywood pardo dorado claro
Otros formatos y funciones
cadetblue cian apagado
Otros formatos y funciones
chartreuse verde lima luminoso
Otros formatos y funciones
chocolate marrón anaranjado
Otros formatos y funciones
coral naranja rojizo luminoso
Otros formatos y funciones
cornflowerblue azul claro
Otros formatos y funciones
cornsilk beige amarillento muy claro
Otros formatos y funciones
crimson rojo intenso
Otros formatos y funciones
darkblue azul oscuro
Otros formatos y funciones
darkcyan cian oscuro
Otros formatos y funciones
darkgoldenrod pardo dorado oscuro
Otros formatos y funciones
darkgray · darkgrey gris claro
Otros formatos y funciones
darkgreen verde muy oscuro
Otros formatos y funciones
darkkhaki amarillo apagado
Otros formatos y funciones
darkmagenta violeta rojizo oscuro
Otros formatos y funciones
darkolivegreen verde lima grisáceo y oscuro
Otros formatos y funciones
darkorange naranja intenso
Otros formatos y funciones
darkorchid violeta intenso
Otros formatos y funciones
darkred rojo oscuro
Otros formatos y funciones
darksalmon naranja claro apagado
Otros formatos y funciones
darkseagreen verde grisáceo claro
Otros formatos y funciones
darkslateblue azul marino grisáceo y oscuro
Otros formatos y funciones
darkslategray · darkslategrey gris oscuro con un punto de cian
Otros formatos y funciones
darkturquoise cian intenso
Otros formatos y funciones
darkviolet violeta vivo
Otros formatos y funciones
deeppink rosa intenso vivo
Otros formatos y funciones
deepskyblue azul cielo vivo
Otros formatos y funciones
dimgray · dimgrey gris oscuro
Otros formatos y funciones
dodgerblue azul luminoso
Otros formatos y funciones
firebrick rojo intenso apagado
Otros formatos y funciones
floralwhite blanco con un punto de beige amarillento
Otros formatos y funciones
forestgreen verde apagado
Otros formatos y funciones
fuchsia · magenta magenta vivo
Otros formatos y funciones
gainsboro gris muy claro
Otros formatos y funciones
ghostwhite blanco con un punto de violeta
Otros formatos y funciones
gold amarillo intenso
Otros formatos y funciones
goldenrod pardo dorado luminoso
Otros formatos y funciones
gray · grey gris
Otros formatos y funciones
green verde oscuro
Otros formatos y funciones
greenyellow verde lima amarillento y luminoso
Otros formatos y funciones
honeydew blanco con un punto de verde
Otros formatos y funciones
hotpink rosa intenso
Otros formatos y funciones
indianred rojo apagado
Otros formatos y funciones
indigo violeta azulado muy oscuro
Otros formatos y funciones
ivory blanco con un punto de amarillo
Otros formatos y funciones
khaki amarillo claro
Otros formatos y funciones
lavender violeta grisáceo muy claro
Otros formatos y funciones
lavenderblush blanco con un punto de rosa
Otros formatos y funciones
lawngreen verde lima vivo
Otros formatos y funciones
lemonchiffon amarillo muy claro
Otros formatos y funciones
lightblue azul cielo grisáceo y claro
Otros formatos y funciones
lightcoral rojo claro
Otros formatos y funciones
lightcyan cian muy claro
Otros formatos y funciones
lightgoldenrodyellow verde lima amarillento y muy claro
Otros formatos y funciones
lightgray · lightgrey gris luminoso
Otros formatos y funciones
lightgreen verde claro
Otros formatos y funciones
lightpink rosa luminoso
Otros formatos y funciones
lightsalmon naranja rojizo claro
Otros formatos y funciones
lightseagreen cian con un punto de verde
Otros formatos y funciones
lightskyblue azul cielo luminoso
Otros formatos y funciones
lightslategray · lightslategrey gris azulado luminoso
Otros formatos y funciones
lightsteelblue azul grisáceo claro
Otros formatos y funciones
lightyellow amarillo claro casi blanco
Otros formatos y funciones
lime verde vivo
Otros formatos y funciones
limegreen verde intenso
Otros formatos y funciones
linen beige muy claro
Otros formatos y funciones
maroon rojo muy oscuro
Otros formatos y funciones
mediumaquamarine verde azulado claro y apagado
Otros formatos y funciones
mediumblue azul intenso
Otros formatos y funciones
mediumorchid violeta rojizo
Otros formatos y funciones
mediumpurple violeta azulado claro
Otros formatos y funciones
mediumseagreen verde azulado apagado
Otros formatos y funciones
mediumslateblue violeta azulado luminoso
Otros formatos y funciones
mediumspringgreen verde azulado vivo
Otros formatos y funciones
mediumturquoise cian luminoso
Otros formatos y funciones
mediumvioletred magenta intenso
Otros formatos y funciones
midnightblue azul marino oscuro y apagado
Otros formatos y funciones
mintcream blanco con un punto de verde azulado
Otros formatos y funciones
mistyrose rosa rojizo muy claro
Otros formatos y funciones
moccasin naranja amarillento claro
Otros formatos y funciones
navajowhite naranja claro y luminoso
Otros formatos y funciones
navy azul muy oscuro
Otros formatos y funciones
oldlace beige claro y luminoso
Otros formatos y funciones
olive verde lima amarillento y oscuro
Otros formatos y funciones
olivedrab verde lima apagado
Otros formatos y funciones
orange naranja
Otros formatos y funciones
orangered naranja rojizo intenso
Otros formatos y funciones
orchid violeta rojizo apagado
Otros formatos y funciones
palegoldenrod amarillo grisáceo claro
Otros formatos y funciones
palegreen verde claro y luminoso
Otros formatos y funciones
paleturquoise cian claro
Otros formatos y funciones
palevioletred rosa intenso apagado
Otros formatos y funciones
papayawhip beige amarillento claro
Otros formatos y funciones
peachpuff naranja claro
Otros formatos y funciones
peru pardo dorado
Otros formatos y funciones
pink rosa
Otros formatos y funciones
plum violeta rojizo claro
Otros formatos y funciones
powderblue azul cielo grisáceo muy claro
Otros formatos y funciones
purple magenta oscuro
Otros formatos y funciones
rebeccapurple violeta grisáceo oscuro
Otros formatos y funciones
red rojo
Otros formatos y funciones
rosybrown rosa grisáceo
Otros formatos y funciones
royalblue azul vivo
Otros formatos y funciones
saddlebrown marrón oscuro
Otros formatos y funciones
salmon rojo anaranjado luminoso
Otros formatos y funciones
sandybrown marrón anaranjado luminoso
Otros formatos y funciones
seagreen verde azulado oscuro
Otros formatos y funciones
seashell blanco con un punto de naranja
Otros formatos y funciones
sienna marrón
Otros formatos y funciones
silver gris pálido
Otros formatos y funciones
skyblue azul cielo
Otros formatos y funciones
slateblue violeta azulado apagado
Otros formatos y funciones
slategray · slategrey gris azulado
Otros formatos y funciones
snow blanco con un punto de rojo
Otros formatos y funciones
springgreen verde azulado luminoso y vivo
Otros formatos y funciones
steelblue azul apagado
Otros formatos y funciones
tan pardo dorado claro y apagado
Otros formatos y funciones
teal verde azulado oscuro
Otros formatos y funciones
thistle violeta grisáceo claro
Otros formatos y funciones
tomato rojo anaranjado
Otros formatos y funciones
turquoise cian claro con un punto de verde
Otros formatos y funciones
violet violeta rojizo luminoso
Otros formatos y funciones
wheat beige amarillento
Otros formatos y funciones
white blanco
Otros formatos y funciones
whitesmoke blanco grisáceo
Otros formatos y funciones
yellow amarillo
Otros formatos y funciones
yellowgreen verde lima amarillento
Otros formatos y funciones
Cómo se decide el contraste
Se calcula la luminancia relativa de cada color y se aplica (el más claro + 0,05) ÷ (el más oscuro + 0,05). Los umbrales son los valores fijos del contraste mínimo de WCAG 2.2 (criterio 1.4.3); no los decide esta página.
El valor mostrado se redondea hacia abajo. Escribir 4,50 en lugar de 4,499 se leería como aprobado cuando el resultado real no cumple.
Esta página trabaja solo con códigos sRGB de pantalla. No saca colores de una foto, no convierte a color de imprenta (CMYK o Pantone) ni calibra el monitor.
Preguntas frecuentes
¿En qué se diferencian HEX y RGB? Son dos maneras de escribir el mismo color. #663399 pone el rojo, el verde y el azul en dos dígitos hexadecimales cada uno, y rgb(102, 51, 153) escribe esos mismos valores en decimal. El color que aparece en pantalla es el mismo.
¿De dónde sale el 4.5:1? Es el umbral de WCAG 2.2 para el texto normal. El texto grande pide 3:1, y se considera grande a partir de 24px, o de 19px en negrita.
Si aquí cumple, ¿ya es accesible? No. Solo se ha medido el contraste de dos colores. Una pantalla entera se revisa también por el tamaño de letra, el interlineado y el texto sobre imágenes.
¿Puedo buscar en español? Sí. La búsqueda encuentra tanto la descripción en español como el nombre en inglés y el código. Eso sí, la descripción en español es nuestra: el nombre que se copia a otro sitio es el estándar en inglés.
Contar el resultado (opcional)
¿Pudiste pegarlo y usarlo donde querías?