iOS & Android システムカラー iOS Human Interface と Android Material Design のシステムカラーを参照します。
iOS & Android システムカラー
iOS Human Interface と Android Material Design のシステムカラーを参照します。
プラットフォームの選択
iOS(Human Interface)またはAndroid(Material 3)を選択します。
外観の切り替え
iOSの場合、ライトモードとダークモードの色相を切り替えることができます。
カラーのコピー
システムカラーのHEXコードをコピーします。
What Is iOS & Android システムカラー?
このツールは、iOSとAndroidのシステムカラー - ネイティブアプリケーションを構築するためにAppleとGoogleが推奨している事前定義されたカラー - の完全なリファレンスを提供します。 iOSシステムカラーは、AppleのHuman Interface Guidelines (HIG)に従っており、systemBlue、systemRed、systemGrayバリアントなどの意味的に命名されたカラーが含まれています。これらのカラーには、それぞれライトモードとダークモードの値があります。 Androidカラーは、Material Design 3 (Material You)デザイントークンに従っており、Primary、Secondary、Tertiary、Error、およびSurfaceカラーを含みます。 プラットフォームシステムカラーを使用することで、アプリがネイティブに感じられ、外観モード(ライト/ダーク)に適応し、それぞれのプラットフォームによって設定されたアクセシビリティ標準を維持できます。 このリファレンスにより、開発者はドキュメントを調べる手間が省け、アップルとGoogleによって指定された正確なカラーベースを使用することができます。
Why Use iOS & Android システムカラー?
-
iOSシステムカラー(ライトモード/ダークモード)を完全に揃える
-
Android開発用のMaterial 3デザイントークン
-
ネイティブアプリの外観とフィールを実現するための公式プラットフォームカラー
-
ライトモード/ダークモード(iOS)の切り替え
-
一括コピー機能
Common Use Cases
iOS開発
Swift/SwiftUI開発用のシステムカラーベースを正確に参照します。
Android開発
Kotlin/Jetpack Compose用のMaterial 3カラートークン値を見つけます。
クロスプラットフォーム設計
クロスプラットフォームアプリを設計する際に、iOSとAndroidのシステムカラーを比較します。
Figma/Sketchライブラリ
正確なプラットフォームシステムカラーでデザインツールライブラリを設定します。
Technical Guide
iOSシステムカラーは、ライトアピアランスとダークアピアランスの間に自動的に適応する意味的なカラーです。 例えば、systemBlueはライトモードでは#007AFFで、ダークモードでは#0A84FF - ダークな背景に対して視覚的優位性を維持するために少し明るくなっています。 カラーベースは、AppleのUIKit (UIColor)とSwiftUI (Color)フレームワークに定義されています。 Android Material 3はトークンベースシステムを使用しています: Primary、Secondary、Tertiaryが重要なカラーで、SurfaceとBackgroundがコンテナであり、On-*バリアントがそれらのサーフェス上的コンテンツです。 Material 3トークンは、Material Youシステム経由でのユーザーの壁紙からの動的カラージェネレーションと連携して機能するように設計されています。 両プラットフォームは、それぞれのダークバックグラウンドカラーに対する認識された明るさとコントラストを最適化するために、少し異なるカラーをダークモードに選択しています。
Tips & Best Practices
-
1iOSシステムカラーはコード内で自動的に適応するため、UIColor.systemBlueなどのセマンティック名を使うことをお勧めします
-
2Android Material 3トークンはJetpack ComposeのMaterialTheme経由で使用する必要があります
-
3ダークモードの色相はライトモードよりもやや明るく設定されており、ダークバックグラウンドでの視覚的な重みを維持します
-
4自動ダークモード対応のため、ハードコーディングされた値ではなくセマンティック名(システムカラー)を使うことをお勧めします
-
5iOSには階層レベルごとに6つのグレイレベル(systemGrayからsystemGray6)があります
Related Tools
HEXからRGBコンバーター
HEXカラーコードを瞬時にRGB値に変換。プレビューパネルでライブ表示。
🎨 Color Tools
カラーピッカー
HEX、RGB、HSL、CMYK形式の出力に対応したインタラクティブなカラーピッカー。
🎨 Color Tools
コントラスト比チェッカー
前景色と背景色の間のWCAGコントラスト比を確認します。
🎨 Color Tools
ブランドカラーパレット
50以上の人気ブランドやテクノロジー企業の公式カラーパレットを閲覧できます。
🎨 Color Tools
マテリアルデザインカラー
すべてのシェードやアクセントを含む、マテリアルデザインの完全なカラーパレットを閲覧します。
🎨 Color ToolsFrequently Asked Questions
Q ダークモードの色相はライトモードと異なるのはなぜですか?
Q ネイティブコードでこれらのHEX値を使うべきですか?
Q これらのカラーは最新のOSバージョンと一致していますか?
About This Tool
iOS & 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.