Escribe un color en HEX, RGB o HSL y copia el código listo para SwiftUI, UIKit y AppKit (también Android y Flutter). Debajo, el comprobador de contraste WCAG te dice si el texto es legible sobre su fondo.
Conversor de color
Valores y código listo para copiar
Para usar Color(hex: 0x3366CC) en SwiftUI añade esta extensión una sola vez:
extension Color {
init(hex: UInt32, opacity: Double = 1) {
self.init(
.sRGB,
red: Double((hex >> 16) & 0xFF) / 255,
green: Double((hex >> 8) & 0xFF) / 255,
blue: Double(hex & 0xFF) / 255,
opacity: opacity
)
}
}
Comprobador de contraste WCAG
🔒 Todo se calcula en tu navegador. No se envía ningún dato a ningún servidor.
Cómo usar un HEX en SwiftUI
SwiftUI no trae un inicializador con HEX. Pega la extensión que ofrece la herramienta una sola vez y luego usa Color(hex: 0x3366CC). Los valores se interpretan en espacio sRGB.
Qué significa el contraste WCAG
La relación de contraste va de 1:1 (sin contraste) a 21:1 (negro sobre blanco). Los umbrales de WCAG 2.x son:
- AA texto normal: 4,5:1
- AA texto grande: 3:1 (a partir de unos 24 px, o 19 px en negrita)
- AAA texto normal: 7:1
- AAA texto grande: 4,5:1
- Componentes de interfaz y gráficos: 3:1
Preguntas frecuentes
¿UIColor y Color usan el mismo espacio de color?
Aquí se generan en sRGB. En pantallas P3 el aspecto puede variar ligeramente si defines colores en Display P3.
¿Para qué sirve el canal alfa?
Para la opacidad. La herramienta lo incluye en el HEX (#RRGGBBAA), en rgba() y en el código Swift.
¿Y en modo oscuro?
Usa Asset Catalog con variantes Any/Dark y comprueba el contraste de cada variante con esta herramienta.
¿Se envían mis colores a un servidor?
No, todo se calcula en el navegador.