メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
カラー
/
Apple System Colors
◉
Apple System Colors
color/color-apple-system-colors
Apple系UIで使われる代表的なシステムカラー名とHEX値を固定表で確認できる。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
Apple System Colorsでは、Apple系UIで使われる代表的なシステムカラー名とHEX値を固定表で確認できる。
関連する観点として Apple System Colors、apple system colors、カラー変換 を確認し、結果をコピーして別の作業に使えます。
項目
内容
Red
#FF3B30
Orange
#FF9500
Yellow
#FFCC00
Green
#34C759
Mint
#00C7BE
Teal
#30B0C7
Cyan
#32ADE6
Blue
#007AFF
Indigo
#5856D6
Purple
#AF52DE
Pink
#FF2D55
Brown
#A2845E
使い方
表の左列でRed、Blue、Mintなどのシステムカラー名を探します。
右列のHEX値を確認し、必要な値を選択してコピーします。
SwiftUIやUIKitの動的カラーそのものではなく、Webや資料で参照する代表HEXとして扱います。
正確なプラットフォーム表示が必要な場合は、AppleのHuman Interface Guidelinesや実機表示と照合します。
入力例・出力例
INPUT
Red
OUTPUT
#FF3B30
固定表のRed行に掲載されている代表値です。
INPUT
Blue
OUTPUT
#007AFF
iOS系UIでよく参照される青の代表HEXです。
INPUT
Brown
OUTPUT
#A2845E
表の最後に掲載されているBrownの値です。
よくある利用シーン
iOS風のWebモックや資料で、Apple系カラーの代表HEXを手早く参照したいとき。
デザイントークン作成時に、RedやBlueなど意味名付きカラーの候補値を並べたいとき。
ライト/ダークの動的カラー実装前に、固定HEXの見た目だけを比較したいとき。
結果確認のポイント
色空間、透明度、コントラスト、コピーしたコード形式が用途に合うか確認してください。
Apple System Colors、apple system colors、カラー変換の観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
画面やOSの色管理により見え方が変わるため、最終判断は実機でも確認してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
Apple System Colorsの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
Apple System Colorsとは何ですか?
Apple系UIで使われる意味名付きカラーの参照表です。このツールではRed、Orange、Yellow、Green、Mint、Teal、Cyan、Blue、Indigo、Purple、Pink、Brownの12色と単一の代表HEX値だけを固定表示します。
ライトモードとダークモードで色の値が異なりますか?
Appleの実環境では同じ名前の色が外観モードで変わる場合がありますが、このツールはLight/Dark両モードを併記しません。表示するのは各色1つの固定HEX値のみです。
WebデザインでApple System Colorsに相当する色を使うには?
表のHEX値をCSS変数やカスタムプロパティの候補として使えます。ただし動的カラーの切り替えは生成しないため、prefers-color-scheme対応が必要な場合はライト用・ダーク用の値を別途設計してください。
関連ツール
カラーシェード生成
指定色の明暗バリエーション(10段階)を自動生成。
アクセシブルカラー生成
前景色・背景色をHEXで指定するとWCAG 2.1のコントラスト比を自動計算。通常テキスト(AA 4.5:1/AAA 7:1)と大きい文字(AA 3:1/AAA 4.5:1)それぞれの合否をバッジで表示し、プレビュー文で実際の見え方も確認できます。
ANSIカラー一覧
ANSIエスケープシーケンスの文字色コード(標準8色 SGR 30〜37、高輝度8色 90〜97)と背景色コード(40〜47、100〜107)を色名・番号・エスケープシーケンスの対応表で確認できるツール。ターミナル配色の把握やシェルスクリプトの色指定に。
ブランドカラー一覧
主要ブランド名と代表的なHEXカラー値を2列の固定表で確認できる。
CMYK→HEX変換
CMYKカラー値をHEXに変換する。
コントラスト比早見表
WCAGでよく使う1:1、3:1、4.5:1、7:1、21:1の意味を固定表で確認できる。
WCAG AA 白背景
入力HEX色を白背景と比較し、通常テキストと大テキストのWCAG AA到達可否を表示する。
HEX #追加
改行区切りの各行について、#が無いHEX表記の先頭に#を付ける単純変換。