タグ

WebDesignとcolorに関するjulia28dfのブックマーク (11)

  • 知っておくと便利な「無彩色」の使い方

    白、黒、グレーのように色みを持たない色のことを「無彩色」と言います。 (むさい色じゃないよ!) 「無彩色」はどんな色ともマッチする反面、使い方によっては地味で無機質な印象になりがちですが、上手に使うとシックでスタイリッシュな雰囲気になります。今回は、色使いの基として「無彩色」の使い方を紹介したいと思います。 色には大きく分けて「有彩色」と「無彩色」の2種類あります。有彩色は「色相、明度、彩度」の3つの性質があるのに対し、無彩色は「明度」*だけの性質を持っています。 *明度(めいど:value) 色の明るさの度合いのこと。 最も明度の高い色が白、最も明度の低い色が黒です。 Webデザインに「無彩色」はかかせない存在 背景など部分的に使う グラデーションをつける 明度差をつけて強調する 光と影をつけて立体感を出す どんな色ともケンカをしない「無彩色」は、使う場所を選ばない万能な色。 Webデ

    知っておくと便利な「無彩色」の使い方
  • Japanese Traditional Colors

    桜色 (さくらいろ) # 薄桜 (うすざくら) # 桜鼠 (さくらねず) # 鴇鼠 (ときねず) # 虹色 (にじいろ) # 珊瑚色 (さんごいろ) # 一斤染 (いっこんぞめ) # 宍色 (ししいろ) # 紅梅色 (こうばいいろ) # 薄紅 (うすべに) # 甚三紅 (じんざもみ) # 桃色 (ももいろ) # 鴇色 (ときいろ) # 撫子色 (なでしこいろ) # 灰梅 (はいうめ) # 灰桜 (はいざくら) # 淡紅藤 (あわべにふじ) # 石竹色 (せきちくいろ) # 薄紅梅 (うすこうばい) # 桃花色 (ももはないろ) # 水柿 (みずがき) # ときがら茶 (ときがらちゃ) # 退紅 (あらぞめ) # 薄柿 (うすがき) # 長春色 (ちょうしゅんいろ) # 梅鼠 (うめねず) # 鴇浅葱 (ときあさぎ) # 梅染 (うめぞめ) # 蘇芳香 (すおうこう) # 浅蘇芳 (あさすお

  • 相性の良い色を自動でピックアップしてくれる「ColorBlender」

    ウェブサイトやブログを作る上で配色はかなり重要ですが、それ故に面倒なものです。そういった悩みを解消するのがこの「ColorBlender」。基準となる色を1つ指定すれば、それに合う色を5色出してくれます。 詳細は以下から。 ColorBlender.com | Your free online color matching toolbox まずスライダーでRGBを調節。 色が決まったら右の「Match blend from active colour」を押し、今のパレットを破棄することをOKする。 すると自動でピックアップされた色が出てきます。 Editing modeを「Direct Edit」から「AutoMatch」に変えると、スライダーを動かすだけで色がピックアップされます。 フォトショップ用やイラストレーター用のカラーパレットとして保存でき、作った配色にリンクするURLも生成可能

    相性の良い色を自動でピックアップしてくれる「ColorBlender」
  • サイトや写真の色をカラーコード化する便利ツール | *LOVE IS DESIGN*

    どんな配色にしようか悩んだとき、すてきなサイトを参考にしたり、きれいな色の写真やイラストを見て、こんな色にしたいと思うことはありませんか? そんなとき役に立ちそうな、カラーパレットを自動作成してくれるWebツールを2つご紹介します。 カラーピッカー(スポイドツール)で色をとる方法もありますが、今回ご紹介するのは、どちらも配色の参考にしたいURLを入れるだけで簡単に色情報を表示してくれます。 Webデザインだけでなく、ファッションやインテリアの配色の参考にもなります。 Color Palette Generator イメージ画像の色情報を抽出してカラーパレットを生成 Red Alt - I Like Your Colors Webページの色情報を抽出 (クリックすると、このページの色情報が表示されます) 入力欄に調べたいページのURLを入力すると、このように表示されます。 sample:WE

    サイトや写真の色をカラーコード化する便利ツール | *LOVE IS DESIGN*
  • ColorJack: Sphere (Color Theory Visualizer)

    Harmonize colors. Create color schemes. Find HEX codes. Simulate color-blindness. Export into Illustrator, Photoshop and ColRD.com

  • 数で合理的にデザインする - カラー編 | d-spica

    数で合理的にデザインする - カラー編 2007-03-16 0 0 Design color 前々回, 数で合理的にデザインする - サイズ編 を書きました。今回はカラーについて。 CSSなどに色を書くときはRGBの16進表記(#FFFFFF)ですが,デザインで色を決めるときはHSBを使っています。 色の性質を表すHSB RGBはred,green,blueの色の成分を表していますが,この数字を見ただけで直感的に色をイメージするのはかなり難しいことです。 HSBは色相,彩度,明度を数によって表したものです。色相(H)は,赤から始まり黄,緑,青,紫と連続的に変わり赤に戻るまでの色を360°に割り当てたものです(アプリケーションによって色の割り当て方が異なることがあります)。彩度(S)は色の鮮やかさ。0は色がぬけたモノトーンのグレー(または白か黒)になります。明度(B)が0になると黒になりま

  • //// COLOURlovers :: loving colours since 1981

    Share Your Color Ideas & Inspiration. COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles... All in the spirit of love.

  • EasyRGB - Color harmonies, complements and themes.

    Create complements, themes and harmonies Use the form below to create colors complements, harmonies and themes. It's an easy way to create a nice looking Web site or to select good trim and accent colors for your home decorations. If you are not sure how to start, check our practical step-by-step instructions.

  • Web2.0風サイトを作るのに必要なモノあれこれまとめ - GIGAZINE

    Web2.0とは何か?というと、いろいろな解釈に基づいていろいろとあるわけですが、デザインという切り口で見てみるとある共通項が存在することがわかります。 例えばそれは、シンプルなレイアウト、中央に寄せる構図、ちょっとした3次元空間を感じさせる効果、白やパステルカラーと言ったソフトな色調の背景、アクセントには鮮やかワンポイントカラー、アイコンを多用したわかりやすい使ったナビゲーション、大きなフォントなどなどであるわけです。角の丸いテーブルなどはその代表です。 というわけで、Web2.0風なサイトデザインへリニューアルする際に参考となるサイトや、その素材を製作するためのサービスなどを集めてみました。 まず、Web2.0風デザインとはどういうものかについては以下のサイトにまとめられています。先ほど書いたのはこのサイトで触れられていることがメインです。 Current style in web d

    Web2.0風サイトを作るのに必要なモノあれこれまとめ - GIGAZINE
  • Miles’ Blog The Web 2.0 Secret Weapon - Thoughts and errata from Miles Burke.

    Thoughts on small business, the web industry and more, from Miles Burke, Author, Speaker, Entrepreneur & Geek. UPDATE: The Web.20 colours of 2007 have now been released! Click here! We’ve all read more than enough now about web 2.0, and there’s a million blogs and articles about what a web 2.0 entrepreneur need to know/have/understand to make their new project the web’s next big ‘Killer App‘. In o

  • 25 Code Snippets for Web Designers (Part2)

  • 1