Skip to main content
FreeToolkit .ai

Colores del sistema iOS y Android Explora los colores del sistema para la interfaz de usuario de iOS y el diseño de Material Design de Android.

Colores del sistema iOS y Android illustration
🎨

Colores del sistema iOS y Android

Explora los colores del sistema para la interfaz de usuario de iOS y el diseño de Material Design de Android.

1

Seleccionar plataforma

Seleccione iOS (Interfaz de usuario) o Android (Material 3).

2

Alternar apariencia

Para iOS, cambie entre colores de modo claro y oscuro.

3

Copiar colores

Copie el código HEX de cualquier color del sistema.

Loading tool...

What Is Colores del sistema iOS y Android?

Esta herramienta proporciona una referencia completa para los colores del sistema iOS y Android: los colores predefinidos que Apple y Google recomiendan para crear aplicaciones nativas. Los colores del sistema iOS siguen las Pautas de interfaz humana de Apple (HIG) e incluyen colores con nombres semánticos como systemBlue, systemRed y variantes de systemGray, cada uno con valores separados para los modos luz y oscuro. Los colores de Android siguen los tokens de diseño Material Design 3 (Material You), que incluyen colores primarios, secundarios, terciarios, de error y de superficie. Al utilizar los colores del sistema de la plataforma, se garantiza que su aplicación tenga un aspecto nativo, se adapte a los modos de apariencia (luz/oscuro) y mantenga los estándares de accesibilidad establecidos por cada plataforma. Esta referencia evita que los desarrolladores tengan que buscar en la documentación y asegura que utilicen los valores de color exactos especificados por Apple y Google.

Why Use Colores del sistema iOS y Android?

  • Colores del sistema iOS completos con variantes de modos claro y oscuro
  • Tokens de diseño Material 3 para desarrollo de Android
  • Colores oficiales de la plataforma para una apariencia y sensación nativas en las aplicaciones
  • Alternar entre modo claro y oscuro (iOS)
  • Copia de un solo clic para cada color

Common Use Cases

Desarrollo de iOS

Haga referencia a los valores exactos de colores del sistema para el desarrollo con Swift/SwiftUI.

Desarrollo de Android

Encuentre valores de tokens de color Material 3 para Kotlin/Jetpack Compose.

Diseño multiplataforma

Compare los colores del sistema iOS y Android al diseñar aplicaciones multiplataforma.

Bibliotecas de Figma/Sketch

Configure bibliotecas de herramientas de diseño con colores del sistema de plataforma precisos.

Technical Guide

Los colores del sistema iOS son colores semánticos que se adaptan automáticamente entre las apariencias claras y oscuras. Por ejemplo, systemBlue es #007AFF en modo luz y #0A84FF en modo oscuro: ligeramente más brillante para mantener la prominencia visual contra fondos oscuros. Los valores de color están definidos en los marcos UIKit (UIColor) y SwiftUI (Color) de Apple. Android Material 3 utiliza un sistema basado en tokens: Primary, Secondary, Tertiary para colores clave, Surface y Background para contenedores, y variantes On-* para contenido en esas superficies. Los tokens de Material 3 están diseñados para funcionar con la generación dinámica de color desde fondos de pantalla del usuario a través del sistema Material You. Ambas plataformas eligen colores ligeramente diferentes para el modo oscuro para optimizar el brillo percibido y el contraste contra sus respectivos colores de fondo oscuros.

Tips & Best Practices

  • 1
    Los colores del sistema iOS se adaptan automáticamente en el código - use UIColor.systemBlue en lugar de valores HEX codificados
  • 2
    Los tokens Material 3 de Android deben usarse a través de MaterialTheme en Jetpack Compose
  • 3
    Los colores del modo oscuro son ligeramente más brillantes que los del modo claro para mantener el peso visual en fondos oscuros
  • 4
    Use nombres semánticos (colores del sistema) en lugar de valores codificados para admitir automáticamente el modo oscuro
  • 5
    iOS tiene seis niveles de gris (systemGray a systemGray6) para diferentes niveles de jerarquía

Related Tools

Convertidor de HEX a RGB - free online tool

Convertidor de HEX a RGB

Convierta códigos de color HEX a valores RGB al instante con una vista previa en vivo.

🎨 Color Tools
Selector de colores - free online tool

Selector de colores

Selector de colores interactivo con salidas HEX, RGB, HSL y CMYK.

🎨 Color Tools
Comprobador de Relación de Contraste - free online tool

Comprobador de Relación de Contraste

Verifica las relaciones de contraste WCAG entre colores de primer plano y fondo.

🎨 Color Tools
Paletas de colores de marca - free online tool

Paletas de colores de marca

Explora las paletas de colores oficiales de más de 50 marcas y empresas tecnológicas populares.

🎨 Color Tools
Colores de Material Design - free online tool

Colores de Material Design

Explora la paleta de colores completa de Material Design con todos los matices y acentos.

🎨 Color Tools

Frequently Asked Questions

Q ¿Por qué los colores del modo oscuro son diferentes a los del modo claro?
Los colores del modo oscuro se ajustan para mantener el peso visual y la legibilidad en fondos oscuros. Simplemente invertir los colores del modo claro no produce resultados buenos porque la percepción humana de la brillantez es no lineal.
Q ¿Debo usar estos valores HEX exactos en código nativo?
Prefiera usar las API de plataforma (UIColor.systemBlue, MaterialTheme.colorScheme.primary) ya que manejan los cambios de apariencia automáticamente. Use estos valores HEX para herramientas de diseño y referencia.
Q ¿Coinciden con las últimas versiones del SO?
Estos representan los colores estándar de la plataforma. Apple y Google ocasionalmente ajustan los valores en nuevas versiones del SO. Siempre verifique contra la documentación más reciente del SDK para aplicaciones de producción.

About This Tool

Colores del sistema iOS y Android is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.