ホームページ制作、千太の絵空事

素敵な色の使い方

【素敵な色の使い方】(少しだけ心をつかって）


カラフルなページは見ているだけでも楽しくなりますね。

更に、使い方を少しだけ、心と手間を使うだけで、

もっと素敵なページに変身します。

ここでは「素敵な色の使い方」について語ります。



【見やすい色の組み合わせとは】

見やすい色の組み合わせとは、人によって、違いがあります。

自分の好みだけではなく、

できるだけそれに近いイメージで色を選んでみましょう。

できるだけ、

「見やすく読んでもらえるようにするには？」

を心がけて作ると素敵ですね!。

これは「名前アイコン」などにも言えることです。


【背景色とのコントラスト】

実際に、色を選択するといっても、少し難しいと思います。

誰でもが、わりと理解しやすく、意識しやすいのは、

「背景色との文字のコントラスト」

暗い背景には、うすい色を、

明るい背景には、濃い色をです。

これに着目してください。

例えば、

現在、Yahooブログの背景は「白」ですので、

文字に色をつける場合、うすい文字は見えにくくなりますね。

「濃い色」を選択すると読みやすくて素敵ですね！

　　　　　　　　☆

Webセーフカラー２１６色（秋色？）テキスト文字
http://blogs.yahoo.co.jp/cen_picture21/294887.html

Webセーフカラー２１６色(春色?)テキスト文字
http://blogs.yahoo.co.jp/cen_picture21/294675.html

　　　　　　　　☆

どうですか？。どちらとも右側、とくに下の方は、見えにくくありませんか？

──────────

少しだけ心をつかって

[素敵な色の使い方]｜
色での指定 ｜
色での強調 ｜
色の秘密 ｜


【Wiki版】
少しだけ心をつかって

素敵な色の使い方
http://blogs.yahoo.co.jp/cen_picture21/293545.html
色での指定
http://blogs.yahoo.co.jp/cen_picture21/587122.html
色での強調
http://blogs.yahoo.co.jp/cen_picture21/708607.html
色の秘密
http://blogs.yahoo.co.jp/cen_picture21/1561198.html

素敵な色の使い方

<font size="4">【<b>素敵な色の使い方</b>】</font>(少しだけ心をつかって）
<font size="3">

カラフルなページは見ているだけでも楽しくなりますね。

更に、使い方を少しだけ、心と手間を使うだけで、

もっと素敵なページに変身します。

ここでは「素敵な色の使い方」について語ります。

</font>

【<b>見やすい色の組み合わせとは</b>】
<font size="3">
見やすい色の組み合わせとは、人によって、違いがあります。

自分の好みだけではなく、

できるだけそれに近いイメージで色を選んでみましょう。

できるだけ、

「<b>見やすく読んでもらえるようにするには？</b>」

を心がけて作ると素敵ですね!。

これは「<b>名前アイコン</b>」などにも言えることです。

</font>
【<b>背景色とのコントラスト</b>】
<font size="3">
実際に、色を選択するといっても、少し難しいと思います。

誰でもが、わりと理解しやすく、意識しやすいのは、

「<b>背景色との文字のコントラスト</b>」

暗い背景には、うすい色を、

明るい背景には、濃い色をです。

これに着目してください。

例えば、

現在、Yahooブログの背景は「白」ですので、

文字に色をつける場合、うすい文字は見えにくくなりますね。

「</b>濃い色</b>」を選択すると読みやすくて素敵ですね！

　　　　　　　　☆

Webセーフカラー２１６色（秋色？）テキスト文字
http://blogs.yahoo.co.jp/cen_picture21/294887.html

Webセーフカラー２１６色(春色?)テキスト文字
http://blogs.yahoo.co.jp/cen_picture21/294675.html

　　　　　　　　☆

どうですか？。どちらとも右側、とくに下の方は、見えにくくありませんか？

──────────

少しだけ心をつかって

[素敵な色の使い方]｜
色での指定 ｜
色での強調 ｜
色の秘密 ｜

</font>
【Wiki版】
少しだけ心をつかって

素敵な色の使い方
http://blogs.yahoo.co.jp/cen_picture21/293545.html
色での指定
http://blogs.yahoo.co.jp/cen_picture21/587122.html
色での強調
http://blogs.yahoo.co.jp/cen_picture21/708607.html
色の秘密
http://blogs.yahoo.co.jp/cen_picture21/1561198.html

「素敵な色の使い方」(少しだけ心をつかって）u版

【素敵な色の使い方】(少しだけ心をつかって）


カラフルなページは見ているだけでも楽しくなりますね。

更に、使い方を少しだけ、心と手間を使うだけで、

もっと素敵なページに変身します。

ここでは「素敵な色の使い方」について語ります。



【見やすい色の組み合わせとは】

見やすい色の組み合わせとは、人によって、違いがあります。

自分の好みだけではなく、

できるだけそれに近いイメージで色を選んでみましょう。

できるだけ、

「見やすく読んでもらえるようにするには？」

を心がけて作ると素敵ですね!。

これは「名前アイコン」などにも言えることです。


【背景色とのコントラスト】

実際に、色を選択するといっても、少し難しいと思います。

誰でもが、わりと理解しやすく、意識しやすいのは、

「背景色との文字のコントラスト」

暗い背景には、うすい色を、

明るい背景には、濃い色をです。

これに着目してください。

例えば、

現在、Yahooブログの背景は「白」ですので、

文字に色をつける場合、うすい文字は見えにくくなりますね。

「濃い色」を選択すると読みやすくて素敵ですね！

　　　　　　　　☆

Webセーフカラー２１６色（秋色？）テキスト文字
http://blogs.yahoo.co.jp/cen_picture21/294887.html

Webセーフカラー２１６色(春色?)テキスト文字
http://blogs.yahoo.co.jp/cen_picture21/294675.html

　　　　　　　　☆

どうですか？。どちらとも右側、とくに下の方は、見えにくくありませんか？

──────────

少しだけ心をつかって

[素敵な色の使い方]｜
色での指定 ｜
色での強調 ｜
色の秘密 ｜


【Wiki版】
少しだけ心をつかって

素敵な色の使い方
http://blogs.yahoo.co.jp/cen_picture21/293545.html
色での指定
http://blogs.yahoo.co.jp/cen_picture21/587122.html
色での強調
http://blogs.yahoo.co.jp/cen_picture21/708607.html
色の秘密
http://blogs.yahoo.co.jp/cen_picture21/1561198.html

背景色と前景色（文字色）

●背景色と前景色（文字色）

では実際に背景色と前景色（文字色）について見てみると

例えば、現時点でのYahooブログの場合では背景色は白#ffffffで、黒#000000の文字色です。

白#ffffff：
（R=255, G=255, B=255）はグレースケールで「255」

※計算は割愛しました

黒#000000：
（R=0 G=0, B=0）グレースケールで「0」

※計算は割愛しました

明度差は「255」で十分コントラストがありますね！。

※[白#ffffffの背景色に、黒#000000の文字色]の見え方

○テキスト


●緑#00ff00の文字色

これを緑#00ff00の文字色にすると

緑#00ff00：
（R=255, G=0, B=0）

[計算]

明度：
(255 * 587) / 1 000 = 149.68500

　　緑#00ff00の明度は149.68500

明度差：
255 - 149.68500 = 105.31500

となって「125」がないので、明度さ(コントラスト）が不足している事になりますね

※[白#ffffffの背景色に、緑#00ff00の文字色]の見えかた

○テキスト

●コントラストだけではない！。

コントラストが足りていても、色の組み合わせによっては、読みにくい場合があります。

例えば
[緑#00ff00の背景色に、黒#000000の文字色]

○テキスト

コントラスト：「149.68500」

[赤#ff0000の背景色に、白#ffffffの文字色]

○テキスト

255 - 76.24500 = 178.75500
コントラスト：「178.75500」

など、読みにくい方がいるようです。

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
[http://blogs.yahoo.co.jp/cen_picture21/2957167.html 背景色に文字色]

[背景色に文字色]

[白#ffffffの背景色に、黒#000000の文字色]

○テキスト


[白#ffffffの背景色に、緑#00ff00の文字色]

○テキスト

[緑#00ff00の背景色に、黒#000000の文字色]

○テキスト


[赤#ff0000の背景色に、白#ffffffの文字色]

○テキスト