web関連

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

投稿日:2017年2月11日 更新日:

背景や文字などの色の指定は通常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

-web関連

執筆者:

関連記事

WordPressでサイトマップを自動生成するプラグイン「PS Auto Sitemap」

記事の数が増えていくと、ユーザーにとってサイト全体の構成を一目で確認できるサイトマップページがあると楽に興味のある記事にアクセスでき、使い勝手が向上します。 しかし、記事を更新する度にサイトマップを更 …

キーボード入力が苦手な人はWindows音声認識機能を使ってみよう

パソコンで書類を作成しようとしても、キーボード入力が苦手なので長文を打つのが大変! もっと簡単に入力できる方法はないか。 そう思ったことはありませんか? Windows音声認識機能はオススメです。 ☞ …

おすすめ記事一覧を表示させるプラグインとは?|サムネイル画像も表示!

ブログに運営者おすすめの記事一覧があれば、訪問者はそれらの記事に興味を示すこともあるかもしれません。 1ページでも多く、他の記事を見てもらうための導線として、おすすめ人気記事を表示させることは非常に有 …

パソコンの選び方とは?|初めて購入する場合のポイントとは?

パソコンの購入は初めてでなくても悩むところです。パソコンを初めて購入する人にとってはどのように選べばよいか見当もつかないことでしょう。 パソコンは長く使うもので、生活の一部となる機器です。 お店の人に …

パソコンの寿命と買い替えのタイミングは?|おおよその目安とは?

今や生活に欠かせないものとなったパソコンは仕事から趣味までいろいろな用途に使える便利な道具ですが、長く使ってるうちに調子が悪くなります。 パソコンの調子が悪くなる原因には単なる故障だけでなく、寿命とい …