Quiz de códigos de color
Elige el sentido del ejercicio, el formato y la dificultad. Responde entre cuatro opciones para ver al instante el código correcto y los canales RGB.
¿Cómo quieres practicar?
Sentido del ejercicio
Formato del código
Dificultad Diferencia entre opciones
10 preguntas · Sin límite de tiempo · Explicación inmediata
Tarjeta de pregunta
¿Cuál es el código de este color?
También puedes responder con las teclas del 1 al 4.
Opciones Elige una
Código correcto
Resultados de esta partida
Los puntos siguen las reglas del juego; no evalúan la visión del color.
Datos de este navegador
- Partidas
- 0
- Aciertos acumulados
- 0
- Récord de puntos
- 0
- Mejor racha
- 0
Repasar errores
Este quiz sirve para aprender códigos de color CSS. No es una prueba ni un diagnóstico de visión del color.
sin rodeos.
- Todo a la vistaLa zona de entrada y los resultados se reconocen rápido.
- Resultado primeroEl número principal va delante; el detalle queda debajo.
- Menos requisitosSin registro ni datos innecesarios antes de usar la herramienta.
Cómo leer códigos de color y resolver el quiz
Este quiz relaciona los colores en pantalla con valores HEX y RGB. Puedes elegir un código para una muestra o una muestra para un código. Al responder, verás la solución y los canales rojo, verde y azul.
Sirve para practicar la lectura de valores CSS en diseño web. Son 10 preguntas sin límite de tiempo. Los puntos no indican ni diagnostican cómo percibes el color.
¿Qué se practica en este quiz de códigos de color?
Relacionas un color en pantalla con su valor CSS en HEX o RGB. Estos códigos aparecen al definir botones, fondos y bordes de una web. Puedes pasar de una muestra al código o del código a la muestra, y comparar lo que ves con los números.
- Del color al código: deduce los valores a partir de la muestra.
- Del código al color: imagina la muestra a partir de los números.
- Ambos sentidos ofrecen cuatro opciones y explican los canales al responder.
¿Cómo se completan las 10 preguntas?
Elige el sentido, el formato HEX, RGB o mixto y la dificultad. Responde una de las cuatro opciones, lee la explicación y pasa a la pregunta siguiente. No hay límite de tiempo; en el teclado también puedes usar las teclas 1–4.
- Para empezar, prueba del color al código, HEX y Fácil.
- Solo puedes responder una vez por pregunta: volver a pulsar no cambia los puntos.
- Al terminar verás puntos, porcentaje de aciertos y preguntas falladas.
¿Cómo se lee un código HEX?
Un HEX de seis dígitos empieza con # y lleva dos dígitos para rojo (R), verde (G) y azul (B). Cada pareja va de 00 a FF en base 16, equivalente a 0–255 en decimal. En #FF6600, FF equivale a rojo 255, 66 a verde 102 y 00 a azul 0: un tono anaranjado.
- #000000 tiene los tres canales a 0: negro.
- #FFFFFF tiene los tres canales a 255: blanco.
- #FF0000 solo tiene el canal rojo a 255.
¿En qué se diferencia RGB de HEX?
RGB expresa los mismos tres canales en números decimales. #FF6600 y rgb(255, 102, 0) representan el mismo color sRGB. En este quiz, cada canal RGB es un entero entre 0 y 255. Ambas notaciones sirven como valores de color CSS.
- HEX: práctico para los códigos de seis dígitos en paletas y diseños.
- RGB: permite comparar cada canal como número.
- Mixto: alterna el formato entre preguntas, pero las cuatro opciones de cada una usan el mismo.
¿Qué se muestra después de responder?
Verás el código correcto y los valores de los tres canales RGB. Las barras permiten comparar su magnitud: en rgb(255, 102, 0), el rojo es el mayor y el azul vale cero. Son una ayuda para leer cifras, no para asignar nombres o efectos psicológicos al color.
- También en preguntas HEX se explica el desglose RGB.
- Al buscar un color a partir de un código, las opciones no revelan sus códigos antes de responder.
- El acierto o error se indica con palabras además del aspecto visual.
¿Qué cambia entre Fácil, Normal y Difícil?
La dificultad ajusta la separación entre el color correcto y las opciones erróneas. Fácil deja diferencias mayores; Difícil presenta colores más cercanos. El brillo de la pantalla, la gestión del color y la luz ambiental afectan a la percepción; el resultado no evalúa la visión del color.
- Fácil: identifica diferencias grandes entre canales.
- Normal: compara valores en colores más parecidos.
- Difícil: observa diferencias pequeñas con una pantalla bien iluminada.
¿Cómo se calculan puntos y rachas?
En Fácil, cada acierto da 10 puntos y cada error 0; en Normal, +20 y −5; en Difícil, +30 y −10. A partir del tercer acierto consecutivo se añaden 5 puntos a cada acierto. Es una regla del juego, no una medida médica o sensorial.
- En Normal, dos aciertos y un error suman 20 + 20 − 5 = 35 puntos.
- En Fácil, tres aciertos seguidos suman 10 + 10 + 15 = 35 puntos.
- El porcentaje es aciertos ÷ 10 × 100: siete aciertos son el 70 %.
¿Cómo repaso las preguntas falladas?
En resultados aparecen la muestra, el código correcto y el código elegido para cada error de esta partida. Puedes repetir con los mismos ajustes o invertir el sentido. Separar HEX en parejas y relacionarlas con los canales RGB ayuda más que memorizar la respuesta.
- Si fallaste del color al código, revisa qué pareja de canales leíste mal.
- Si fallaste del código al color, localiza primero el canal más alto.
- Si acertaste todo, la lista de repaso lo indica.
¿Puede verse distinto el mismo código en otra pantalla?
Sí. El brillo, la gestión del color, el modo nocturno y la luz del entorno pueden alterar el aspecto de un mismo valor sRGB. En Difícil se nota especialmente. La solución se define por el código, no por una valoración universal de cómo percibes el color.
- Si cuesta distinguir los tonos, vuelve a Fácil y consulta las cifras.
- Los estados de respuesta también incluyen texto.
- No sustituyas una prueba de visión del color por este quiz.
¿Para qué sirven estos valores en una web?
Propiedades CSS como color, background-color y border-color usan valores de color. Reconocer #3469D1 en un diseño te ayuda a encontrarlo en el código y a pensar qué canal ajustar. La legibilidad del texto exige comprobar también el contraste por separado.
- Usa un selector para obtener con precisión un color de pantalla.
- Usa un conversor para pasar de HEX a RGB o viceversa.
- Comprueba aparte el contraste entre texto y fondo.
Preguntas frecuentes sobre el quiz de colores
¿Es gratis el quiz de códigos de color?
Sí. Puedes resolver 10 preguntas sin registrarte y cambiar gratis el sentido, el formato HEX/RGB y la dificultad.
¿Por dónde empiezo si no conozco HEX?
Prueba del color al código en Fácil. Separa #FF6600 en tres parejas después de #: rojo FF, verde 66 y azul 00.
¿Cuál es el RGB de #FF6600?
Es rgb(255, 102, 0). FF equivale a 255, 66 a 102 y 00 a 0; ambas notaciones representan el mismo color sRGB.
¿Hasta qué número llega cada canal RGB?
En este quiz, los canales rojo, verde y azul son enteros de 0 a 255. Cero indica ausencia de ese canal y 255 su valor máximo.
¿El modo Mixto mezcla HEX y RGB entre las cuatro opciones?
No. Cada pregunta usa un formato, HEX o RGB, y sus cuatro opciones comparten ese formato para facilitar la comparación.
¿Puedo cambiar mi respuesta después de elegirla?
No. Solo se admite una respuesta por pregunta. Consulta el código correcto y los canales RGB antes de continuar; al final podrás repasar los errores.
¿Cómo se calcula el porcentaje de aciertos?
Divide los aciertos entre 10 y multiplica por 100. Siete aciertos dan el 70 %. Los puntos según la dificultad se calculan aparte.
¿Una puntuación baja indica un problema de visión del color?
No. Es un juego para aprender códigos CSS, no una prueba ni un diagnóstico. Los colores cercanos pueden verse distintos según la pantalla y la luz.
¿Puedo jugar en el móvil?
Sí. En el móvil, las cuatro opciones se sitúan debajo de la tarjeta. Si vas del código al color, elige una muestra y luego consulta el código revelado.
¿Dónde se guardan los resultados anteriores?
El número de partidas terminadas, aciertos, récord y mejor racha solo se guardan en este navegador; puedes borrarlos con «Borrar datos». La lista de errores de esta partida se pierde al recargar.
Fuentes sobre colores y accesibilidad
Estas referencias explican la notación HEX y RGB y por qué el color no debe ser la única señal informativa. Consulta: 2026-09-24.
Usar valores de color en un proyecto
Estas herramientas permiten elegir o convertir los formatos que aparecen en el quiz.