Referencia de colores del sistema iOS

• Referencia completa de colores del sistema de iOS 18: explora todos los colores del sistema iOS tal como se definen en las Guías de interfaz humana de Apple: 13 colores semánticos del sistema (azul, rojo, verde, naranja, amarillo, rosa, morado, índigo, verde azulado, menta, cian, marrón y gris con 6 variantes de gris), 5 niveles de énfasis de texto/etiqueta, 4 opacidades de relleno, 6 variantes de fondo, 2 estilos de separador y colores de enlace/acento.
• Valores de modo claro y oscuro en paralelo: cada color incluye valores HEX y RGB tanto en modo claro como en modo oscuro. La alternancia claro/oscuro te permite cambiar la visualización al instante para ver cómo se adaptan los colores entre apariencias. Las miniaturas muestran ambas variantes de un vistazo para compararlas fácilmente.
• Búsqueda y filtro por categoría: encuentra rápidamente cualquier color del sistema iOS buscando por nombre, valor HEX o categoría. Filtra por 6 categorías: colores del sistema, texto y etiquetas, colores de relleno, colores de fondo, colores de separador y colores de enlace y acento. Copia HEX o RGB con un clic.
• Copia de HEX y RGB con un clic: cada tarjeta de color incluye botones Copiar tanto para los valores HEX como RGB. El valor copiado coincide con el modo de tema seleccionado (claro u oscuro), así siempre obtienes el valor correcto para tu contexto de diseño.

Los colores del sistema iOS son un conjunto de colores semánticos predefinidos en las Guías de interfaz humana (HIG) de Apple. Proporcionan un lenguaje visual coherente en todas las apps de iOS y están diseñados para funcionar sin problemas tanto en modo claro como oscuro. En lugar de usar valores de color arbitrarios para los elementos de la interfaz, Apple recomienda usar colores del sistema: se adaptan automáticamente a los ajustes de accesibilidad del usuario (como Aumentar contraste y Reducir transparencia) y garantizan un aspecto y una sensación nativos.

Los colores del sistema iOS se organizan en varios grupos funcionales, cada uno con un propósito concreto en la jerarquía de la interfaz:

• Colores del sistema: 13 colores semánticos (rojo, naranja, amarillo, verde, menta, verde azulado, cian, azul, índigo, morado, rosa, marrón y gris) más 6 variantes de escala de grises. Se usan para significados semánticos concretos: rojo para acciones destructivas, verde para éxito y azul para acciones principales.
• Colores de etiqueta: colores de etiqueta primario, secundario, terciario y cuaternario que establecen una jerarquía de texto clara. La etiqueta primaria es casi negro/blanco para los encabezados, mientras que la terciaria y la cuaternaria son progresivamente más transparentes para contenido de menor énfasis.
• Colores de relleno: cuatro colores de relleno con distintas opacidades (de relleno del sistema a relleno cuaternario) para diferentes grosores de elementos de la interfaz. Los rellenos más claros se usan para elementos finos como las pistas de los deslizadores; los más intensos, para grandes áreas de fondo.
• Colores de fondo: colores de fondo de sistema y agrupados con variantes primaria, secundaria y terciaria. Crean jerarquía visual mediante la profundidad de las superficies.

Cada color del sistema iOS tiene valores distintos para modo claro y oscuro. El sistema cambia automáticamente entre esos valores según el ajuste de apariencia del usuario o el entorno de luz actual. Por ejemplo, la etiqueta es negro puro (#000000) en modo claro para lograr el máximo contraste sobre fondos blancos, y blanco puro (#ffffff) en modo oscuro para una legibilidad óptima sobre superficies oscuras. Algunos colores, como el gris del sistema (#8e8e93), siguen iguales en ambos modos por coherencia. Nuestra herramienta de referencia te permite alternar entre modo claro y oscuro para ver cómo se adapta cada color.

Apple diseña todos los colores del sistema del HIG para cumplir los requisitos de contraste WCAG 2.1 AA cuando se usan según las directrices. El sistema de opacidad de etiquetas en cuatro niveles (primario → cuaternario) garantiza que el texto más importante tenga mayor contraste. Los colores del sistema también funcionan con funciones de accesibilidad como Aumentar contraste (que ajusta los valores de los colores del sistema para lograr una diferenciación aún mayor) y Reducir transparencia (que afecta a cómo se representan los colores de relleno y de separador). Al crear apps de iOS, da siempre preferencia a los colores del sistema con significado semántico (como UIColor.systemRed para acciones destructivas) frente a valores de color arbitrarios: garantizan que tu app se adapte correctamente a todos los ajustes de accesibilidad y a futuras actualizaciones de iOS.