HTML色指定|難しい色決めを楽にする方法とは?

web関連

背景や文字などの色の指定は通常CSSで行うことが多いと思いますが、実は以下のようにHTMLで色をつけることができます。

文字の色を指定するとき場合

<font color=”色”> ~ </font>

セルに背景色を指定する場合

<td bgcolor=”色”> ~ </td>

ネットでカラーコードを検索すると細かくみることができますが、色決めが難しいと思います。大雑把にでもこの16進数が表す色の特徴を知っていると色決めに悩むことが少なくなるのではないかと思います。

16進数のカラーコードの特徴

おおまかな特徴は全体的に数字が小さいほど黒に近づき、大きいほど白に近づきます。
例:#000000は黒、#ffffffは白です。

カラーコードを#XXYYZZの3色(X,Y,Z)に分けて考えます。3色のうち一色だけが大きいと光の三原色(赤ff0000・緑00ff00・青0000ff)のどれかに近くなります。下記6つの表で黒太字が該当します。

一方で3色のうち一色だけが少ないと色の三原色(シアン00ffff・マゼンタff00ff・イエローffff00)のどれかに近くなります。下記6つの表で赤太字が該当します。

また、各3色のうち最大の数値と最小の数値の差が小さいほど色がくすみ、大きいほど鮮やかになる特徴があります。3色のカラーコードをそれぞれ00,33,66,99,cc,ffの6段階に分けて、変化の様子を確認します。

色の変化の様子

下表は1色目は”00”で固定(*で表示)、2色目は右方向に”00”→”ff”に変化、3色目は下方向に”00”→”ff”に変化させた様子です。1色目は表が変わるごとに”00”→”ff”に変化させています。

※一部、見にくい部分については灰色でカラーコードを表示しています。

*0000 *3300 *6600 *9900 *cc00 *ff00
*0033 *3333 *6633 *9933 *cc33 *ff33
*0066 *3366 *6666 *9966 *cc66 *ff66
*0099 *3399 *6699 *9999 *cc99 *ff99
*00cc *33cc *66cc *99cc *cccc *ffcc
*00ff *33ff *66ff *99ff *ccff *ffff

下表は1色目は”33”で固定(*で表示)、2色目は右方向に”00”→”ff”に変化、3色目は下方向に”00”→”ff”に変化させた様子です。

*0000 *3300 *6600 *9900 *cc00 *ff00
*0033 *3333 *6633 *9933 *cc33 *ff33
*0066 *3366 *6666 *9966 *cc66 *ff66
*0099 *3399 *6699 *9999 *cc99 *ff99
*00cc *33cc *66cc *99cc *cccc *ffcc
*00ff *33ff *66ff *99ff *ccff *ffff

下表は1色目は”66”で固定(*で表示)、2色目は右方向に”00”→”ff”に変化、3色目は下方向に”00”→”ff”に変化させた様子です。

*0000 *3300 *6600 *9900 *cc00 *ff00
*0033 *3333 *6633 *9933 *cc33 *ff33
*0066 *3366 *6666 *9966 *cc66 *ff66
*0099 *3399 *6699 *9999 *cc99 *ff99
*00cc *33cc *66cc *99cc *cccc *ffcc
*00ff *33ff *66ff *99ff *ccff *ffff

下表は1色目は”99”で固定(*で表示)、2色目は右方向に”00”→”ff”に変化、3色目は下方向に”00”→”ff”に変化させた様子です。

*0000 *3300 *6600 *9900 *cc00 *ff00
*0033 *3333 *6633 *9933 *cc33 *ff33
*0066 *3366 *6666 *9966 *cc66 *ff66
*0099 *3399 *6699 *9999 *cc99 *ff99
*00cc *33cc *66cc *99cc *cccc *ffcc
*00ff *33ff *66ff *99ff *ccff *ffff

下表は1色目は”㏄”で固定(*で表示)、2色目は右方向に”00”→”ff”に変化、3色目は下方向に”00”→”ff”に変化させた様子です。

*0000 *3300 *6600 *9900 *cc00 *ff00
*0033 *3333 *6633 *9933 *cc33 *ff33
*0066 *3366 *6666 *9966 *cc66 *ff66
*0099 *3399 *6699 *9999 *cc99 *ff99
*00cc *33cc *66cc *99cc *cccc *ffcc
*00ff *33ff *66ff *99ff *ccff *ffff

下表は1色目は”ffで固定(*で表示)、2色目は右方向に”00”→”ff”に変化、3色目は下方向に”00”→”ff”に変化させた様子です。

*0000 *3300 *6600 *9900 *cc00 *ff00
*0033 *3333 *6633 *9933 *cc33 *ff33
*0066 *3366 *6666 *9966 *cc66 *ff66
*0099 *3399 *6699 *9999 *cc99 *ff99
*00cc *33cc *66cc *99cc *cccc *ffcc
*00ff *33ff *66ff *99ff *ccff *ffff

6つの表から以下のような特徴があることが分かります。

・1色目は”00”→”ff”に変化させると”赤”の要素が強くなる。

・2色目は”00”→”ff”に変化させると”緑”の要素が強くなる。

・3色目は”00”→”ff”に変化させると”青”の要素が強くなる。

初めてホームページを作成する方にお勧め!【ホームページ.com】

訪問提案で依頼者の店舗や会社の魅力をしっかり理解して、最適なホームページを作成することで集客拡大につなげます。

さらに、最短2週間からホームページを作成できるため、急ぎの場合にも柔軟に対応ができます。

今なら初期費用オール0円!(訪問提案0円・初期費用0円・ロゴ作成費0円)で、スマホ版・タブレット版の作成も追加料金なしで対応可能です。

ホームページを作成して終わりではなく、アフターフォローなどのサポートもあるので安心です。

東証一部上場企業で年間作成実績が1800社以上と信頼できる実績があります。

ホームページ作成の見積り・相談は無料です。

詳細はこちらをご覧ください ☞ ホームページ.com

タイトルとURLをコピーしました