#ff453a
System Red
📱ios · system
Vibrant red used for destructive actions, delete buttons, and error states.
Apple HIG Color Reference
Browse all 104 Apple HIG system colors across all 5 platforms. Each color includes light and dark mode values with one-click copy.
Showing 104 of 104 Apple HIG colors(iOS: 36 · macOS: 26 · watchOS: 14 · tvOS: 13 · visionOS: 15)
Apple HIG · Updated for 2025
#ff9f0a
System Orange
📱ios · system
Warm orange used for medium-importance alerts and food/delivery app accents.
#ffd60a
System Yellow
📱ios · system
Bright yellow used for caution states, warnings, and attention-grabbing badges.
#30d158
System Green
📱ios · system
Fresh green used for success states, confirmed actions, and positive indicators.
#64d2ff
System Teal
📱ios · system
Blue-green used for informational elements, health/fitness app accents.
#66d4cf
System Mint
📱ios · system
Soft mint green used for wellness, finance apps, and subtle accents.
#64d2ff
System Cyan
📱ios · system
Bright cyan for tech-forward apps, media controls, and vibrant accents.
#0a84ff
System Blue
📱ios · system
Primary action blue used for links, selected states, and navigation controls.
#5e5ce6
System Indigo
📱ios · system
Deep purple-blue for creative apps, premium features, and distinctive accents.
#bf5af2
System Purple
📱ios · system
Rich purple used for entertainment apps, creative tools, and feature highlights.
#ff375f
System Pink
📱ios · system
Bright pink for social apps, lifestyle branding, and feminine accents.
#8e8e93
System Gray
📱ios · system
Neutral gray for secondary text, disabled states, and subtle UI elements.
#636366
System Gray 02
📱ios · system
Medium-light gray for tertiary content and inactive elements.
#48484a
System Gray 03
📱ios · system
Subtle gray for borders, dividers, and low-priority content.
#3a3a3c
System Gray 04
📱ios · system
Very light gray for subtle separators and background tints.
#2c2c2e
System Gray 05
📱ios · system
Ultra-light gray for the faintest separators and background differentiation.
#1c1c1e
System Gray 06
📱ios · system
Near-white gray for subtle section backgrounds in grouped views.
#ffffff
Label
📱ios · label
Primary text color for content and headings.
#ebebf599
Secondary Label
📱ios · label
Secondary text color for subtitles and supporting information.
#ebebf54c
Tertiary Label
📱ios · label
Tertiary text color for placeholder content and metadata.
#ebebf52d
Quaternary Label
📱ios · label
Lowest-emphasis text color for disabled labels and read-only content.
#ebebf54c
Placeholder Text
📱ios · label
Text field placeholder color for empty input hints.
#78788052
System Fill
📱ios · fill
Primary fill for thin UI elements like slider tracks and progress bars.
#78788047
Secondary Fill
📱ios · fill
Fill for medium-thickness elements like button backgrounds.
#7676803d
Tertiary Fill
📱ios · fill
Fill for thick elements like search bar backgrounds.
#7474802e
Quaternary Fill
📱ios · fill
Fill for large background area fills like table view backgrounds.
#000000
System Background
📱ios · background
Primary view background color for plain content views.
#1c1c1e
Secondary System Background
📱ios · background
Background for grouped content cells and secondary views.
#2c2c2e
Tertiary System Background
📱ios · background
Background for grouped table views and tertiary content areas.
#000000
Grouped Background
📱ios · background
Background for grouped table views and form sheets.
#1c1c1e
Secondary Grouped Background
📱ios · background
Secondary grouped background for cells in grouped tables.
#2c2c2e
Tertiary Grouped Background
📱ios · background
Tertiary grouped background for nested grouped content.
#545458
Separator
📱ios · separator
Default separator line for table rows and list dividers.
#38383a
Opaque Separator
📱ios · separator
Opaque separator for non-translucent views and dark backgrounds.
#0a84ff
Tint Color (Accent)
📱ios · link
App accent/tint color for interactive elements, toggle buttons, and controls.
#0a84ff
Link Color
📱ios · link
Default link color for tappable text links and hyperlinks.
#ff453a
System Red
💻macos · system
Red for destructive buttons, alerts, and stop indicators.
#ff9f0a
System Orange
💻macos · system
Orange for medium-importance warnings and accent elements.
#ffd60a
System Yellow
💻macos · system
Yellow for caution states and attention badges.
#30d158
System Green
💻macos · system
Green for success states and positive confirmations.
#64d2ff
System Teal
💻macos · system
Teal for informational elements and secondary accents.
#0a84ff
System Blue
💻macos · system
Blue for primary actions, selected items, and links.
#bf5af2
System Purple
💻macos · system
Purple for creative tools and feature highlights.
#ff375f
System Pink
💻macos · system
Pink for social and lifestyle app accents.
#98989d
System Gray
💻macos · system
Neutral gray for disabled states and secondary content.
#ffffff
Label
💻macos · label
Primary text color for content and headings.
#ebebf599
Secondary Label
💻macos · label
Secondary text for subtitles and supporting content.
#ebebf54c
Tertiary Label
💻macos · label
Tertiary text for placeholder and metadata.
#ebebf52d
Quaternary Label
💻macos · label
Lowest emphasis text for read-only and disabled labels.
#78788052
System Fill
💻macos · fill
Primary fill for thin UI elements.
#78788047
Secondary Fill
💻macos · fill
Fill for medium-thickness UI elements.
#7676803d
Tertiary Fill
💻macos · fill
Fill for thick UI element backgrounds.
#7474802e
Quaternary Fill
💻macos · fill
Fill for large background areas.
#000000
System Background
💻macos · background
Primary window background color.
#1c1c1e
Secondary Background
💻macos · background
Background for secondary content areas.
#2c2c2e
Tertiary Background
💻macos · background
Background for tertiary content areas.
#1e1e1e
Control Background
💻macos · background
Background for text fields and form controls.
#ffffff05
Scrollbar Track
💻macos · background
Background color for scrollbar tracks.
#545458
Separator
💻macos · separator
Default separator for table rows and list dividers.
#38383a
Opaque Separator
💻macos · separator
Opaque separator for non-translucent views.
#0a84ff
Control Accent
💻macos · link
System accent color for control tinting.
#0a84ff
Keyboard Focus
💻macos · link
Focus ring color for keyboard navigation.
#ff453a
System Red
⌚watchos · system
Red for destructive actions and error alerts.
#ff9f0a
System Orange
⌚watchos · system
Orange for medium warnings and fitness app accents.
#ffd60a
System Yellow
⌚watchos · system
Yellow for caution states and achievement badges.
#30d158
System Green
⌚watchos · system
Green for workout completions and success states.
#64d2ff
System Teal
⌚watchos · system
Teal for health metrics and informational accents.
#0a84ff
System Blue
⌚watchos · system
Blue for primary actions, activity rings, and connectivity.
#bf5af2
System Purple
⌚watchos · system
Purple for mindfulness features and creative accents.
#ff375f
System Pink
⌚watchos · system
Pink for wellness and heart rate related indicators.
#ffffff
Label
⌚watchos · label
Primary text on watchOS display.
#ebebf599
Secondary Label
⌚watchos · label
Secondary text for subtitles on watch.
#ebebf54c
Tertiary Label
⌚watchos · label
Tertiary text for metadata on watch.
#000000
System Background
⌚watchos · background
Primary watch face background.
#1c1c1e
Secondary Background
⌚watchos · background
Secondary content card backgrounds.
#0a84ff
Link Color
⌚watchos · link
Tint color for tappable elements on watchOS.
#ff453a
System Red
📺tvos · system
Red for destructive actions and error states on TV.
#ff9f0a
System Orange
📺tvos · system
Orange for medium-importance elements on TV.
#ffd60a
System Yellow
📺tvos · system
Yellow for caution states on TV interface.
#30d158
System Green
📺tvos · system
Green for success states and confirmations on TV.
#0a84ff
System Blue
📺tvos · system
Blue for focused items and primary actions on TV (focused state uses white/light overlay).
#bf5af2
System Purple
📺tvos · system
Purple for entertainment app accents on TV.
#ff375f
System Pink
📺tvos · system
Pink for media-focused accents on TV.
#ffffff
Label
📺tvos · label
Primary text color for TV interface.
#ebebf599
Secondary Label
📺tvos · label
Secondary text for subtitles on TV.
#000000
System Background
📺tvos · background
Primary background for TV content views.
#1c1c1e
Secondary Background
📺tvos · background
Secondary card backgrounds on TV.
#ffffff
Focus Color
📺tvos · link
Highlight color for focused items on tvOS (parallax/lighting effect).
#0a84ff
Link Color
📺tvos · link
Tint color for interactive elements on TV.
#ff453a
System Red
🥽visionos · system
Red for destructive actions in spatial computing.
#ff9f0a
System Orange
🥽visionos · system
Orange for medium-importance spatial UI elements.
#ffd60a
System Yellow
🥽visionos · system
Yellow for caution states in spatial apps.
#30d158
System Green
🥽visionos · system
Green for success states in spatial computing.
#0a84ff
System Blue
🥽visionos · system
Blue for primary actions and spatial UI controls.
#bf5af2
System Purple
🥽visionos · system
Purple for creative spatial app accents.
#ff375f
System Pink
🥽visionos · system
Pink for social and lifestyle spatial UI accents.
#ffffff
Label
🥽visionos · label
Primary text in spatial computing environment.
#ebebf599
Secondary Label
🥽visionos · label
Secondary text for spatial UI subtitles.
#ebebf54c
Tertiary Label
🥽visionos · label
Tertiary text for spatial UI metadata.
#000000
System Background
🥽visionos · background
Primary background for windows and views in spatial computing.
#1c1c1e
Secondary Background
🥽visionos · background
Secondary content area background for spatial UI.
#ffffff0d
Glass Background
🥽visionos · background
Translucent glass material background for visionOS windows.
#0a84ff
Link Color
🥽visionos · link
Tint color for interactive elements in spatial computing.
#0a84ff
Tint Color
🥽visionos · link
App tint/accent color for visionOS UI controls.
Функции
- Мгновенный справочник: мгновенно просматривайте все цвета системы Apple в iOS, macOS, watchOS, tvOS и VisionOS. Никаких запросов к серверу не требуется — все работает в вашем браузере.
- Значения светлого и темного режима: каждый цвет включает шестнадцатеричные значения как светлого, так и темного режима, как определено в Apple HIG. Переключайтесь между режимами, чтобы увидеть, как цвета адаптируются к каждому внешнему виду.
- Конфиденциальность прежде всего и в автономном режиме: все данные о цвете объединены на странице — никакие внешние вызовы API, никакое отслеживание, никакие данные не покидают ваш браузер. Работает полностью в автономном режиме после первой загрузки.
- Всегда бесплатно: без регистрации, без подписки, без скрытых ограничений. Этот эталон цветов Apple HIG всегда будет бесплатным для всех разработчиков и дизайнеров.
Варианты использования
- Разработка приложений для iOS и iPadOS: быстро находите правильные системные цвета для элементов пользовательского интерфейса приложения iOS — от панелей навигации и вкладок до оповещений и представлений активности — гарантируя, что ваше приложение соответствует рекомендациям Apple HIG.
- Миграция токенов дизайна. При переносе систем дизайна на платформы Apple используйте эту ссылку, чтобы сопоставить свои пользовательские цветовые токены с системными цветами Apple HIG с точными значениями светлого и темного режима.
- Аудит системы дизайна. Проверьте свою систему дизайна Figma или Sketch на соответствие официальным цветам HIG Apple. Убедитесь, что в вашей библиотеке компонентов используются правильные системные цвета для меток, заливок и фона.
- Разработка приложений для macOS: убедитесь, что в ваших приложениях Mac используются правильные системные цвета для окон, панелей и элементов управления. Перекрестные ссылки цветов между macOS и iOS для универсальной совместимости приложений.
- Межплатформенный дизайн: создавайте единообразные возможности для iPhone, iPad, Mac, Apple Watch, Apple TV и Apple Vision Pro, используя точные значения цвета HIG для каждой платформы.
- Обучение веб-дизайну и веб-дизайну: изучите цветовую систему Apple, изучая, как семантические цвета (красный, синий, зеленый, серый и т. д.) определяются на разных платформах с помощью специальных адаптаций светлого и темного режима.
Часто задаваемые вопросы
Системные цвета Apple HIG — это набор предопределенных семантических цветов, определенных в рекомендациях Apple по пользовательскому интерфейсу. К ним относятся системные цвета (красный, синий, зеленый, оранжевый и т. д.), цвета текста/меток, цвета заливки, цвета фона, цвета разделителей и цвета ссылок. Эти цвета предназначены для работы на всех платформах Apple и автоматически адаптируются между светлым и темным режимом.
В SwiftUI используйте цвета, такие как «Color.red», «Color.blue», или семантические цвета, такие как «Color(.label)», «Color(.systemBackground)». В UIKit/AppKit используйте UIColor.systemRed, UIColor.label, UIColor.systemBackground. Для кроссплатформенной совместимости используйте Color(.systemRed) который автоматически адаптируется к текущей платформе и режиму внешнего вида.
Apple настраивает системные значения цвета для каждой платформы с учетом различных технологий отображения, расстояний просмотра и условий окружающего освещения. Например, цвета iOS оптимизированы для яркого просмотра с близкого расстояния на OLED/LCD-экранах, а цвета tvOS предназначены для более темных помещений в гостиной, просматриваемых на расстоянии на больших экранах.
Да, Apple разрабатывает все цвета системы HIG в соответствии с требованиями контрастности WCAG 2.1 AA при использовании в соответствии с рекомендациями. Цвета меток и текста специально разработаны для обеспечения достаточного контраста с соответствующими цветами фона как в светлом, так и в темном режимах. Всегда проверяйте коэффициенты контрастности для вашего конкретного случая использования.
Да, каждый цвет Apple HIG в этом справочнике включает шестнадцатеричные значения как светлого, так и темного режима. Когда вы используете в своем коде системные цвета Apple (например, «UIColor.systemBackground»), они автоматически переключаются между светлыми и темными вариантами в зависимости от настроек внешнего вида системы пользователя.
Apple обычно обновляет цвета HIG в основных выпусках ОС (iOS, macOS, watchOS, tvOS, VisionOS). Могут быть добавлены новые системные цвета и улучшены существующие цвета. Эта ссылка обновляется с учетом последних доступных значений. Всегда обращайтесь к официальной документации Apple HIG за актуальными значениями.
Да, вы можете использовать эти HEX-значения в веб-проектах, особенно если вы создаете веб-приложение, которое выглядит естественным на устройствах Apple. Однако эти цвета предназначены для собственных платформ и не могут автоматически переключаться между светлым и темным режимами в Интернете без специального CSS. Используйте пользовательские свойства CSS с медиа-запросом «prefers-color-scheme» для поддержки темного режима.
VisionOS представляет уникальный язык дизайна, основанный на стеклянных материалах, глубине и прозрачности. Цвет фона стекла, указанный в этой ссылке, представляет собой базовый оттенок эффекта материала стекла. На практике VisionOS динамически настраивает внешний вид стекла в зависимости от освещения, окружающей среды и содержимого за окном — указанное значение является приблизительным.