Objective-CのUIColorオブジェクトは0〜1.0でRGB値を指定するため計算が非常に面倒です。
JavaScriptで16進数変換ツールを制作しようか考えましたが、UIや画面デザインの作成時には色見本をみながらイメージを固めていくのが重要です。
というわけで、ブラウザでカラー名が定義されている「色の名前」「16進数」「Objective-C用のRGB値」のリストを作成しました。
また、16進数をUIColorに変換し出力するツールを公開したので、こちらと合わせて制作を行えばUIデザインを効率よく行えるかと思います。
文末にはおまけでUIColorのRGB指定でのサンプルコードを載せておきます。
- 更新履歴
- [2014.01.10] iOS 7カラーパレットが完成しました。
- [2013.12.28] iOS 7で起用されているカラーパレットを追加しました。(現在制作中)
INDEX
UIColor対応16進数の色見本 (iOS 7カラー)
※RGB値は16進数から算出した値を小数第3位で四捨五入しています。
- gradient-red
- #ff5e3a – #ff2a68
- 1.0,0.37,0.23 – 1.0,0.16,0.41
- gradient-orange
- #ff9500 – #ff5e3a
- 1.0,0.58,0.0 – 1.0,0.37,0.23
- gradient-yellow
- #ffdb4c – #ffcd02
- 1.00,0.86,0.30 – 1.0,0.80,0.01
- gradient-green
- #87fc70 – #0bd318
- 0.53,0.99,0.44 – 0.04,0.83,0.09
- gradient-teal
- #52edc7 – #5ac8fb
- 0.32,0.93,0.78 – 0.35,0.78,0.98
- gradient-blue
- #1ad6fd – #1d62f0
- 0.10,0.84,0.99 – 0.11,0.38,0.94
- gradient-violet
- #c644fc – #5856d6
- 0.78,0.27,0.99 – 0.35,0.34,0.84
- gradient-magenta
- #ef4db6 – #c643fc
- 0.94,0.30,0.71 – 0.78,0.26,0.99
- gradient-black
- #4a4a4a – #2b2b2b
- 0.29,0.29,0.29 – 0.17,0.17,0.17
- gradient-silver
- #dbddde – #898c90
- 0.86,0.87,0.87 – 0.54,0.55,0.56
- calendar
- #f7f7f7 – #d7d7d7
- 0.97,0.97,0.97 – 0.84,0.84,0.84
- reminders1
- #ff8c00 – #fcc376
- 1.0,0.55,0.0 – 0.99,0.76,0.46
- reminders2
- #12a7eb – #77d7ff
- 0.07,0.65,0.92 – 0.47,0.84,1.0
- reminders3
- #5ad427 – #a4e786
- 0.35,0.83,0.15 – 0.64,0.91,0.53
- reminders4
- #c86edf – #e4b7f0
- 0.78,0.43,0.87 – 0.89,0.72,0.94
- weather
- #1d77ef – #81f3fd
- 0.11,0.47,0.94 – 0.51,0.95,0.99
- videos
- #55efcb – #5bcaff
- 0.33,0.94,0.8 – 0.36,0.79,1.0
- notes
- #ffdc38 – #fcce00
- 1.0,0.86,0.22 – 0.99,0.81,0.0
- music
- #fb2b69 – #ff5b37
- 0.98,0.17,0.41 – 1.0,0.36,0.22
- compass
- #1F1F21 – #505052
- 0.12,0.12,0.13 – 0.31,0.31,0.32
- compass1
- #1F1F21
- 0.12,0.12,0.13
- compass3
- #FF3A2D
- 1.00,0.23,0.18
- red
- #FF3B30
- 1.00,0.23,0.19
- orange
- #FF9500
- 1.00,0.58,0.00
- yellow
- #FFCC00
- 1.00,0.80,0.00
- green
- #4CD964
- 0.30,0.85,0.39
- teal
- #34AADC
- 0.20,0.67,0.86
- blue
- #07AFFF
- 0.00,0.48,1.00
- violet
- #5856d6
- 0.35,0.34,0.84
- pink
- #FF2D55
- 1.0,0.18,0.33
- mid-gray
- #8E8E93
- 0.56,0.56,0.58
- gray
- #C7C7CC
- 0.78,0.78,0.80
- calendar2
- #66C7FA
- 0.40,0.78,0.98
- calendar3
- #D1EEFC
- 0.82,0.93,0.99
- calendar4
- #97E67B
- 0.59,0.90,0.48
- calendar5
- #E0F8D8
- 0.88,0.97,0.85
- calendar6
- #FF4981
- 1.0,0.29,0.51
- calendar7
- #FFD3E0
- 1.0,0.83,0.88
- calendar8
- #FF1300
- 1.0,0.07,0.00
- calculator2
- #BDBEC2
- 0.74,0.75,0.76
UIColor対応16進数の色見本
※RGB値は16進数から算出した値を小数第3位で四捨五入しています。
- black
- #000000
- 0,0,0
- aliceblue
- #f0f8ff
- 0.941,0.973,1.0
- darkcyan
- #008b8b
- 0,0.545,0.545
- lightyellow
- #ffffe0
- 1.0,1.0,0.878
- coral
- #ff7f50
- 1.0,0.498,0.314
- dimgray
- #696969
- 0.412,0.412,0.412
- lavender
- #e6e6fa
- 0.0,0.0,0.0
- teal
- #008080
- 0.902,0.902,0.98
- lightgoldenrodyellow
- #fafad2
- 0,0.502,0.502
- tomato
- #ff6347
- 1.0,0.388,0.278
- gray
- #808080
- 0.502,0.502,0.502
- lightsteelblue
- #b0c4de
- 0.69,0.769,0.871
- darkslategray
- #2f4f4f
- 0.184,0.31,0.31
- lemonchiffon
- #fffacd
- 1.0,0.98,0.803
- orangered
- #ff4500
- 1.0,0.271,0
- darkgray
- #a9a9a9
- 0.663,0.663,0.663
- lightslategray
- #778899
- 0.467,0.533,0.6
- darkgreen
- #006400
- 0,0.392,0
- wheat
- #f5deb3
- 0.961,0.871,0.702
- red
- #ff0000
- 1.0,0,0
- silver
- #c0c0c0
- 0.753,0.753,0.753
- slategray
- #708090
- 0.439,0.502,0.565
- green
- #008000
- 0,0.502,0
- burlywood
- #deb887
- 0.871,0.722,0.529
- crimson
- #dc143c
- 0.863,0.078,0.235
- lightgrey
- #d3d3d3
- 0.827,0.827,0.827
- steelblue
- #4682b4
- 0.275,0.51,0.706
- forestgreen
- #228b22
- 0.133,0.545,0.133
- tan
- #d2b48c
- 0.824,0.706,0.549
- mediumvioletred
- #c71585
- 0.78,0.082,0.522
- gainsboro
- #dcdcdc
- 0.863,0.863,0.863
- royalblue
- #4169e1
- 0.255,0.412,0.882
- seagreen
- #2e8b57
- 0.18,0.545,0.341
- khaki
- #f0e68c
- 0.941,0.902,0.549
- deeppink
- #ff1493
- 1.0,0.078,0.576
- whitesmoke
- #f5f5f5
- 0.961,0.961,0.961
- midnightblue
- #191970
- 0.098,0.098,0.439
- mediumseagreen
- #3cb371
- 0.235,0.702,0.443
- yellow
- #ffff00
- 1.0,1.0,0
- hotpink
- #ff69b4
- 1.0,0.412,0.706
- white
- #ffffff
- 1.0,1.0,1.0
- navy
- #000080
- 0,0,0.502
- mediumaquamarine
- #66cdaa
- 0.4,0.804,0.667
- gold
- #ffd700
- 1.0,0.843,0
- palevioletred
- #db7093
- 0.859,0.439,0.576
- snow
- #fffafa
- 1.0,0.98,0.98
- darkblue
- #00008b
- 0,0,0.545
- darkseagreen
- #8fbc8f
- 0.561,0.737,0.561
- orange
- #ffa500
- 1.0,0.647,0
- pink
- #ffc0cb
- 1.0,0.753,0.796
- ghostwhite
- #f8f8ff
- 0.973,0.973,0.973
- mediumblue
- #0000cd
- 0,0,0.804
- aquamarine
- #7fffd4
- 0.498,1.0,0.831
- sandybrown
- #f4a460
- 0.957,0.643,0.376
- lightpink
- #ffb6c1
- 1.0,0.714,0.757
- floralwhite
- #fffaf0
- 1.0,0.98,0.941
- blue
- #0000ff
- 0,0,1.0
- palegreen
- #98fb98
- 0.596,0.984,0.596
- darkorange
- #ff8c00
- 1.0,0.549,0
- thistle
- #d8bfd8
- 0.847,0.749,0.847
- linen
- #faf0e6
- 0.98,0.941,0.902
- dodgerblue
- #1e90ff
- 0.118,0.565,1.0
- lightgreen
- #90ee90
- 0.118,0.565,1.0
- goldenrod
- #daa520
- 0.855,0.647,0.125
- magenta
- #ff00ff
- 1.0,0,1.0
- antiquewhite
- #faebd7
- 0.98,0.922,0.843
- cornflowerblue
- #6495ed
- 0.392,0.584,0.929
- springgreen
- #00ff7f
- 0,1.0,0.498
- peru
- #cd853f
- 0.804,0.522,0.247
- fuchsia
- #ff00ff
- 1.0,0,1.0
- papayawhip
- #ffefd5
- 1.0,0.937,0.835
- deepskyblue
- #00bfff
- 0,0.749,1.0
- mediumspringgreen
- #00fa9a
- 0,0.098,0.604
- darkgoldenrod
- #b8860b
- 0.722,0.525,0.043
- violet
- #ee82ee
- 0.933,0.51,0.933
- blanchedalmond
- #ffebcd
- 1.0,0.922,0.804
- lightskyblue
- #87cefa
- 0.529,0.809,0.98
- lawngreen
- #7cfc00
- 0.486,0.988,0
- chocolate
- #d2691e
- 0.824,0.412,0.118
- plum
- #dda0dd
- 0.867,0.627,0.867
- bisque
- #ffe4c4
- 1.0,0.894,0.769
- skyblue
- #87ceeb
- 0.529,0.809,0.922
- chartreuse
- #7fff00
- 0.498,1.0,0
- sienna
- #a0522d
- 0.627,0.322,0.176
- orchid
- #da70d6
- 0.855,0.439,0.839
- moccasin
- #ffe4b5
- 1.0,0.894,0.71
- lightblue
- #add8e6
- 0.678,0.847,0.902
- greenyellow
- #adff2f
- 0.678,1.0,0.184
- saddlebrown
- #8b4513
- 0.545,0.271,0.075
- mediumorchid
- #ba55d3
- 0.729,0.333,0.827
- navajowhite
- #ffdead
- 1.0,0.871,0.678
- powderblue
- #b0e0e6
- 0.69,0.878,0.902
- lime
- #00ff00
- 0,1.0,0
- maroon
- #800000
- 0.502,0,0
- darkorchid
- #9932cc
- 0.6,0.196,0.8
- peachpuff
- #ffdab9
- 1.0,0.855,0.725
- paleturquoise
- #afeeee
- 0.686,0.933,0.933
- limegreen
- #32cd32
- 0.196,0.804,0.196
- darkred
- #8b0000
- 0.545,0,0
- darkviolet
- #9400d3
- 0.58,0,0.827
- mistyrose
- #ffe4e1
- 1.0,0.894,0.882
- lightcyan
- #e0ffff
- 0.878,1.0,1.0
- yellowgreen
- #9acd32
- 0.604,0.804,0.196
- brown
- #a52a2a
- 0.647,0.165,0.165
- darkmagenta
- #8b008b
- 0.545,0,0.545
- lavenderblush
- #fff0f5
- 1.0,0.941,0.961
- cyan
- #00ffff
- 0,1.0,1.0
- darkolivegreen
- #556b2f
- 0.333,0.42,0.184
- firebrick
- #b22222
- 0.698,0.133,0.133
- purple
- #800080
- 0.502,0,0.502
- seashell
- #fff5ee
- 1.0,0.96,0.933
- aqua
- #00ffff
- 0,1.0,1.0
- olivedrab
- #6b8e23
- 0.42,0.557,0.137
- indianred
- #cd5c5c
- 0.804,0.361,0.361
- indigo
- #4b0082
- 0.294,0,0.51
- oldlace
- #fdf5e6
- 0.992,0.961,0.902
- turquoise
- #40e0d0
- 0.251,0.878,0.816
- olive
- #808000
- 0.502,0.502,0
- rosybrown
- #bc8f8f
- 0.737,0.561,0.561
- darkslateblue
- #483d8b
- 0.282,0.239,0.545
- ivory
- #fffff0
- 1.0,1.0,0.941
- mediumturquoise
- #48d1cc
- 0.282,0.82,0.8
- darkkhaki
- #bdb76b
- 0.741,0.718,0.42
- darksalmon
- #e9967a
- 0.914,0.588,0.478
- blueviolet
- #8a2be2
- 0.541,0.169,0.886
- honeydew
- #f0fff0
- 0.941,1.0,0.941
- darkturquoise
- #00ced1
- 0,0.809,0.82
- palegoldenrod
- #eee8aa
- 0.933,0.91,0.667
- lightcoral
- #f08080
- 0.941,0.502,0.502
- mediumpurple
- #9370db
- 0.576,0.439,0.859
- mintcream
- #f5fffa
- 0.961,1.0,0.98
- lightseagreen
- #20b2aa
- 0.125,0.698,0.667
- cornsilk
- #fff8dc
- 1.0,0.973,0.863
- salmon
- #fa8072
- 0.98,0.502,0.447
- slateblue
- #6a5acd
- 0.416,0.353,0.804
- azure
- #f0ffff
- 0.941,1.0,1.0
- cadetblue
- #5f9ea0
- 0.373,0.62,0.627
- beige
- #f5f5dc
- 0.961,0.961,0.863
- lightsalmon
- #ffa07a
- 1.0,0.627,0.478
- mediumslateblue
- #7b68ee
- 0.482,0.408,0.933
UIColorのRGB値での使用例
- white(#ffffff)
-
UIColor *color = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];
- black(#000000)
-
UIColor *color = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0];
- dimGray(#696969)
-
UIColor *color = [UIColor colorWithRed:0.41 green:0.41 blue:0.41 alpha:1.0];
- slateGray(#708090)
-
UIColor *color = [UIColor colorWithRed:0.43 green:0.5 blue:0.56 alpha:1.0];
まとめ
アプリ開発時に色見本の組み合わせパターンをいくつかライブラリとして準備しておけば、画面やUIのデザイン作成がスムースになりますね。