Deprecated: The each() function is deprecated. This message will be suppressed on further calls in /home/zhenxiangba/zhenxiangba.com/public_html/phproxy-improved-master/index.php on line 456
[B! color] hazy-moonのブックマーク
[go: Go Back, main page]

タグ

colorに関するhazy-moonのブックマーク (35)

  • 配色が苦手な人でもプレビューを見ながら直感的に使える配色ツール5つ

    配色が苦手な人でもプレビューを見ながら直感的に使える配色ツール5つ配色って奥が深いです。「この色いいな!」と思っても、実際にデザインに適用してみるとなんだかイメージと違ったり。このブログでも過去に「カテゴリー別配色アイデア100」という記事で配色例を紹介しましたが、その配色を見たときと使ってみたときとではまた異なる印象になるかもしれません。そこで今回はプレビュー画面で確認しながら配色を作成できるツールを集めてみました! カテゴリー別配色アイデア 100 ウェブ配色ツール Ver2.0ウェブ配色ツール Ver2.0はテーマカラーを一色選べば、それにあった配色を提案してくれる配色ツールです。以前「配色に自信がなくても!Web デザインが好きになる配色ツールと使い方」という記事でも使い方を紹介しました。制作者が日人ということもあり、日語でプレビューできるところや、アプリではなく Web サイ

    配色が苦手な人でもプレビューを見ながら直感的に使える配色ツール5つ
  • ウェブ配色ツールの決定版「UIPalette」もう色選びに迷わない! - 宇宙新聞社

    2015-11-28 ウェブ配色ツールの決定版「UIPalette」もう色選びに迷わない! http://www.uipalette.net/ ブログをカスタマイズするとき色選びに苦労していませんか? 今回は人気の配色ツールをまとめたUIPaletteを使ってみたのでご紹介します。色選びはUIPaletteを使って作業時間をぐんと削減しましょう! UIPalette UIPaletteは左のメニューに用意された11個の配色ツールを自由に選んで利用できます。 BrandColors BrandColorsは海外企業のイメージカラーがまとめられた配色ツール。 ベースカラーを決定しないことには始まらないので、まずはここを参考にしてみましょう。配色パターンを丸ごと使うと企業イメージと被るので注意が必要です。 Paletton Palettonはベースカラーに合わせた配色パターンを表示してくれます。

    ウェブ配色ツールの決定版「UIPalette」もう色選びに迷わない! - 宇宙新聞社
  • デザインで色の組み合わせを決めるのに役立つ便利なオンラインツールのまとめ

    一つのカラーを元にそれにあったカラーパレットやグラデーションを作成したり、トレンドカラーを使った配色サンプル、アクセシビリティガイドラインに沿ったカラーパレットなど、配色設計に役立つオンラインツールを紹介します。 Coolors オススメの組み合わせを次々に表示してくれるオンラインサービス。 スペースキーor右のアイコンでランダムカラー、ロックでカラー固定、さまざまなファイル形式にエクスポートもできます。

    デザインで色の組み合わせを決めるのに役立つ便利なオンラインツールのまとめ
  • http://handywebdesign.net/2013/12/slide-share-about-color/

    http://handywebdesign.net/2013/12/slide-share-about-color/
  • 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

    Sassで基本的なカラースキームを生成する
  • この春、デザインやファッションに使いたい10色 -2013年春のトレンドカラー

    まだまだ寒い日が続きますが、日も少しずつ長くなり、春の気配を感じますね。 pantoneがセレクションした2013年春のトレンドカラーを紹介します。 Spring 2013 Fashion Color Trends - Pantone Fashion Color Report この春、グリーンのトレンドは否定できないでしょう。 グリーンは他のすべてのカラーの前景でも背景でも完璧に役割を果たします。今年のトレンドカラーでもあるEmeraldは、グリーンの中でも洗練された鮮やかでクリアです。Grayed Jadeはグレーを少しいれた色合いで静か・休息のムードを引き起こします。Tender Shootsは柔らかい新芽の色合いで春の到来をイメージさせ、さわやかで朗らかです。

  • ウェブサイト作成の勉強になった日本語スライドのまとめ

    ウェブサイト作成に役立ちそうなスライドって結構たくさんあるなと今さら気付きました。ということで色んなスライドを見ましたので個人的に勉強になったものを紹介します。有名なものも多いですがお役に立てばうれしいです。 それでは基的な内容から順番に10個紹介していきます。他にもたくさんあったのですが同じものばかりだと無駄に長くなるので個人的に気に入ったものを選んでます。 Webデザインのセオリーを学ぼう デザインとは何かということから、レイアウト、配色、フォントなどウェブデザインのセオリーが幅広く説明されています。製作の流れなんかはウェブ関係の仕事をしたことがない私にとって非常に新鮮でした。

    ウェブサイト作成の勉強になった日本語スライドのまとめ
  • 2013年のテーマカラーはエメラルド - Pantone Color of the Year 2013 -

    色見で有名なPANTONEが毎年発表する今年のテーマカラー。 ファッションやプロダクト、ウェブなどの分野でも毎年一定の影響力を持っています。 あけまあしておめでとうございます!ということで今年もご紹介いたします。 2013年のテーマからは明るく光り輝くみずみずしい緑のエメラルドだそうです。 (昨年は情熱的なオレンジのタンジェリンタンゴでしたよ) 人間が自然界で最も目にする色相でもある緑。 そして、透明、再会、若返りという言葉を表すエメラルド。 ファッションやインテリアなど色でお悩みの際にはこれを機に取り入れてみてはいかがでしょうか? ということで、サイト右側のtwitterのバナーもPANTONEのエメラルドに変えました!(これも毎年恒例) 今年もよろしくお願いいたします! via: Emerald - Pantone Color of the Year 2013: - Color tr

    2013年のテーマカラーはエメラルド - Pantone Color of the Year 2013 -
    hazy-moon
    hazy-moon 2013/01/06
    子供の頃すきだったなー
  • カラーツール「0to255」で色を決めてメニューを作ってみる

    このブログで何回か紹介している0to255というオンラインツールですが、かなり便利だと思うので使い方を説明してみます。 色に関する知識が乏しい私ですが、0to255を使うとまとまった感じの配色になるので重宝しています。今回は0to255を使ってメニューを作る際の色選びをしてみます。 0to255の使い方 まず、0to255の使い方についてですが、下の画像のように「PICK A COLOR」をクリックしてカラーコードを入力します。 今回は「#ff7400」を指定してみます。 すると、指定した色より明るい色と暗い色がグラデーションになってたくさん表示されます。近い色がたくさん表示されますので、これらをうまく使うとまとまった感じのメニューが作れます。 メニューの配色を決める ということで、以下のような配色でメニューを作ってみます。 メニュー背景のグラデーションと境界線の1pxラインに使う色を選ん

    カラーツール「0to255」で色を決めてメニューを作ってみる
  • 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進数カラーコ

    Webデザイナーによるカラーコードを使った便利なテクニックあれこれ
  • [ HUE / 360 ] The Color Scheme Application

    Circle Controller HUE/360 Ver.0.1.3 © 2012 SAUCER.JP

  • ノンデザイナーのための配色理論

    「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、当のインサイトを見つけるUXデザインUXリサーチ

    ノンデザイナーのための配色理論
  • CSS3で表示する画面の色作成支援ツール:日立のユニバーサルデザイン

    クリックするとご利用いただけます(別ウィンドウで開きます)。ただし、SVGフィルターなどの最新技術を活用しているため、想定通り動作することが確認できているFirefox12以降でなければ動作しないようにしています(2012年7月現在)。Firefox以外でページをご覧の方は、下記URLをFirefoxで開いてください。 http://www.hitachi.co.jp/universaldesign/products/business/assistance_for_color_generation/product.html 概要 無償でお試しいただくことが可能な、CSS3で開発するWeb画面の色と形の作成を支援するツールです。主な特徴は以下の通りです。利用前に、利用上の注意をお読みください。 作成した色と形を登録すると、次にブラウザを立ち上げたときも利用可能です(注意事項)。 作成した色

  • 文字色が#333のときに背景色として使える色90色のまとめ | Web担当者Forum

    1か月前に書いたコラムで、文字色が黒のときにアクセシビリティの視点から背景色として使えるWebセーフカラーについて紹介しました。 文字色が黒のときに背景色として使える色141色のまとめ(Web担当者Forum) http://web-tan.forum.impressrd.jp/u/2012/04/03/12500この記事にはたくさんの反響がありました。その中には「実際にウェブ制作で使われるのは#000ではなく#333や#666なので、こちらについても調べてほしい」というコメントもいただきました。 先天性の弱視である私自身、以前からウェブを使っている中で「この文字色はいわゆる真っ黒じゃなくて濃いグレーなんだな。なんでこういう色を使ってるんだろう。読みにくいなあ」と感じていました。そこで文字色が#333の時、アクセシビリティの視点から背景色として使えるWebセーフカラーについて調べることにし

    文字色が#333のときに背景色として使える色90色のまとめ | Web担当者Forum
  • 配色の基本。メイン・サブ・アクセントカラーを極める!

    前回の[カラーデザインの基。トーンを理解する!]と[カラーデザインの基。色の三属性とは?]に引き続き、今回はメインカラー・サブカラー・アクセントカラーの基ルールについて解説させていただきます。このメイン・サブ・アクセントカラーの基ルール正しく理解すると、配色を考えるのが簡単になります。 頻繁に配色を悩む方や、デザインの途中で配色を変えてしまう方は、このメインカラー・サブカラー・アクセントカラーのルールを正しく理解できていない可能性があります。なので今回解説するこの記事を読んで、配色についての理解を深めましょう!(偉そうに書いちゃいました。すみません) ちなみに配色という言葉を辞書で引くと、『2つ以上の色を組合わせること。また、組合わせた色合いのこと』と書いてあります。 メイン・サブ・アクセントカラーの役割 まずは、メインカラー・サブカラー・アクセントカラーと呼ばれる、各要素の役割に

    配色の基本。メイン・サブ・アクセントカラーを極める!
  • サービス終了のお知らせ - NAVER まとめ

    サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

  • 色彩センスのいらない配色講座~色は理論的に説明できる~ : まりっぺぶろぐ

    6/30に BP studyという勉強会で発表した時の資料を今頃掲載します。 しすてむえんじにあ的な方ばかりの勉強会でデザインについて何かしゃべることになったので、なるべく誰にでもわかる話にしようと思って、色の超基礎について話すことにしました。 著作権的にアレな部分を修正したので、発表時の資料とは若干違います。トーン表は、1から作るのは30秒くらいで諦めたので、日色研さんから拝借したままです。怒られたら気出す。 私がこれらの色の知識をどう身につけたか について、簡単に3点ほど書きます。ほんとに基礎の基礎なので、知識ってほど大層なものでもないですが。 (1)美大受験用予備校で習った 美大受験用予備校では、一番最初にこういう色の基礎について教えてくれます。色の基礎を教えた上で、講師は生徒に「お前は原色使いすぎ。もっと濁った色を使ってバランス取ることを覚えろ。」という風に指導してきます。 色

  • 色彩センスのいらない配色講座

    自己紹介 職業:デザイナー 物心ついたときには絵を描くのが好きだったそのままの勢いで某美大某デザイン科に進学 社会に出たらデザインの話が通じなさすぎて悶絶 そんな社会に対して、デザインの効果をりろんてきに説明して説得しようとしている marippe_

    色彩センスのいらない配色講座