配色が苦手な人でもプレビューを見ながら直感的に使える配色ツール5つ
配色が苦手な人でもプレビューを見ながら直感的に使える配色ツール5つ配色って奥が深いです。「この色いいな！」と思っても、実際にデザインに適用してみるとなんだかイメージと違ったり。このブログでも過去に「カテゴリー別配色アイデア100」という記事で配色例を紹介しましたが、その配色を見たときと使ってみたときとではまた異なる印象になるかもしれません。そこで今回はプレビュー画面で確認しながら配色を作成できるツールを集めてみました！ カテゴリー別配色アイデア 100 ウェブ配色ツール Ver2.0ウェブ配色ツール Ver2.0はテーマカラーを一色選べば、それにあった配色を提案してくれる配色ツールです。以前「配色に自信がなくても！Web デザインが好きになる配色ツールと使い方」という記事でも使い方を紹介しました。制作者が日本人ということもあり、日本語でプレビューできるところや、アプリではなく Web サイ
ウェブ配色ツールの決定版「UIPalette」もう色選びに迷わない！ - 宇宙新聞社
2015-11-28 ウェブ配色ツールの決定版「UIPalette」もう色選びに迷わない！ http://www.uipalette.net/ ブログをカスタマイズするとき色選びに苦労していませんか？ 今回は人気の配色ツールをまとめたUIPaletteを使ってみたのでご紹介します。色選びはUIPaletteを使って作業時間をぐんと削減しましょう！ UIPalette UIPaletteは左のメニューに用意された11個の配色ツールを自由に選んで利用できます。 BrandColors BrandColorsは海外企業のイメージカラーがまとめられた配色ツール。 ベースカラーを決定しないことには始まらないので、まずはここを参考にしてみましょう。配色パターンを丸ごと使うと企業イメージと被るので注意が必要です。 Paletton Palettonはベースカラーに合わせた配色パターンを表示してくれます。
デザインで色の組み合わせを決めるのに役立つ便利なオンラインツールのまとめ
一つのカラーを元にそれにあったカラーパレットやグラデーションを作成したり、トレンドカラーを使った配色サンプル、アクセシビリティガイドラインに沿ったカラーパレットなど、配色設計に役立つオンラインツールを紹介します。 Coolors オススメの組み合わせを次々に表示してくれるオンラインサービス。 スペースキーor右のアイコンでランダムカラー、ロックでカラー固定、さまざまなファイル形式にエクスポートもできます。
Paletta - HSV Color Palette for Every Programmer
Palettaは顕色系 (色相, 明度, 彩度) をベースに「調和のとれた色」だけを集めたカラーパレットです. 色を選択すると, 周囲の色が同系統の色に変わります. 画面上部のResetボタンを押すと, 色の選択が解除されます. カラーコードをクリックするだけでコードをクリップボードへ簡単にコピーできます. 詳しく
PCCSのSCSSでの使用: VCware Web Pattern Language
・・・VCwareがWEBサイト（やフライヤー、その他印刷物など）の「デザイン」を行うさい、「配色」（カラーコーディネート）には、原則としてPCCS（日本色研配色体系）を用いる。 これは簡便のためである。 「色彩調和」（カラーハーモニー）技術のあらゆる手法を適用することができ、あらかじめマッチするように体系化されているのがPCCSである。 まさにカラーハーモニーのために体系化された色彩体系であるため、間違いが生じにくい。 VCwareではCSSの記述にSCSS記法を用いるため、この項目はもっとも重要である。 もちろんクライアントの要望に応じてベースカラー、アソートカラー、アクセントカラーは決定されるべきであり、そのさいには体系で定義された値のズラシが必要となる。その場合でも、簡易的にPCCSにおける近似値で配色をしておき、ある程度コンセプトが固まった段階で、新たな色彩体系のSCSS変数ファ
Sassで基本的なカラースキームを生成する
最近は配色を決めるときに、ColorHexaを参考によく使っているのですが、CSS書く時にいちいちコピペするのが面倒なのでSassの変数にまとめています。 必要なものだけここからコピペして、分かりやすい名前の変数に入れたりして使っています。 被ってる部分は実際にはいちいち指定してません。こういう配色だと分かりやすくするために念のため書いています。 // 基本とする色 $color-base: #0088cc; // 色相回転の基準角度 $hue-step: 30deg; // 補色 $color-complementary: adjust-hue($color-base, 180deg); // Analogous $color-analogous-primary: $color-base; $color-analogous-secondary-A: adjust-hue($color-b
この春、デザインやファッションに使いたい10色 -2013年春のトレンドカラー
まだまだ寒い日が続きますが、日も少しずつ長くなり、春の気配を感じますね。 pantoneがセレクションした2013年春のトレンドカラーを紹介します。 Spring 2013 Fashion Color Trends - Pantone Fashion Color Report この春、グリーンのトレンドは否定できないでしょう。 グリーンは他のすべてのカラーの前景でも背景でも完璧に役割を果たします。今年のトレンドカラーでもあるEmeraldは、グリーンの中でも洗練された鮮やかでクリアです。Grayed Jadeはグレーを少しいれた色合いで静か・休息のムードを引き起こします。Tender Shootsは柔らかい新芽の色合いで春の到来をイメージさせ、さわやかで朗らかです。
2013年のテーマカラーはエメラルド - Pantone Color of the Year 2013 -
色見本で有名なPANTONEが毎年発表する今年のテーマカラー。 ファッションやプロダクト、ウェブなどの分野でも毎年一定の影響力を持っています。 あけまあしておめでとうございます！ということで今年もご紹介いたします。 2013年のテーマからは明るく光り輝くみずみずしい緑のエメラルドだそうです。 （昨年は情熱的なオレンジのタンジェリンタンゴでしたよ） 人間が自然界で最も目にする色相でもある緑。 そして、透明、再会、若返りという言葉を表すエメラルド。 ファッションやインテリアなど色でお悩みの際にはこれを機に取り入れてみてはいかがでしょうか？ ということで、サイト右側のtwitterのバナーもPANTONEのエメラルドに変えました！（これも毎年恒例） 今年もよろしくお願いいたします！ via: Emerald - Pantone Color of the Year 2013: - Color tr
カラーツール「0to255」で色を決めてメニューを作ってみる
このブログで何回か紹介している0to255というオンラインツールですが、かなり便利だと思うので使い方を説明してみます。 色に関する知識が乏しい私ですが、0to255を使うとまとまった感じの配色になるので重宝しています。今回は0to255を使ってメニューを作る際の色選びをしてみます。 0to255の使い方 まず、0to255の使い方についてですが、下の画像のように「PICK A COLOR」をクリックしてカラーコードを入力します。 今回は「#ff7400」を指定してみます。 すると、指定した色より明るい色と暗い色がグラデーションになってたくさん表示されます。近い色がたくさん表示されますので、これらをうまく使うとまとまった感じのメニューが作れます。 メニューの配色を決める ということで、以下のような配色でメニューを作ってみます。 メニュー背景のグラデーションと境界線の1pxラインに使う色を選ん
Webデザイナーによるカラーコードを使った便利なテクニックあれこれ
By OliBac コンピュータが色に名前を付ける時、数字やアルファベットを6つ並べた1677万7216通りの組み合わせで表される16進数カラーコードが使われます。カラーコードは他のコンピュータ言語と同じく論理的なシステムに基づいて作られるため、Webデザインを行う人間にとって16進数カラーコードを知っておくことは非常に助けになるとして、WebデザイナーのBen Gremillionさんがカラーコードの仕組みや便利なテクニックをまとめているのが「The Code Side Of Color」です。 The Code Side Of Color | Smashing Coding http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/ そもそもスクリーン上のカラーは指定がない場合は黒いままで、16進数カラーコ
[ HUE / 360 ] The Color Scheme Application
Circle Controller HUE/360 Ver.0.1.3 © 2012 SAUCER.JP
CSS3で表示する画面の色作成支援ツール：日立のユニバーサルデザイン
クリックするとご利用いただけます（別ウィンドウで開きます）。ただし、SVGフィルターなどの最新技術を活用しているため、想定通り動作することが確認できているFirefox12以降でなければ動作しないようにしています（2012年7月現在）。Firefox以外で本ページをご覧の方は、下記URLをFirefoxで開いてください。 http://www.hitachi.co.jp/universaldesign/products/business/assistance_for_color_generation/product.html 概要 無償でお試しいただくことが可能な、CSS3で開発するWeb画面の色と形の作成を支援するツールです。主な特徴は以下の通りです。利用前に、利用上の注意をお読みください。 作成した色と形を登録すると、次にブラウザを立ち上げたときも利用可能です（注意事項）。 作成した色
配色の基本。メイン・サブ・アクセントカラーを極める！
前回の[カラーデザインの基本。トーンを理解する！]と[カラーデザインの基本。色の三属性とは？]に引き続き、今回はメインカラー・サブカラー・アクセントカラーの基本ルールについて解説させていただきます。このメイン・サブ・アクセントカラーの基本ルール正しく理解すると、配色を考えるのが簡単になります。 頻繁に配色を悩む方や、デザインの途中で配色を変えてしまう方は、このメインカラー・サブカラー・アクセントカラーのルールを正しく理解できていない可能性があります。なので今回解説するこの記事を読んで、配色についての理解を深めましょう！(偉そうに書いちゃいました。すみません) ちなみに配色という言葉を辞書で引くと、『2つ以上の色を組合わせること。また、組合わせた色合いのこと』と書いてあります。 メイン・サブ・アクセントカラーの役割 まずは、メインカラー・サブカラー・アクセントカラーと呼ばれる、各要素の役割に
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
色彩センスのいらない配色講座～色は理論的に説明できる～ : まりっぺぶろぐ
6/30に BP studyという勉強会で発表した時の資料を今頃掲載します。 しすてむえんじにあ的な方ばかりの勉強会でデザインについて何かしゃべることになったので、なるべく誰にでもわかる話にしようと思って、色の超基礎について話すことにしました。 著作権的にアレな部分を修正したので、発表時の資料とは若干違います。トーン表は、1から作るのは30秒くらいで諦めたので、日本色研さんから拝借したままです。怒られたら本気出す。 私がこれらの色の知識をどう身につけたか について、簡単に3点ほど書きます。ほんとに基礎の基礎なので、知識ってほど大層なものでもないですが。 (1)美大受験用予備校で習った 美大受験用予備校では、一番最初にこういう色の基礎について教えてくれます。色の基礎を教えた上で、講師は生徒に「お前は原色使いすぎ。もっと濁った色を使ってバランス取ることを覚えろ。」という風に指導してきます。 色
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://handywebdesign.net/2013/12/slide-share-about-color/
ウェブサイト作成の勉強になった日本語スライドのまとめ
ノンデザイナーのための配色理論
文字色が#333のときに背景色として使える色90色のまとめ | ユーザー投稿 | Web担当者Forum
色彩センスのいらない配色講座
