Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: Color

[Color] Color Supply – 色相環を使ったカラーパレットのシミュレーター

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

色選びのお供、色相環を使ったカラーパレットのシミュレーターです。この手のツールによくある、カラースキームを選んでパレット生成するという機能に加え、イラストやテクスチャを使った簡単な作例生成まで行える点が特徴です。まずは用意されている5つのカラースキームから好きなものを選びましょう。Complementaryは対面にある色(補色色相)、Analogousは隣り合う色(類似色相)、Triadは正三角形、Split-Complementは二等辺三角形(分裂補色)、Squareは四角形の配色となります。次に色相環の中から基調とする色を選択します。するとカラースキームに沿ったカラーパレットが生成され、色相環の下にはイラストとテクスチャで作例を表示してくれます。またカラーコードの生成や、グラデーションを使った例も作ってくれます。選んだ色を使ってどんな雰囲気になるのかすぐに確認できる点がとってもナイスです。

[Color] LOL Colors – カラーパレットギャラリー

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

クールなカラーパレットをギャラリー形式で紹介するサイト。色にマウスオーバーするとHEX指定での値が出ます。紹介されている数はそれほど多くないけど、多分今後増えるんでしょう。配色決める際のネタ探しに使えそうです。

[Color] uiGradients – グラデーションのギャラリーサイト

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

綺麗なグラデーションのギャラリーサイト。2色で形成されたグラデーションを延々と見るだけのサイトです。けど綺麗なのでわりと見ちゃいます。マウスでの操作以外にキーボードの十字キーにも対応しているので、サクサク見る事ができます。またEnterキーを押す事でCSSコードを取得する事もできます。作例の多くはiOS 7以降によく使われる類のグラデーションという感じ。グラデーションのネタ探しにナイスです。

[Color Palette] Color Calculator – 色相環を使ったカラージェネレーター

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

色相環を使ったカラージェネレーター。これすっごい便利です。Step1で任意の色をまずは選んで、Step2で配色形式を選ぶ事で簡単にカラーハーモニー(配色)を抽出する事ができるというもの。配色形式はボタンで表されているので分かりやすいです。左から補色色相、彩度違い(これなんて言うのか分かんない)、隣接色相、対照色相、中差色相、テトラード(4色配色)となっており、最初に選んだ1色をキーカラーに、それぞれ対応する色を吐き出してくれます。色はHEX指定で生成されますが、クリックするとCMYKとRGBでの指定値も見ることができます。配色に困った時にとってもナイスです。けどまぁあまりこうしたセオリーに頼りすぎるのも良くないとは思うんですけどね。

[Color] tool for official brand color codes – 様々なWeb系ブランドのカラーコードをまとめたサイト

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

様々なWeb系ブランドのキーカラーを抽出したサイト。複数の色が使われるブランドにおいては、それらの配分についても分かりやすく紹介されてます。また各カラーパレットにマウスオーバーする事で16進法、RGB、HSLそれぞれの色指定を見る事ができ、クリックでクリップボードに色情報が転送されます。有名どころをいくつか抽出すると、Adobe, Android, Amazon, Delicious, Devient Art, Digg, Dropbox, Evernote, Facebok, Instagram, Pinterest, Skype, Twitter, WordPress, Youtubeなどが挙げられます。なんかこうサービス名を羅列している最中、あーなんか自分って多くのWebサービス使って生きてんだなぁ・・・とか思いました。いやまぁ便利なのはイイ事なんですけどね。

[Color Palette] 10 Time Saving Online Color Tools for Web Designers – デザイナーの生産性を上げるための、カラーツールまとめ

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

Webデザイナーが生産性を上げるためのカラーツールをまとめた記事。色に関するオンラインツールがカテゴリごとに分けて紹介されてます。上からカラーパレット生成、カラーピッカー、カラーセオリーに関する補助ツール、CSSグラデーション生成、カラーサジェストツールという順番です。それぞれ複数のサイトが紹介されていて、目的に応じて色を選んだり抽出したり、理解を深める事ができます。この手の便利サイトはデザイナーなら知っておいて損はないですね。

[Color] The Most Powerful Colors in the World – 色とロゴで見るウェブサービスの傾向

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

色で見るウェブサービス。3つのインフォグラフィックが紹介されていて、1つめはカラーパレット上に有名どころのウェブサービスやIT企業のロゴを並べてみるとこんな感じ、というなかなか興味深い試み。2つめはロゴの色分布。青と赤に集中しているのが分かります。3つめは企業サイトのFaviconを利用者数が多いほど大きく表示してみた、というもの。ニコニコや楽天といった日本のサービスも見れます。どれもロゴと色とを関連づけた興味深い試み。

[WEB DESIGN] 50 Red Web Designs to Inspire You – 赤でデザインされたクールなウェブサイト

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

赤を基調としてデザインされたクールなウェブサイトを集めた記事。50ものサイトがまとめられています。赤い彗星的にこれはなかなかホットなまとめ記事。実際赤って、インパクトのあるデザインを狙う時によく使うんですよね。この中には入ってませんが、赤と言えば個人的にTEDのデザインがシンプルで好き。