株式会社コプロシステム

お問い合わせ

2013年8月 1日

フラットデザインなWebサイトで使われている色ってどんな色?配色パターン事例・カラーコード付き

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

こんにちは、コプロシステムWebデザイングループの石川です。

当ブログの6/12付エントリー『UIデザインの2013年のトレンド「フラットデザイン」の事例・16個』で、

  • 2011~2012年頃から「フラットデザイン」というデザイン手法が注目を集め始めていること
  • Googleトレンドの指標を見ると2013年に入ってから急上昇をし始めていて、間違いなく今年のWebデザインのトレンドであること
  • フラットデザインとは、特徴
  • 事例サイトの紹介

などを書かせていただきました。

アクセス解析ツールでアクセス状況を見ていると、「レスポンシブWebデザイン」について書いているエントリーの次に、「フラットデザイン」について書いている上記エントリーにアクセスが集中している傾向にありましたので、今回のエントリーでは、そのフラットデザインなWebサイトたちでどんな色が使われているか、前回ご紹介した事例サイト(+α)ごとに配色とそのカラーコードをまとめてみました。
是非チェックしてみてください。


1. Lorenzo Verzini


このサイトで使っているカラーコード

  • #FFD464
    Dandelion
  • #F26964
    Crusta
  • #1253A4
    Egyptian Blue
  • #F4F4F2
    Black Squeeze
  • #F1F0EE
    Wan White
  • #333333
    Night Rider

2. Profound Grid


このサイトで使っているカラーコード

  • #FFF200
    Yellow
  • #242424
    Nero
  • #F5F5F5
    White Smoke
  • #C8C8C8
    Very Light Grey
  • #B7B7B7
    Silver

3. Vtcreative


このサイトで使っているカラーコード

  • #2FCDB4
    Shamrock
  • #F8F8F8
    White Smoke
  • #202223
    Bunker

4. Video Hosting for Business - WISTIA


このサイトで使っているカラーコード

  • #ECEEF1
    Solitude
  • #0E7AC4
    Denim
  • #40AAEF
    Summer Sky
  • #363947
    Black Rock
  • #58BE89
    Silver Tree
  • #FBA848
    My Sin
  • #F27398
    Light Coral
  • #CCCCCC
    Very Light Grey

5. oak.is


このサイトで使っているカラーコード

  • #F5F5F5
    White Smoke
  • #79D1B0
    Downy
  • #FDC44F
    Golden Tainoi
  • #33BFDB
    Summer Sky
  • #5EBABA
    Puerto Rico
  • #44DEDE
    Turquoise
  • #8DCF3F
    Atlantis
  • #93B8CA
    Polo Blue
  • #F58E7E
    Light Coral
  • #737373
    Empress
  • #383838
    Eclipse

6. Future Insights Live 2013


このサイトで使っているカラーコード

  • #02AEDC
    Iris Blue
  • #A18E5C
    Sorrell Brown
  • #E3DECC
    Travertine
  • #292929
    Nero
  • #E6E5E1
    Wan White

7. Buffalo


このサイトで使っているカラーコード

  • #F5F5F5
    White Smoke
  • #181818
    Nero
  • #16A6B6
    Light Sea Green
  • #BFBFBF
    Silver
  • #EE6557
    Burnt Sienna

8. Interactive Advent Calendar


このサイトで使っているカラーコード

  • #F5F1E9
    Romance
  • #262626
    Nero
  • #FF6860
    Bittersweet
  • #0C555D
    Blue Stone
  • #CCDFCC
    Edgewater

9. LayerVault


このサイトで使っているカラーコード

  • #CCD0D5
    Link Water
  • #7C858E
    Regent Grey
  • #27313D
    Licorice
  • #0F1419
    Black Pearl
  • #DE4830
    Cinnabar
  • #A6341F
    Fire Brick
  • #60C4B0
    Medium Aquamarine
  • #26AE90
    Niagara
  • #ECB935
    Bright Sun
  • #C69D2B
    Nugget
  • #E9872E
    California

10. Adam Rudzki


このサイトで使っているカラーコード

  • #08233E
    Sapphire
  • #F8823C
    Sunshade
  • #2C5379
    Venice Blue
  • #EB2142
    Amaranth


色の名前がどれもカッコいい...。

色の選択に迷ったら、こんなツールもあります

Flat UI Colors

フラットデザインらしい色がまとまったカラーパレット・ツール。
各色をクリックすると、カラーコードがコピーできます。


Windows 8 Colors

Windows 8のUIで使われている色を参照できます。
Windows 8はうっすらグラデーションがかかっているようなので、グラデーションの始点~終了点がまとまっています。


Webサイトやスマートフォンサイト・アプリなどを作成~検討する際に、活用してみてください!

参照したサイト

上記の各色の名前は、下記サイトで調べました。
Color Name & Hue


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

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか?

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050(代表)

メールでのお問い合わせ

お問い合わせ

同じカテゴリ「Webデザイン」の記事

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください!

PAGE TOP