ウェブデザインによく使うトレンドなwebカラーと、その配色の値をまとめてみた

デザイン

読了の目安時間: 90

web_col_thumb

ウェブサイトのデザインでは、フラットデザイン・ガーリーデザイン・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)

参考・引用サイト

色の参考

配色作成サイト

カラージェネレーター

グラデーション作成サイト

css Gradient Background Maker

複数配色の割合パターン参考

ノンデザイナーこそ押さえておきたい!グッとくるWebサイト配色パターン集

RGB16⇔10進数変換表

RGB16⇔10進数変換表

まとめ

いかがでしたでしょうか。ウェブカラーの選定に迷った時の参考になれば、幸いです。

キヨタツ
キヨタツの一言

RGBだけでも約1650万通りの組み合わせ。色の世界は奥深いです。。。

今読んだ記事をシェアする

web_col_thumb

ウェブデザインによく使うトレンドなwebカラーと、その配色の値をまとめてみた

  • このエントリーをはてなブックマークに追加
  • Pocket

このブログサイトが参考になった人は、いいねボタン! 更新情報も受け取れます!

arrow
デル株式会社
  • Pocket
  • このエントリーをはてなブックマークに追加

キヨタツ

キヨタツ

WEBを中心に、色々な制作をする個人事業主です。過去、エンジニア&webディレクターで会社勤めをしていました。webデザインでは、シンプル・見やすい・分かりやすいといった機能美を意識して制作します。性格は、自虐好きです。