Skip to main content

iOS & Android システムカラー iOS Human Interface と Android Material Design のシステムカラーを参照します。

iOS & Android システムカラー illustration
🎨

iOS & Android システムカラー

iOS Human Interface と Android Material Design のシステムカラーを参照します。

1

プラットフォームの選択

iOS(Human Interface)またはAndroid(Material 3)を選択します。

2

外観の切り替え

iOSの場合、ライトモードとダークモードの色相を切り替えることができます。

3

カラーのコピー

システムカラーのHEXコードをコピーします。

Loading tool...

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

  • 1
    iOSシステムカラーはコード内で自動的に適応するため、UIColor.systemBlueなどのセマンティック名を使うことをお勧めします
  • 2
    Android Material 3トークンはJetpack ComposeのMaterialTheme経由で使用する必要があります
  • 3
    ダークモードの色相はライトモードよりもやや明るく設定されており、ダークバックグラウンドでの視覚的な重みを維持します
  • 4
    自動ダークモード対応のため、ハードコーディングされた値ではなくセマンティック名(システムカラー)を使うことをお勧めします
  • 5
    iOSには階層レベルごとに6つのグレイレベル(systemGrayからsystemGray6)があります

Related Tools

Frequently Asked Questions

Q ダークモードの色相はライトモードと異なるのはなぜですか?
ダークモードの色相は、ダークバックグラウンドでの視覚的な重みと読みやすさを維持するために調整されています。単純にライトモードの色相を反転させるだけでは良好な結果が得られません。これは、人間の明度感覚が非線形であるためです。
Q ネイティブコードでこれらのHEX値を使うべきですか?
プラットフォームAPI(UIColor.systemBlue、MaterialTheme.colorScheme.primary)を使用することをお勧めします。これらは外観の変更を自動的に処理します。デザインツールや参照用にHEX値を使います。
Q これらのカラーは最新のOSバージョンと一致していますか?
標準プラットフォームカラーレパジトリを表しています。AppleおよびGoogleは新しいOSリリースで時折値を調整します。常に、プロダクションアプリ用には最新のSDKドキュメントに対して検証する必要があります。

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.