目次  ゴマアレルギー: ゴマアレルギーと食品  コラム: 紅茶の話  整理収納コラム
育児: 保育園と小学生男児らの日常  保育園児兄弟の日常  キッズのおもちゃ  子供とおでかけ  赤ちゃんのママへ
仕事: 働く  家事: 生活用品  雑感・音楽: つぶやき&雑談  井戸端会議: かこ☆ランキング
ブログ考察・カスタマイズ・アフィリエイト: パソコン豆知識 Part1  パソコン豆知識 Part2  TKBブログ対談  ちょいコツ

WEB色見本を見て唸る


私は、パステルカラーが大好きです。


おーとえすさんからいただき調整した、
このブログのテンプレートも、
基本的には、パステルカラーでまとめてあります。


全部を薄いパステルカラーにすると
ぼやんとしてしまうので、ちょっと濃いめの四角で
アクセントをつけています。


このテンプレートのテーマカラー、
サイドバーにある、パステルグリーンは、
スタイルシートで、color: #9c8;
と指定してあります。


カラーコード6ケタで言うと、#99t88。
大好きな色なんですが、私は、思いました。


目の悪い人には、薄いんじゃない?
目が悪くなくっても、ちょっと見えにくいんじゃない?


ということで、さきほどから、
#7b5という少し濃い緑に変更してあります。
6ケタで言うと、#77bb55。


ちょっと、まだまだ唸る予定です。


私が好き、と、おしゃれ、と、誰にでも見やすい、と
言うのは、別問題ですが
そのへん何とか天秤にかけ、うまいところに
落ち着きたい、と思っています。


色のカスタマイズに関しては
スタイルシートの、color: #***;
っていうところの***を書き換えるだけなので
けっこう簡単です。


何が、どこの部分に該当するのかは
ちょっと考えなきゃいけませんけどね。


おすすめ色見本をお持ちの方、
ぜひ教えてください!


◆web216 webセーフカラー

◆CCIレンタル カラーコード

♪この記事のカテゴリ パソコン豆知識 Part1へ♪

トラックバック(受付を終了しました)


この記事へのコメント(受付を終了しました)

  ご連絡はココロデザイン、Twitterでどうぞ。

おおっカラーパレットと似たような感じですが、
さらに直感的に使いやすいかも!

ありがとうみかんさん。
かこ|2012年03月22日(木) 18:49
こんにちわ・
お役立てて良かったです。
色々なカラーのサイトはメモしてあるのですが 今日気付いたの。
Webカラー - カラーコード・カラーネーム
ここが テンプレート作りに以外と役に立つのでは・・
みかん|2012年03月22日(木) 18:31
SGLさん。なんて手慣れた感じの流れ。
そっかスポイトツールですか。

あー、やっぱりたくさん作ることも
大事なんだろうなぁ。
よし、まずはここをいじるぞ。
手の届くことから、自分なりに。

皆さんの知識を借りて、一晩でちょっと
かしこいちゃんに近づけた気がします。
ホントにありがとう!
かこ|2012年03月22日(木) 05:36
みかんさん。いいね。これ。
すごくシンプルで使い勝手がいい。

特に、カラーパレット。
こうやってどんどん試せるの、嬉しい。
好きな色も、面積が広くなると、
印象がかなり変わるから。
ありがとう!活用させてもらいます。
かこ|2012年03月22日(木) 05:21
おーとえすさん。
最初の色彩センスのいらない配色講座、すごく分かりやすいね。
その後、デザイン系記事も、そうでない記事も
どんどん読んでたら、どんどん時間が過ぎてしまったわ。
ありがとう♪また何度も読み返すと思います。
かこ|2012年03月22日(木) 05:15
inaliさん。すっごくありがとう。
文字色、薄いんじゃないかとは思ってたんだけど、
結果がこうやって見えると、はっきり分かるね。

WebInspesterで大量にイケてない項目が分かりました。
本文文字と、サイドの色抜き文字がまず問題。
ColorSelecter使って調整してみます。
かこ|2012年03月22日(木) 04:49
うわぉっ!みなさんありがとうございます☆
今、順にお試し中です。すっごく嬉しいです。
かこ|2012年03月22日(木) 02:18
こんにちわ。
色に関しては 私も迷います。
好きな色でも 背景にしたら ちょっとおかしい・・??
なんて事はしょっちゅうです。

カラーパレット

カラーコード作成マシーン

コード変換ツールは よく使うサイトです
みかん|2012年03月21日(水) 21:12
かこさん♪
いいものがあるのでぜひどうぞ

☆アクセシビリティの高い背景色と文字色の組み合わせをリアルタイムに確認することができるツールです
ColorSelector


☆JIS X 8341-3 高齢者・障害者等配慮設計指針など、目の弱い人にも優しいよ
WebInspector

さらに富士通のポリシーも入ったもの
富士通ウェブ・アクセシビリティ指針


アプリの動作にはjavaが必要なので、PCに入ってなければ入れてくださいね♪
かこさんのことだから入ってると思うけど…。

http://java.com/ja/

上記サイトからダウンロードしてください。
inali|2012年03月21日(水) 15:33
大体の絵とレイアウトを決めて絵にしてから、スポイトツールで色ピックアップして#値にして、そっから全体見て手直ししていきますよん☆
SGL|2012年03月20日(火) 22:03
なんかすごいツールが。。英語だし。。w
自分はほかにはあまりないですね。。

そういうのとは違いますが、
http://weboook.blog22.fc2.com/blog-entry-307.html
みたいな記事をお気に入りとか追加して、ちょくちょく読んだり、
http://coliss.com/articles/build-websites/operation/design/bright-color-web-design.html
みたいな記事を見て、色々なサイトも参考に見てみなきゃな〜って思ったりしてます。
まだ、ほとんど出来てないですけどね。。w
おーとえす|2012年03月20日(火) 21:59
そうだよねー。セーフカラーだけでやろうとすると
表現の幅がすっごく狭くなるもんね。

ああ、そっか。
ぶっちゃけ文字情報さえきちんと伝われば
後はオプションだから、万が一飛んじゃってもいいのか。
ありがとう。すっごく参考になった。
もっと自由にやってみます☆

色見本いじってると、いくらでも時間が
過ごせそうだよ。困ったもんです笑。

ところで、この色の組み合わせで行く!って
決めるとき、ある程度は知識や理論を下敷きに
してるんだろうけど、最終的には感覚値で
ピピンと決定するの?

けっこう即決?じっくり?SGLさんの場合は。
かこ|2012年03月20日(火) 15:04
いやー。なんつーか、セーフカラーはどぎついので。。ぶっちゃけあんまり意識してないですが、僕が使ってるセーフカラーは大体20色ぐらいだと思います☆
SGL|2012年03月20日(火) 13:50
先生。ありがとうございますっ!

そっかー。6ケタでもいいのかー。
ちょっと不安で一応3ケタにしてみてます。
WindowsのIE、FF、Crome、iPadのSafari、
Andoroidくらいで見て大丈夫なら、そこそこ
大丈夫なのかなー。

色調整してから、近い3ケタを探すってのもアリ
なんですかねぇ。
かこ|2012年03月20日(火) 09:42
セーフカラー、実は制作時は全くって程気にしてません!#のあとはほぼ6桁です。
文字色とかについては#のあとを3桁で表示するようにしてたりするときもあります。(セーフカラーは3桁に略せる)
その代わり、出来たときにwindows環境でも確認するようにしてますー。全く色出てないってときには調整します☆
SGL|2012年03月20日(火) 08:22
きゃーっ、先生っ!ありがとう

私の頭の中からはでてこない、素敵な色合わせが
たっくさん♪

しかも、色調整とかもできるじゃないですかっ。
よーく見てみます。

SGL先生、WEBセーフカラーとか、
どの程度気を付けてます?
かこ|2012年03月20日(火) 00:40
http://kuler.adobe.com/
これがいいよ。
SGL|2012年03月20日(火) 00:27