ウェブデザインのトレンドカラー配色値まとめ
ウェブサイトのデザインでは、フラットデザイン・ガーリーデザイン・UIデザインなど、さまざまなデザインがあります。ただし、webカラーとして使われる色の組み合わせの数は、基本的にRGBですので255*255*255分のパターンとなり、有限です。今回、その中でもよく使われる色について、それぞれの色味・16進数・RGBの値でまとめてみました。
目次
カラーサンプル一覧
デザインでは、画像パターンを使った特色や、模様などもありますが今回は色味に限定しています。
SNSカラー
Twitter
#00aced
rgb(0,172,237)
facebook
#305097
rgb(30,50,97)
Google+
#db4a39
rgb(219,74,57)
LINE
#5ae628
rgb(90,230,40)
Instagram
#3f729b
rgb(63,114,155)
tumblr
#34526f
rgb(52,82,111)
Flickr(青)
#0063dc
rgb(0,99,220)
Flickr(ピンク)
#ff0084
rgb(255,0,132)
フラットデザインカラー
鮮赤
#e74c3c
rgb(231,76,60)
濃赤
#c0392b
rgb(192,57,43)
キャロット
#e67e22
rgb(230,126,34)
パンプキン
#d35400
rgb(211,84,0)
サンフラワ
#f1c40f
rgb(241,196,15)
オレンジ
#f39c12
rgb(243,156,18)
エメラルド
#2ecc71
rgb(46,204,113)
緑
#27ae60
rgb(39,174,96)
明青緑
#1abc9c
rgb(26,188,156)
青緑
#16a085
rgb(22,160,133)
水色
#3498db
rgb(52,152,219)
濃水色
#2980b9
rgb(41,128,185)
インディゴ
#34495e
rgb(52,73,94)
紺色
#2c3e50
rgb(44,62,80)
アメジスト
#9b59b6
rgb(155,89,182)
ウィステリア
#8e44ad
rgb(142,68,173)
MODERN UI アクセントカラー
ライム
#A4C400
rgb(164,196,0)
グリーン
#60A917
rgb(96,169,23)
エメラルド
#008A00
rgb(0,138,0)
ティール
#00ABA9
rgb(0,171,169)
シアン
#1BA1E2
rgb(27,161,226)
コバルト
#0050EF
rgb(0,80,239)
インディゴ
#6A00FF
rgb(106,0,255)
バイオレット
#AA00FF
rgb(170,0,255)
ピンク
#F472D0
rgb(244,114,208)
メガンタ
#D80073
rgb(216,0,115)
クリムソン
#A20025
rgb(162,0,37)
レッド
#E51400
rgb(229,20,0)
オレンジ
#FA6800
rgb(250,104,0)
アンバー
#F0A30A
rgb(240,163,10)
イエロー
#E3C800
rgb(227,200,0)
ブラウン
#825A2C
rgb(130,90,44)
オリーブ
#6D8764
rgb(109,135,100)
スティール
#647687
rgb(100,118,135)
モーヴ
#76608A
rgb(118,96,138)
トープ
#87794E
rgb(135,121,78)
ガーリーデザインカラー
ガーリー1
#fc6668
rgb(252,102,104)
ガーリー2
#35b8cc
rgb(53,184,204)
ガーリー3
#474048
rgb(71,64,72)
ガーリー4
#ef9c94
rgb(239,156,148)
ガーリー5
#ea8478
rgb(234,132,120)
ガーリー6
dd6d61#
rgb(221,109,97)
ガーリー7
#f5d2d0
rgb(245,210,208)
ガーリー8
#de7766
rgb(222,119,102)
ガーリー9
#888b84
rgb(136,139,132)
ガーリー10
#b6c254
rgb(182,194,84)
ガーリー11
#43b2c6
rgb(67,178,198)
ガーリー12
#dc6543
rgb(220,101,67)
ガーリー13
#1abbac
rgb(26,187,172)
ガーリー14
#f8486e
rgb(248,72,110)
ガーリー15
#cccbac
rgb(204,203,172)
ガーリー16
#fff444
rgb(255,244,68)
参考・引用サイト
色の参考
配色作成サイト
グラデーション作成サイト
複数配色の割合パターン参考
ノンデザイナーこそ押さえておきたい!グッとくるWebサイト配色パターン集
RGB16⇔10進数変換表
まとめ
いかがでしたでしょうか。ウェブカラーの選定に迷った時の参考になれば、幸いです。