Referência de cores do sistema iOS

• Referência completa das cores do sistema do iOS 18: navegue por todas as cores do sistema iOS conforme definidas nas Diretrizes de Interface Humana da Apple - 13 cores semânticas do sistema (azul, vermelho, verde, laranja, amarelo, rosa, roxo, índigo, verde-azulado, menta, ciano, marrom e cinza com 6 variantes de cinza), 5 níveis de ênfase de texto/rótulo, 4 opacidades de preenchimento, 6 variantes de fundo, 2 estilos de separador e cores de link/tinta.
• Valores de modo claro e escuro lado a lado: cada cor inclui valores HEX e RGB tanto no modo claro quanto no escuro. A alternância claro/escuro permite mudar a exibição na hora para ver como as cores se adaptam entre as aparências. Mini amostras mostram as duas variantes de relance para facilitar a comparação.
• Pesquisa e filtro por categoria: encontre rapidamente qualquer cor do sistema iOS pesquisando por nome, valor HEX ou categoria. Filtre por 6 categorias - cores do sistema, texto e rótulos, cores de preenchimento, cores de fundo, cores de separador e cores de link e tinta. Copie HEX ou RGB com um clique.
• Cópia de HEX e RGB em um clique: cada cartão de cor inclui botões Copiar tanto para os valores HEX quanto RGB. O valor copiado corresponde ao modo de tema selecionado no momento (claro ou escuro), então você sempre obtém o valor correto para o seu contexto de design.

As cores do sistema iOS são um conjunto de cores semânticas predefinidas nas Diretrizes de Interface Humana (HIG) da Apple. Elas fornecem uma linguagem visual consistente em todos os apps iOS e são projetadas para funcionar perfeitamente tanto no modo claro quanto no escuro. Em vez de usar valores de cor arbitrários para elementos de interface, a Apple recomenda usar as cores do sistema - elas se adaptam automaticamente às configurações de acessibilidade do usuário (como Aumentar Contraste e Reduzir Transparência) e garantem aparência e sensação nativas.

As cores do sistema iOS são organizadas em vários grupos funcionais, cada um com um papel específico na hierarquia da interface:

• Cores do sistema - 13 cores semânticas (vermelho, laranja, amarelo, verde, menta, verde-azulado, ciano, azul, índigo, roxo, rosa, marrom, cinza) mais 6 variantes de escala de cinza. São usadas para significados semânticos específicos - vermelho para ações destrutivas, verde para sucesso, azul para ações primárias.
• Cores de rótulo - cores de rótulo primária, secundária, terciária e quaternária que estabelecem uma hierarquia clara de texto. O rótulo primário é quase preto/branco para títulos, enquanto terciário e quaternário são progressivamente mais transparentes para conteúdo de menor ênfase.
• Cores de preenchimento - quatro cores de preenchimento com opacidades variadas (de preenchimento do sistema a quaternário) para diferentes espessuras de elementos de interface. Preenchimentos mais claros são usados em elementos finos como trilhas de controle deslizante; os mais densos, em grandes áreas de fundo.
• Cores de fundo - cores de fundo de sistema e agrupadas com variantes primária, secundária e terciária. Elas criam hierarquia visual por meio da profundidade das superfícies.

Cada cor do sistema iOS tem valores distintos no modo claro e no modo escuro. O sistema alterna automaticamente entre esses valores com base na configuração de aparência do usuário ou no ambiente de luz atual. Por exemplo, o rótulo é preto puro (#000000) no modo claro para contraste máximo sobre fundos brancos, e branco puro (#ffffff) no modo escuro para legibilidade ideal sobre superfícies escuras. Algumas cores, como o cinza do sistema (#8e8e93), permanecem iguais nos dois modos por consistência. Nossa ferramenta de referência permite alternar entre modo claro e escuro para ver como cada cor se adapta.

A Apple projeta todas as cores do sistema do HIG para atender aos requisitos de contraste da WCAG 2.1 AA quando usadas conforme as diretrizes. O sistema de opacidade de rótulos em quatro níveis (primário → quaternário) garante que o texto mais importante tenha maior contraste. As cores do sistema também funcionam com recursos de acessibilidade como Aumentar Contraste (que ajusta os valores das cores do sistema para diferenciação ainda maior) e Reduzir Transparência (que afeta como as cores de preenchimento e separador são renderizadas). Ao criar apps iOS, prefira sempre cores do sistema com significado semântico (como UIColor.systemRed para ações destrutivas) em vez de valores de cor arbitrários - elas garantem que seu app se adapte corretamente a todas as configurações de acessibilidade e a futuras atualizações do iOS.