Conversor de color y comprobador de contraste para UI de juegos (HEX, RGB, HSL, Unity, Godot)
Pega un color, cópialo en el formato que quiere tu motor y comprueba si el texto de tu HUD o menú es legible sobre su fondo.
- HEX
#e5530a - RGB
229, 83, 10 - HSL
20, 92%, 47% - Unity Color
new Color(0.898f, 0.325f, 0.039f) - Godot Color
Color(0.898, 0.325, 0.039)
Comprobar contraste
3.34 : 1
- Texto normal (4.5): no cumple
- Texto grande (3): cumple
- Elementos de UI (3): cumple
La razón de contraste sigue la fórmula de WCAG. Úsala para menús, subtítulos y texto del HUD.
Cuándo usarla
HUD y subtítulos
Comprueba que números de vida, avisos y subtítulos sigan legibles sobre cielos claros y pasillos oscuros.
Pasar colores entre herramientas
Copia un color de Figma o Aseprite en hex y pégalo en Unity (0 a 1) o Godot sin adivinar.
Menús accesibles
Asegúrate de que el botón seleccionado destaque sobre los demás, no solo por el color, también por el contraste.
Ve más allá
EDICIÓN GRATISGame Dev Guides Bundle: 6 libros en PDF para devs indie
Guía en PDF · 12 páginas
EDICIÓN GRATISSmall Town Buildings: kit de pueblo low poly PSX
EDICIÓN GRATIS10 Game Systems para Unity: puertas, inventario, guardado, tienda y RPG
Unity 6 · URP · código C# + demo
Preguntas frecuentes
WCAG pide 4,5 a 1 para texto normal y 3 a 1 para texto grande y elementos de UI. Los juegos no están obligados, pero los jugadores con baja visión lo agradecen.
Los colores de Unity usan canales de coma flotante de 0 a 1, así que 255 pasa a ser 1,0.
Añade un contorno, una sombra o una caja oscura semitransparente detrás. Los subtítulos de muchos juegos usan una caja justo por eso.
Evita distinguir cosas solo con rojo frente a verde, porque el daltonismo rojo-verde es el tipo más común. Añade una forma, un icono o una diferencia de brillo.