よりよいWebデザインにするための配色のセオリー :: Love & Design ::
第一印象を決めてしまうほど、色はとても大切な役割を持っています。 Webデザインのイメージを決める上で、色は最も重要な要素といっても過言ではありません。 配色には様々なルールがありますが、Webデザインの配色は好みやセンスに頼らず、目的や用途に合わせて「調和」と「役割」を持つ効果的な配色をしたいものですね。 そこでWebデザインでも“ 無駄にならない ”色彩心理や色の視覚効果など、配色のセオリーをまとめました。 では、さっそく配色の基本になる「色相」「明度」「彩度」「トーン」それぞれの色彩心理や視覚効果を紹介します。 色相差で配色 【イメージ効果】 暖かい⇔冷たい 動的な⇔静的な 情熱的な⇔理知的な → 色相が違う色同士を組み合わせると、色味の差が大きく感じられます。 背景色の心理補色（黄⇔青 赤⇔緑）の方向に色がずれ、左側の中のオレンジは青みを帯び、右は赤みを帯びて見えます。（色相対比）
覚えておきたい配色のワザと便利なツール :: Love & Design ::
Webデザインや配色に役立つ（かもしれない）テクニック、便利なツールを紹介しています。 /*無駄にエロいのは仕様です*/ 01 About 02 Blog 03 Color 04 Design 05 Love 06 etc 色の3つの要素 配色を行う前に、色に関する基礎知識をおさらい。色は「色相・彩度・明度」の3つの要素によって成り立っています。明度だけの性質を持つ無彩色に対し、有彩色は色相、彩度、明度の3つの性質を持っています。これを「色の3属性」と呼びます。 色相（しきそう：Hue） 色相とは、赤・橙・黄・緑・青・紫などの色みのこと。 （色相はつながりあって色相環という輪になります。） 彩度（さいど：Saturation：Chroma） 色の鮮やかさ、強弱の度合いのこと。 彩度が高い（鮮やか）⇔彩度が低い（鈍い） 明度（めいど：Value：Brightness） 色の明るさの度合いのこ
相性の良い色を自動でピックアップしてくれる「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も生成可能
『色の決まりを知っていれば「センス」がよくなる』
システム会社に「色はとりあえず適当にお願いします」と言ってあがってきたものを見ると「えーっ」という配色になってあがってくることがよくある。「適当に」と指定していない自分が悪いのだが色をすべて指定しないと使ってはいけない色の組み合わせを使ってきてしまうのだ。 という私も初めて自分でチラシのデザインを作った時は「韓国風の色遣いだね」とつっこまれたが、緑や赤の原色を多様してしまった。（韓国の色づかいが悪いと言っているのではありません）そこでデザイナーさんに進めてもらったのは配色辞典。そこにあげられている色を使えばたちまちセンスの良い色遣いができるようになるのだこれホントに。 たとえば参考サイトは http://www.colourlovers.com/ これを見ると３色とか５色の色があげられているのでその色の組み合わせを使ってあげるとセンスがよくなる。 ああ、なんと便利な。ちょっと知ってるだけで
ColorBlender.com |色の相性
To get started, choose a preferred color using the color picker below, and a 6-color matching palette (a "blend") will be automatically calculated. You may swicth to Direct Edit mode to tweak or edit individual colors of your blend. Saved blends will be associated with your account if you signed in or stored in your browser cookies if you are not a member yet.
もうこれで迷わない！色に関するお役立ち資料まとめ | P O P * P O P
色って何かと迷いますよね。センスだけでできればいいのですが、なかなかそうもいかないもの。そこで色の理論から、色が心理に与える影響までを網羅した資料をご紹介。 以前ご紹介した「これで完璧！ロゴデザインのためのお役立ち資料まとめ」と同じシリーズですね。 色に迷ったときにかなり使えそうですよ。詳細は以下からどうぞ。 いろいろ網羅されているのですが、いくつか気になるトピックをピックアップ。 ↑ 色関係の使えるオンラインツールいろいろ。 ↑ デスクトップから使えるツールもいろいろ紹介されています。 ↑ 色が心理に与える影響について。大事ですよね。 念のため、全部のカテゴリーをあげておきましょう。 Color Basics （色の基本） Color Psychology & Meaning （色が心理に与える影響および色の意味） Color Science & Theory （色の理論） Color
浮世絵に学ぶ日本の伝統色と配色 | *LOVE IS DESIGN*
配色の参考になる色のランキングサイト COLOURlovers に、海外の名画のカラーパレットがありました。 Color Inspiration from the Masters of Painting そこで、世界の画家たちにも大きな影響を与えた、日本を代表する「浮世絵」からカラーパレットを作ってみました。 ■三世大谷鬼次の奴絵江戸兵衛（東洲斎写楽） ■鳳凰図屏風（葛飾北斎） ■江戸名所 浅草金龍山（歌川広重） ■ 亀戸梅屋舗（歌川広重） ゴッホが模写したことでも有名な絵 参考：印象派と浮世絵の意外な関係 ■春画（渓斎英泉）【オマケ】 ちょっぴりセクシーな配色？ 浮世絵とは、江戸時代に発達した版画絵で当時人気のあった歌舞伎役者や風景など、その時代の様々な風俗が描かれています。 「役者色」と呼ばれた人気歌舞伎役者が愛用した染物や色は、江戸時代の流行色で、役者の屋号や名前がそのまま色の名前に
指定色からベストな配色を導きだすオンラインサービス | コリス
HTML Color Combination Chooserは、指定した色から、色相環を使用した配色を表示するオンラインサービスです。
統一された色彩を自動的に作るサイト「EasyRGB」 - GIGAZINE
奇抜で独創的な色の組み合わせではなく、あくまでも統一された色彩を作りたい場合に非常に便利。いわゆる色見本帳を見ながら行う一種の「カラーハーモニクス」をウェブサイト上で簡単に実現できます。 EasyRGB - Color harmonies, complements and themes. http://www.easyrgb.com/harmonies.php 例えばR:255、G:171、B:32と入力して「Start」をクリックすれば、自動的に入力した色と色彩的にあまり違和感のない統一された他の色の組み合わせを表示してくれます。RGBの範囲も指定できるので、あまりにもかけ離れた色は使いたくないという場合でも柔軟に対応が可能。 さらに便利なのがこちらのカラーマッチング。 EasyRGB - Match your RGB and color data with paint, inks, c
色の組み合わせチェック - 読みやすい前景色と背景色
誰にも読みやすいコンテンツとするためには、文字色と背景色のコントラストをしっかり確保しなければなりません。これを客観的にチェックするため、色の明るさの差などを計算する仕組みを用意してみました。 色の組み合わせ検証 テストの手法 コントラストの計算 色覚偏位のシミュレーション 当サイトが独自に加えたコントラストの段階評価 コントラストと読みやすさの相関関係 色の組み合わせ検証 検証してみたい文字色と背景色の組み合わせを入力してみてください。色の指定には3桁もしくは6桁の16進数カラーコード、あるいは色名（CSS2の色名＋SVGの色名、計147色）およびrgb()の表現が使えます（初期値は、読みにくい例が入っています）。また、入力欄左ボックスから216色のパレットを呼び出して入力することもできます。文字色2、3は、複数の文字色の組み合わせを表示するためのオプションで、コントラストなどの計算は行
Color Schemer | Create matching color schemes at the click of a button
Every Monday, get all the new schemes posted during the previous week sent to your inbox.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
kuler
◆おいしいWeb配色◆
黄金比グラデーション・白銀比グラデーション - DesignWalker
BodyTalk: 伝えるWebレイアウトの配色
色見本
カラースキームを決めるのに便利なサイト10選 | コリス
WEBデザインまとめ２。カラー統一された９０サイト―ピンク・オレンジ・イエロー*ホームページを作る人のネタ帳
色の名前が知りたいときに - DesignWalker
Photoshopのレイヤースタイルファイルを日本の伝統色で作ってみた - DesignWalker
