MENU
コンテンツ再構築中

Objective-C:アプリ開発者のためのUIColor用のRGB値と16進数の色見本(iOS7対応)

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のデザイン作成がスムースになりますね。

Please share it!
  • URLをコピーしました!
  • URLをコピーしました!
INDEX