カラーリファレンス
React NativeのコンポーネントはJavaScriptを使用してスタイル設定されます。カラープロパティは通常、ウェブでのCSSの動作と一致します。各プラットフォームでのカラー使用に関する一般的なガイドは以下にあります。
カラーAPI
React Nativeには、プラットフォームのデザインとユーザー設定を最大限に活用できるように設計された複数のカラーAPIがあります。
- PlatformColorを使用すると、プラットフォームのカラースキームを参照できます。
- DynamicColorIOSはiOS固有のもので、ライトモードまたはダークモードで使用する色を指定できます。
カラー表現
RGB（赤緑青）
React Nativeは、16進数表記と関数表記の両方でrgb()とrgba()をサポートしています。
'#f0f'(#rgb)'#ff00ff'(#rrggbb)'#f0ff'(#rgba)'#ff00ff00'(#rrggbbaa)'rgb(255, 0, 255)''rgb(255 0 255)''rgba(255, 0, 255, 1.0)''rgba(255 0 255 / 1.0)'
HSL（色相飽和度輝度）
React Nativeは、関数表記でhsl()とhsla()をサポートしています。
'hsl(360, 100%, 100%)''hsl(360 100% 100%)''hsla(360, 100%, 100%, 1.0)''hsla(360 100% 100% / 1.0)'
HWB（色相白黒）
React Nativeは、関数表記でhwb()をサポートしています。
'hwb(0, 0%, 100%)''hwb(360, 100%, 100%)''hwb(0 0% 0%)''hwb(70 50% 0%)'
カラー整数
React Nativeは、カラーをint値（RGBカラーモード）としてもサポートしています。
0xff00ff00(0xrrggbbaa)
注意
これはAndroidのColor整数表現に似ているように見えますが、Androidでは値はSRGBカラーモード（0xaarrggbb）で保存されます。
名前付きカラー
React Nativeでは、カラー名文字列を値として使用することもできます。
情報
React Nativeは小文字のカラー名のみをサポートしています。大文字のカラー名はサポートされていません。
transparent
これはrgba(0,0,0,0)のショートカットであり、CSS3と同じです。
カラーキーワード
名前付きカラーの実装は、CSS3/SVG仕様に従っています。
- aliceblue (
#f0f8ff) - antiquewhite (
#faebd7) - aqua (
#00ffff) - aquamarine (
#7fffd4) - azure (
#f0ffff) - beige (
#f5f5dc) - bisque (
#ffe4c4) - black (
#000000) - blanchedalmond (
#ffebcd) - blue (
#0000ff) - blueviolet (
#8a2be2) - brown (
#a52a2a) - burlywood (
#deb887) - cadetblue (
#5f9ea0) - chartreuse (
#7fff00) - chocolate (
#d2691e) - coral (
#ff7f50) - cornflowerblue (
#6495ed) - cornsilk (
#fff8dc) - crimson (
#dc143c) - cyan (
#00ffff) - darkblue (
#00008b) - darkcyan (
#008b8b) - darkgoldenrod (
#b8860b) - darkgray (
#a9a9a9) - darkgreen (
#006400) - darkgrey (
#a9a9a9) - darkkhaki (
#bdb76b) - darkmagenta (
#8b008b) - darkolivegreen (
#556b2f) - darkorange (
#ff8c00) - darkorchid (
#9932cc) - darkred (
#8b0000) - darksalmon (
#e9967a) - darkseagreen (
#8fbc8f) - darkslateblue (
#483d8b) - darkslategrey (
#2f4f4f) - darkturquoise (
#00ced1) - darkviolet (
#9400d3) - deeppink (
#ff1493) - deepskyblue (
#00bfff) - dimgray (
#696969) - dimgrey (
#696969) - dodgerblue (
#1e90ff) - firebrick (
#b22222) - floralwhite (
#fffaf0) - forestgreen (
#228b22) - fuchsia (
#ff00ff) - gainsboro (
#dcdcdc) - ghostwhite (
#f8f8ff) - gold (
#ffd700) - goldenrod (
#daa520) - gray (
#808080) - green (
#008000) - greenyellow (
#adff2f) - grey (
#808080) - honeydew (
#f0fff0) - hotpink (
#ff69b4) - indianred (
#cd5c5c) - indigo (
#4b0082) - ivory (
#fffff0) - khaki (
#f0e68c) - lavender (
#e6e6fa) - lavenderblush (
#fff0f5) - lawngreen (
#7cfc00) - lemonchiffon (
#fffacd) - lightblue (
#add8e6) - lightcoral (
#f08080) - lightcyan (
#e0ffff) - ペールゴールデンイエロー (
#fafad2) - ライトグレー (
#d3d3d3) - ライトグリーン (
#90ee90) - ライトグレー (
#d3d3d3) - ライトピンク (
#ffb6c1) - ライトサーモン (
#ffa07a) - ライトシーグリーン (
#20b2aa) - ライトスカイブルー (
#87cefa) - ライトスレートグレー (
#778899) - ライトスチールブルー (
#b0c4de) - ライトイエロー (
#ffffe0) - ライム (
#00ff00) - ライムグリーン (
#32cd32) - リネン (
#faf0e6) - マゼンタ (
#ff00ff) - マルーン (
#800000) - ミディアムアクア marine (
#66cdaa) - ミディアムブルー (
#0000cd) - ミディアムオーキッド (
#ba55d3) - ミディアムパープル (
#9370db) - ミディアムシーグリーン (
#3cb371) - ミディアムスレートブルー (
#7b68ee) - ミディアムスプリンググリーン (
#00fa9a) - ミディアムターコイズ (
#48d1cc) - ミディアムバイオレットレッド (
#c71585) - ミッドナイトブルー (
#191970) - ミントクリーム (
#f5fffa) - ミスティローズ (
#ffe4e1) - モカシン (
#ffe4b5) - ナバホホワイト (
#ffdead) - ネイビー (
#000080) - オールドレース (
#fdf5e6) - オリーブ (
#808000) - オリーブドラブ (
#6b8e23) - オレンジ (
#ffa500) - オレンジレッド (
#ff4500) - オーキッド (
#da70d6) - ペールゴールデンロッド (
#eee8aa) - ペールグリーン (
#98fb98) - ペールターコイズ (
#afeeee) - ペールバイオレットレッド (
#db7093) - パパイヤホイップ (
#ffefd5) - ピーチパフ (
#ffdab9) - ペルー (
#cd853f) - ピンク (
#ffc0cb) - プラム (
#dda0dd) - パウダーブルー (
#b0e0e6) - パープル (
#800080) - レベッカパープル (
#663399) - レッド (
#ff0000) - ロージーブラウン (
#bc8f8f) - ロイヤルブルー (
#4169e1) - サドルブラウン (
#8b4513) - サーモン (
#fa8072) - サンディブラウン (
#f4a460) - シーグリーン (
#2e8b57) - シーシェル (
#fff5ee) - シエナ (
#a0522d) - シルバー (
#c0c0c0) - スカイブルー (
#87ceeb) - スレートブルー (
#6a5acd) - スレートグレー (
#708090) - スノー (
#fffafa) - スプリンググリーン (
#00ff7f) - スチールブルー (
#4682b4) - タン (
#d2b48c) - ティール (
#008080) - シスル (
#d8bfd8) - トマト (
#ff6347) - ターコイズ (
#40e0d0) - バイオレット (
#ee82ee) - ウィート (
#f5deb3) - ホワイト (
#ffffff) - ホワイトスモーク (
#f5f5f5) - イエロー (
#ffff00) - イエローグリーン (
#9acd32)