Qué hace
- Nueve tonos de un color, de claro a oscuro, y uno de ellos está roto
- La falla se achica en cada nivel y, desde el nivel 4, trata del croma o el matiz y no solo de la luminosidad
- Tres vidas, 15 segundos por nivel, o modo relajado sin reloj
- Después de cada respuesta, el tono roto junto a lo que debía ser, con sus valores
Preguntas frecuentes
¿Qué es una rampa de color?
Una fila de tonos de un mismo color de claro a oscuro, como los pasos 50 a 900 de la paleta de un sistema de diseño. Cada paso tiene un trabajo: fondos, bordes, texto, estados al pasar el cursor.
¿Cómo hago una rampa de color que se vea pareja?
Cambia la luminosidad lo mismo en cada paso, idealmente en un espacio perceptual como OKLCH, y deja que el croma suba y baje con suavidad. Pasos iguales de luminosidad en HSL no se ven iguales.
¿Por qué un tono de mi paleta se ve mal?
Casi siempre es una de tres cosas: su luminosidad se sale del ritmo, su croma es muy alto o muy bajo para sus vecinos, o su matiz se desvió. Compáralo con los tonos de ambos lados.
📖 Rampas de color: cómo crear una escala de tonos pareja
Más herramientas gratuitas
- Generador de paletas - Elige un tono y una armonía y obtén una paleta accesible completa con verificación de contraste AA/AAA en vivo.
- Verificador de contraste - Pega dos colores, mira el ratio WCAG y corrige una combinación que falla con un clic.
- Imagen → Paleta - Sube una imagen, extrae sus colores dominantes y descubre qué combinaciones se pueden usar juntas.
- Simulador de daltonismo - Mira una paleta con protanopia, deuteranopia, tritanopia y acromatopsia, y detecta los colores que se confunden.
- Generador de escala tipográfica - Elige un tamaño base y una proporción y obtén una escala tipográfica completa con vista previa, clamp() fluido y tokens.
- Generador de degradados - Degradados lineales, radiales, cónicos o de malla: arrastra los puntos, mezcla colores y copia el CSS.
- Explorador de estados de componentes - Botones, campos y tarjetas en todos sus estados (hover, foco, presionado, deshabilitado, error) con verificación de contraste.
- Convertidor de design tokens - Pega tokens W3C, Tokens Studio o Variables de Figma y obtén CSS, SCSS, Tailwind v4 o SwiftUI, con alias incluidos.
- Laboratorio de movimiento - Arrastra curvas cubic-bezier, ajusta un resorte real, míralos competir y exporta tokens de movimiento.
- Recorte automático - Suelta tus PNG y recupéralos sin los bordes transparentes vacíos, en lote, en tu navegador y en un solo ZIP.
- Prueba de expansión de texto - Mira cómo se rompe una interfaz en alemán, español o pseudotraducción, y qué CSS la hace resistir la traducción.
- Mini auditoría de accesibilidad - Pega HTML y encuentra textos alternativos y etiquetas que faltan, botones sin nombre, saltos de títulos, objetivos táctiles pequeños y bajo contraste.
- Vista previa multiformato - Un mensaje en tamaños de redes sociales y anuncios display, con zonas seguras y punto focal arrastrable. Exporta cada PNG.
- Vista previa móvil - Abre cualquier sitio web dentro de marcos de iPhone, Pixel, Galaxy y iPad a su tamaño real. Gíralo o compara cuatro dispositivos a la vez.
- Caza de color - Iguala cinco colores a ojo con tono, saturación y luminosidad. Puntaje por distancia perceptual y un reto diario para compartir.
- Pasa o falla - Veinte rondas rápidas: ¿este texto pasa el contraste WCAG AA? Confía en tu ojo y luego mira las proporciones reales.
- Ojo óptico - Corrige siete detalles de layout a ojo: centra un ícono de play, iguala padding y ajusta un círculo frente a un cuadrado. Algunas respuestas son ópticas, no matemáticas.
- Pánico de estados - Los componentes caen con algo pasándoles. Elige hover, focus, presionado, cargando, error o deshabilitado antes de que toquen el piso.
- Golf de curvas - Minigolf con curvas de animación: dale forma a un cubic-bezier para que el disco pase cada bandera a tiempo y tira. El par es tres.
- Supervivencia de contraste - El fondo no deja de cambiar. Ajusta la luminosidad del texto para que pase WCAG AA, luego AAA, el mayor tiempo posible.
- Carrera de tokens - Reemplaza valores fijos con los design tokens correctos, rápido. Mismo valor no es el mismo token. Luego cambia el tema y mira qué se rompe.
- Ajusta el kerning - Espacia seis palabras a ojo. Cada una tiene un par de letras muy junto o muy separado; la respuesta es el kerning del diseñador de la fuente.
- Orden del Tab - Toca los botones, enlaces y campos de una pantalla en el orden en que debería recorrerlos la tecla Tab. Cinco pantallas, una regla de WCAG.
- Ajusta a la grilla - Cinco componentes con el espaciado desviado de la escala. Ajusta cada relleno y espacio a su paso de 4 y 8 px antes de que se acabe el tiempo.
- Lee la tipografía - Una muestra esconde su peso, tamaño o interlineado. Mueve la tuya hasta igualarla, seis rondas, con el valor real después de cada una.
- Radio concéntrico - Una caja redondeada dentro de otra. Mueve el radio interior hasta que el espacio sea parejo. La regla: radio exterior menos relleno.
- Nombra el componente - ¿Tooltip o popover? ¿Pestañas o control segmentado? Nombra diez componentes de interfaz a partir de un dibujo.
- Área táctil - Botones, enlaces e íconos dibujados con su tamaño táctil real. Marca los que no llegan a 24, 44 o 48 px.