プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】
なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ８つの基本ルールを詳しく紹介します。 コンテンツ目次 1. 色数を制限しよう。 2. 自然からインスピレーションをもらおう。 3. 60−30−10ルールを試してみよう。 4. まずはグレースケールでデザインしよう。 5. 黒色を利用するのは避けよう。 6. 重要性を色のコントラストで表現しよう 7. 色を使ってユーザーの感情を引き出そう。 8. デザインを理解しやすくしよう。 9. ボーナス: デザイナー向け配色ツールまとめ 配色基本ルール１ 色数を制限しよう。 デザインプロジェクトに配色を適用するには、バランスが重要になります。色数が増えるほどバランスを取るのは難しくなります。配色は最高でも3色までに制限することで、よりよい結果となるで
webcolourdata.com - webcolourdata リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
コピペで使えるオシャレな配色パターン見本 25 （全組み合わせWebカラーコード付） - LITERALLY
今回はひたすら配色パターンを紹介していく。探しやすいように色ごとに分け、使いやすいように解説とWebコードも合わせて紹介する。プレゼン資料、Webデザインなどで目的に合った配色をそのままコピペして使って頂ければと思う。 ▼ 目次 カラフルな配色パターン 橙系の配色パターン 青系の配色パターン 緑系の配色パターン 黄色系の配色パターン 赤系の配色パターン 高級感を表現する配色 わび・さびを表現する和風配色 シンプルに格好良いグレーの配色 カラフルな配色パターン 1. 淡い「カラフル」 ■ #FF7D7D ■ #FFD580 ■ #B3E2B4 ■ #ABE7FF ■ #B8B2EA ■ #DBDBDB 淡いカラフルな配色は、白の背景に合わせると「透明感」を出すのに効果的。カラフル系の配色は扱いづらいので、上のコードをそのままコピペして使って頂くのが良いかと思う。 2. 力強い「カラフル」 ■
配色大辞典 - Color Scheme
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
知らないと損する！？色の相性についての考え方と組み合わせの方法 - MIKINOTE
色というのものは、組み合わせ次第で、さまざまな印象をあたえることが出来ます。そういう意味で、何かを作り出す際には非常に重要な要素の1つであると言えます。 ここ最近、僕が読者になっているいるブログのいくつかで、ブログのデザインや配色についての話が多いので、ちょいと書いてみることにしました。 色に対する感覚って、生まれ持ってのセンスだ！という話がけっこう多いです。けれども、「センスが良い配色」と言うのは、結局は色についての理論的なものを知っていないと、なかなか出来ないものだったりするんですよ。美術でもデザインでも、努力はセンスに勝ります。 特に、色と色の組み合わせってのは重要です。単体だと美しい色でも、別の色を組み合わせると途端に汚い色に見えちゃったり、逆に一見するとみすぼらしい色に見えても、別の色と組み合わせるとすごく美しい組み合わせに見えることもあります。 そして、色の相性や色に対するセン
RGBとCMYKのカラーセオリーの「いろは」を一枚にまとめたチートシート
RGB用の配色パターン CMYKはシアン、マゼンダ、イエロー、ブラックの四色から構成されたカラーモデルで、紙ベースの印刷・DTPで使用されています。 RGBはレッド、グリーン、ブルーの三色から構成されたカラーモデルで、モニターベースのウェブやデジタルカメラで使用されています。 色の作り方は、CYMKは白から始まって引き算を行い、RGBは黒から始まって加算するものです。 カラーセオリーからカラースキームを簡単作成 ウェブ用にカラーセオリーを元に、簡単にカラースキームを作成できるオンラインサービスもあります。 セオリーに基づいたカラースキームが設計できるオンラインサービス
オリジナルのカラースキームが作成できるHSVコンバーター -yafla
yaflaは、選択した色をHSV変換し、カラースキームが作成できるオンライン カラー コンバーターです。 下のキャプチャ画像は、当サイトのカラースキームを「yafla」で再現したものです。 yafla 選択した色は10色がストックでき、それぞれ色相(Hue)・彩度(Saturation)・明度(Value)を表示します。 色相には、4つの配色が利用されています。 Triad Color Schemes 色相環の三等分した際の配色。 Analogous Color Schemes 色相環の隣接している配色。 Complementary Color Schemes 色相環の反対色。 Split Complementary Color Schemes 色相環の隣接色と反対色とその隣接色。
デザインで色の組み合わせを決めるのに役立つ便利なオンラインツールのまとめ
一つのカラーを元にそれにあったカラーパレットやグラデーションを作成したり、トレンドカラーを使った配色サンプル、アクセシビリティガイドラインに沿ったカラーパレットなど、配色設計に役立つオンラインツールを紹介します。 Coolors オススメの組み合わせを次々に表示してくれるオンラインサービス。 スペースキーor右のアイコンでランダムカラー、ロックでカラー固定、さまざまなファイル形式にエクスポートもできます。
あなたは4色型色覚の持ち主か？4色型色覚チェックテスト
さて上の画像を見てほしい。3つの円が同じ色の点で満たされて見えるのなら、人間の一般的な色覚と言われている”3色型色覚”の持ち主だ。だが、円の中に異なる色の文字が見えるなど、ちょっと違う見え方をしているのなら特別な才能の持ち主かもしれない。あなたは普通の人より色が多く見える、”4色型色覚”の可能性がある。 4色型色覚の潜在的な保有者は2、3人しか見つかっていないと言われている。 人間の網膜には3色の光受容細胞がある。これは赤、緑、青の”錐体細胞”と呼ばれる。つまり人間は通常は3色型色覚を持っているのだ。錐体細胞の各”フレーバー”は特定の範囲の色のスペクトルに反応する。普段色を認識したとき、それは複数の錐体細胞からの信号の組み合わせの結果だ。 例えば、”オレンジ色”が見えたなら、緑錐体細胞からの中程度の信号と赤錐体細胞からの強い信号の結果である。そして、緑錐体細胞と赤錐体細胞が送る信号の強度の
「ドキュメントデザイン」で最も重要な50のルールをまとめた「Color CRAYON-TIP Method」
グラフィックデザイナーがドキュメントをデザインするにあたって特に重要な要素を「Color(カラー)」「Contrast(コントラスト)」「Repetition(反復)」「Arrangement(アレンジ)」「Why(なぜ)」「Organization(組織化)」「Negative Space(ネガティブスペース)」「Typography(タイポグラフィ)」「Iconography(図像学)」「Photography(フォトグラフィ)」という10のカテゴリに分類し、各カテゴリに5つずつ、全部で50のルールを盛り込んだインフォグラフィックが「Color CRAYON-TIP」です。 The 50 Most Important Rules of Document Design: Color CRAYON-TIP Method http://thevisualcommunicationguy.co
Webデザイナーはチェックしておきたい、最近のUIデザインで注目されているカラーのまとめ（スウォッチ付き）
有名ブランドで採用されているカラーをはじめ、Material DesignやiOS 8で採用されている落ち着いたパステル、同一色相の美しいグラデーションなど。 最近注目されているカラーをまとめたPhotoshopのスウォッチを紹介します。Illustrator用のもいくつかあります。 Color palette -Material Design 2015年、多くのWebデザイナーが注目しているMaterial Designで使用されているPhotoshopとIllsutrator用のスウォッチファイル。フラットなカラーと同一色相のグラデが特徴的です。
あのドレスはなぜ色が変わる？ ついに科学で判明
あのドレスはなぜ色が変わる？ ついに科学で判明2015.03.05 18:0024,083 satomi 白金と青黒で意見が真っ二つだった例の糞忌々しいドレス。実物は青黒とわかってからも、写真では未だに白金に見える派と青黒に見える派で真っ二つで、ついには｢見てる目の前で色が変わる｣症状を訴える人まで出ているようなので、一応、視覚の専門家の所見を補足しておきますね。 フォトショップ解析 Deadspinが行なったフォトショップ解析では、写真のドレスの色は青黒茶（大訂正！）とわかっています。が、面白いことに、色を反転させると…。 This is the dress on the left and inverted on the right #whiteandgoldpic.twitter.com/ZSAIntJotH — Professor Chris (@DesignedByTitan) F
CSSで泥沼にはまらない3つのアプローチ｜『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント
注釈 60分のセミナー用のスライドです 60分間ひたすらしゃべるための資料なので、目次はありません セミナーのフォローアップのために公開しています 文字が大きいのは、会場の後ろの席でも見えるようにするためです Cascading Style Sheets .header { margin: 8px; color: #f00; } マジックナンバーの良くない例 .main { float: left; width: 640px; } .main h1 { width: 640px; } .main p { width: 640px; } .main ul li { width: 620px; margin-left: 20px; } 数値が乱立 .aaa { width: 640px; } .bbb { width: 324px; } .ccc { width: 216px; } .ddd
青と黒？ 白と金？ ドレスの色論争に専門家も注目
（ＣＮＮ） 「青と黒にしか見えない」「いや、白と金だ」――ドレスの画像を巡りインターネット上で巻き起こった議論に、専門家からも注目が集まっている。 発端はネットに掲載された１枚のドレス。人によって色の見え方が真っ二つに分かれると、世界中で話題になった。 どうして同じドレスが青と黒に見えたり、白と金に見えたりするのか。ペンシルベニア州フィラデルフィアにあるウィリス眼科病院のジュリア・ホーラー博士は「食べ物の好き嫌いと同じような、個人差の問題」と指摘する。 私たちは目の奥の網膜にある錐体（すいたい）という神経細胞で色を感じている。錐体細胞はスペクトル感度の違う３種類があり、その反応の微妙な割合によって見える色が決まる。「９９％のケースではだれにも同じ色が見える。しかしこのドレスは、ちょうど混乱が起きやすい配合になっているようだ」と、同博士は話す。 アリゾナ州スコッツデールでは２月２７日、網膜の
【画像】 このドレス、「青と黒」もしくは「白と金」に見える人がいるらしい : 痛いニュース(ﾉ∀`)
【画像】 このドレス、「青と黒」もしくは「白と金」に見える人がいるらしい 1 名前： 栓抜き攻撃(大阪府)＠＼(^o^)／：2015/02/27(金) 14:50:23.53 ID:AADQ2N7b0.net このドレスが白と金に見えるか青と黒に見えるか、海外でものすごくバズってるんだけど、元ネタはどこなの？ちなみに私は暗いところで撮影した白と金に見えます。 https://twitter.com/romanticaugogo/status/571134180026773504 6: レインメーカー(愛知県)＠＼(^o^)／ 2015/02/27(金) 14:53:52.81 ID:PO2Amm2E0.net 白金 8: バックドロップホールド(庭)＠＼(^o^)／ 2015/02/27(金) 14:54:17.94 ID:QJi6Z0Cy0.net どうみても青黒だろ 10: パイルドラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEB COLOR 216
kuler
Color Hunter
エンジニアのためのUIデザイン
Material Design
