配色に自信がなくても！Webデザインが好きになる配色ツールと使い方
2016年12月13日 Webデザイン, 便利ツール, 色彩 以前書いた記事「配色パターンからWebデザインを考える」を見た方から「いい配色だなーと思ってもうまく使いこなせない」という意見をいくつか頂きました。確かにすてきな配色をどうデザインに取り込んでいいのか、というのは難しいところです。今回は簡単に配色を提案してくれるオンラインツール「ウェブ配色ツール Ver2.0」を使って配色をWebデザインに取り込む方法を紹介します。 ↑私が10年以上利用している会計ソフト！ ウェブ配色ツールを使った基本的な配色方法 まずこの「ウェブ配色ツール Ver2.0」について。テーマカラーを一色選べば、それにあった配色を提案してくれる配色ツールです。Webサイトのプレビューを見ながら配色の調整ができるので、初心者さんにもおすすめです！ オレンジを元に色相差0°で配色した例。色相差を0°にすると同系色（＝同
ウェブ配色ツール Ver2.0
基本的な使い方 左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています（ただしフォントは変更出来ません）。 カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。 色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。 この配色ツールについて この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。 取材・執筆等のお申し込み このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥ
CSS Gradient Editor
Credits This little program makes use of JQuery, JQuery UI, and Farbtastic, and was written by Bart Kelsey. The code contained herein (just view the HTML source!) is available under the terms of the GNU Affero Public License version 3.0. Shameless plug: If you'd like to see more of my work, can check out my website, OpenGameArt.org. ;)
コンプレックス配色をうまく使った、素敵なWebデザイン例
様々な配色の中でも個人的に 気に入っているのがコンプレッ クス配色という配色です。自然 の中ではあまり見られない配色 で都会的なイメージや見る人に 印象を与えるのに大きく貢献して くれます。 様々な配色の中でも個人的に 気に入っているのがコンプレッ クス配色という配色です。自然 の中ではあまり見られない配色 で都会的なイメージや見る人に 印象を与えるのに大きく貢献して くれます。 不調和ゆえのの調和配色と言われるコンプレックス配色を利用したWebデザイン例。個人的に必要になりそうなのでメモとして残します。コンプレックス配色に関しては以前記事にしましたので宜しければ合わせてご覧下さい。 The English Network グレーに、やや紫がかったレッドカラーが印象的です。統一感もあって見やすい。 The English Network globaltradeqatar こちらもレッド&グ
クレヨンの色歴史 それにコンピューターグラフィックスを当てはめてみると？
クレヨンの色歴史 それにコンピューターグラフィックスを当てはめてみると？2010.01.27 10:00 クレヨンの色歴史の図だけでも楽しい。 Crayola社のクレヨン。1903年発売の8色から2010年現在120色までの色歴史。なんと、107年かけて112色が追加されています。 さて全く関係ないっちゃないですが、この流れをコンピューターグラフィックスに当てはめてみると？ 1981年開発のColor Graphics Adapter (CGA) をスタートとして、CGAは320×200ピクセル4色のカラーモード。黒／シアン／マゼンタ／白、または黒／赤／茶／緑。そしてEGAで16色に。 クレヨン歴史にあてはめると16色は2037年に実現。そして2149年にVGAで320x200ピクセル256色。2373年でやっと16ビットカラーモードで65,536の色合いが。現在の24ビットRGBの16,
最適なテキストリンクの色は？ | ウェブ力学
青系統の色が使われていることに変わりはありませんが、検索エンジン以上にバラつきが見られます。特に、Yahoo!の場合は、各ジャンルごとのページでも微妙にテキストリンクの色が変わっていました。それぞれのサイトデザインの特徴に合わせて変化させているのだろうと思います。 楽天のようにデフォルト色を使用しているサイトもありましたが、全体からすると少数派のようです。 Q&Aサイトの最大手OKWaveはGoogleと同一でした。また、ユーザビリティといえばビービットさん、ということで調べてみましたが、やや暗めの青を使用していました。ビービットさんのことなので何か意味があるのかもしれません。 クックパッド クックパッドは、日本最大級のレシピ検索のサイトです。ユーザービリティには細心の注意を払っていて、ユーザー一人当たりの平均PVが高いことでも知られています。 そんなクックパッドですが、サイトをのぞいてみ
配色センスに自信がなくても綺麗なサイトをつくる方法 | nanapi[ナナピ]
配色センスに自信がなくても綺麗なサイトをつくる方法 に関するライフレシピをご紹介します。nanapi [ナナピ]は、みんなで作る暮らしのレシピサイトです。配色はセンスではない！ よく「私は色のセンスがないから…」などという言葉を聞きますが、 配色には基本となるセオリーがあり、知識として学ぶことができるものなのです。 よりよいWebデザインにするための配色のセオリー http://sweetlovexx.seesaa.net/article/90107619.html こちらにもいろいろ参考になる情報が盛りだくさんです。 書籍もいろいろあるのでamazonなどで検索してみてはいかがでしょうか。 「でも勉強とか面倒じゃないですか」 というひとでも大丈夫。 以下のサイトを使えば、なんとなくそれとなくカッコいい配色が手に入ります。 Color Scheme Designer 3 http:/
【配色 - デザイン ★★★★★】 - Color Scheme Designer 3
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty
0to255
Hex code RGB functional notation HSL functional notation Distance from base color HSL lightness value Click to copy Pre-orders now open! Color Studio transforms 0to255 into a comprehensive color tool that's ultra-efficient, inspiring to use, and delightfully unique. Available Spring 2024. Read the announcement Pre-order Color Studio 1 year at $2/month + 3 months free “A near perfect color picker”
デザイナーのためのカラーセオリー – creamu
色が人に与える効果について知っておきたい。 そんなときにおすすめなのが、『Color Theory for Designers, Part 1: The Meaning of Color』。デザイナーのためのカラーセオリーです。 暖色、寒色、無彩色などの12色について、色が与える効果と、その色がうまく使われているWebサイトが紹介されています。 まとめとして、以下のように挙げられていますね。 赤 情熱、愛、怒り オレンジ エネルギー、幸福、活力 黄色 幸福、希望、偽り 緑 新しい始まり、豊富、自然 青 穏やかさ、責任、悲しみ 紫 創造性、貴さ、富 黒 神秘、エレガンス、悪 グレー 気難しさ、保守的、堅苦しい 白 純粋、清潔、美徳 茶色 自然、健康、信頼 黄褐色・ベージュ 保守的、敬虔、さえない クリーム色・アイボリー 穏やかさ、優美、潔白 色は視覚言語で、人にどういった影響を与えるかがわか
Webデザインにおける白の使い方 – creamu
Desizn Techというサイトで、Webデザインにおける白の使い方が紹介されています。 What comes to your mind when you think of the color white? White is the most simple, elegant and peaceful color. Use of white color in web design is seen in many blog, online portfolio, e-commerce and many more sites. White is used for font color, background color, link, images and many more. Although, if you might think white color website is not that
WEB制作者なら最低限知っておくべき色彩心理とWEBセーフカラー、WEBセーフカラーを出力するRubyコード - 久保清隆のブログ
色彩は、Webサイトが どのように際立つか ユーザの目にとまるか ユーザーにどのような感情を芽生えさせるか ユーザがどんな動作をするか に大きな影響を与える。 ユーザの属性に合わせて適切な色彩を使うことは、売上を増大させたり、滞在時間を長くしたり、直帰率を下げることにつながる。 また、Webサイトだけでなく、 ファッション インテリア エクステリア(住まいの外観) 広告、商品 などにも使えるので、汎用性のある知識だと思う。 色彩心理 色 プラスの心理的影響 マイナスの心理的影響 赤 情熱的 活動的 晴れやか 暖かい 元気の良い 購買欲求 安っぽい 派手 危険 暴力 青 さわやか 清らか 清涼感 すっきり クール 閑静 憂鬱 寂しい 冷淡 未熟 無機質 黄 若々しい 陽気 明るい 楽しい うるさい 目立つ 幼稚 警戒 緑 ナチュラル 新鮮 穏やか すがすがしい 毒 田舎 疲れ 未熟 紫 高貴
画像から色を抽出し、カラーパレットを作成！ | ライフハッカー・ジャパン
「Colors Palette Generator」は色鮮やかな写真から色を抽出し、カラーパレットを作成してくれるWebツール。Webサイト作成時やデザインプロジェクトには欠かせないアイテムになりそうな予感です。 これよりもシンプルな「Colr」を紹介したことがありましたが、そちらと同様に選択したイメージをプロジェクト用にカラースキームにすることが可能。png、gif、jpegなど1MB以下のサイズであればどんな画像でもアップロードできます。アップロードが済むと「Color Palette Generator」はそこから色を抽出。さらに色はライト、ミディアム、ダークの3種類のパレットに分類されるのです。もし自動作成されたパレットで満足できない場合は49シェードのグリッドに分類することも可能です。使いやすい状態になったならそれをPhotoshopへインポートするなり、CSSスタイルシートとし
ASCII.jp：もう配色には困らない！「Adobe Kuler」
「オリジナルのWebデザインをしたいけど、いまいち配色センスがなくて困る」「いつも好きな（得意な）色の組み合わせばかりでデザインしてしまう」「でも色彩理論を勉強するのは面倒だ」。 そんな人にぜひおすすめしたいのが、アドビ システムズが提供しているオンラインサービス「Adobe Kuler」（クーラー）だ。Kulerは、さまざまな色の組み合わせ（配色パターン、Kulerでは「テーマ」と呼ぶ）をWebブラウザー上で作成し、保存・公開もできる、ちょっと変わったサービス。いわば“みんなの力”で作られたカラーチャート集ともいえるもので、すでに7000種類以上（2009年1月現在）ものテーマが公開されている。利用料は無料だが、保存などの機能を使うにはAdobe IDが必要だ（以降の説明はログインしているものとして進める）。
デザインやファッションに取り入れたい、2009年のトレンドカラー
Pantone Selects Color of the Year for 2009 ミモザの花言葉は、「豊かな感受性」。 満開のミモザの花は素晴らしいきらめきをはなち、晴れやかであふれる希望をイメージさせます。 ミモザは、女性のアクセサリー、家具、スポーツウェア、男性のタイやシャツなどに輝きを与えます。インテリアにもマッチし、朗らかで暖かさも演出するでしょう。 Pantone: fashion color spring 2009 続いて、2009年春のトレンドカラーです。 pantone fashion color report spring 2009 2009年春のトレンドカラーは、新芽の息吹や開花を表現したもの。「新しい始まり」を予感させます。 サイトでは、2009年春のトレンドカラーの各色のイラストや説明があるPDFが配布されています。
浮世絵に学ぶ日本の伝統色と配色 | *LOVE IS DESIGN*
配色の参考になる色のランキングサイト COLOURlovers に、海外の名画のカラーパレットがありました。 Color Inspiration from the Masters of Painting そこで、世界の画家たちにも大きな影響を与えた、日本を代表する「浮世絵」からカラーパレットを作ってみました。 ■三世大谷鬼次の奴絵江戸兵衛（東洲斎写楽） ■鳳凰図屏風（葛飾北斎） ■江戸名所 浅草金龍山（歌川広重） ■ 亀戸梅屋舗（歌川広重） ゴッホが模写したことでも有名な絵 参考：印象派と浮世絵の意外な関係 ■春画（渓斎英泉）【オマケ】 ちょっぴりセクシーな配色？ 浮世絵とは、江戸時代に発達した版画絵で当時人気のあった歌舞伎役者や風景など、その時代の様々な風俗が描かれています。 「役者色」と呼ばれた人気歌舞伎役者が愛用した染物や色は、江戸時代の流行色で、役者の屋号や名前がそのまま色の名前に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
kuler
いろいろな色の名前が分かるサイト色々
同一色相配色のWebデザイン50 – creamu
http://e0166nt.com/blog-entry-97.html
