特定の色を明るくして使いたいが・・・

質問

こんにちは。
色の指定についての質問です。
#dcc4b4をもう少しだけ明るくしたような色を使いたいのですが、
特定の色を自分で調節して、それをまた「#dcc4b4」のような数字表記にして
HTMLで使う方法はありますか？
それとも、使いたい色は基本的に、
カラーチャートなどから探さなければいけないのでしょうか。
そのあたりがよくわからないので、教えていただけるとうれしいです。
どうぞよろしくお願いいたします。

回答No.4

Joh_Taka · ベストアンサー

#1さんの仰る方法が、16進数でカラーコードの概念を知る意味では、大変有効であると私も思いますが・・・常に安直な方法で楽に制作をしたがる私からの提案として、カラーパレットで作成した色をカラーコードに変換するフリーソフトなどを使ってみては如何でしょうか？

Vectorで検索すれば類似した機能のソフトが沢山ありますが、
http://www.vector.co.jp/vpack/filearea/win95/net/htmledit/color/index.html
その中の一つ「カラーコードエディタ」
http://www.vector.co.jp/soft/win95/net/se242527.html
を使ってシミュレーションしてみますと・・・

「カラーコードエディタ」を起動させて、RGBタブを選択します。

R,G,B,の各スライダーをドラッグして、基準とするカラーコード #DCC4B4 を作ります。

まずB(青)の数値が DC になる位置までB(青)のスライダーをドラッグします。
（右側の枠内の数値は、10進数表示で220です）

次にG(緑)の数値を C4 (10進数表示で196)になるように、G(緑)のスライダーをドラッグ。

同様にR(赤)の数値を B4 (10進数表示で180)になるように、R(赤)のスライダーをドラッグします。

カラーコードが #DCC4B4 となったら、タブを「HSV」に切り替えます。

単に明るさのみを変えたいのでしたら、V(明度)を変えればよいだけですから、右側の縦のバーのスライダーを上方にドラッグします。

明るさを変えるのではなく、S(彩度)を落として色を薄くしたいのでしたら、カラーパレットの中の○印をそのまま下方へドラッグすれば良いと思います。

探せばもっと使いやすいソフトが他にもあるかもしれません。
色々と試してみてください。

注意点としては、やはり、定められたウェブ・セーフ・カラー以外の色を指定しても、閲覧者の環境によっては、制作者の意図通りには色を再現できないことがあります。
http://ykr.main.jp/html/component/websc.html
根本的な問題として、WinとMacとでは色の再現性が違いますし、モニター自体の色再現の個体差もありますから、あまり微妙な色の違いは再現できない場合が多々あります。

ですから、場合によっては画像を使ってしまった方が効果的な場合もあります。

お礼

Vectorは一応検索したのですが、
なぜか紹介してくださったような理想的なカテゴリには行き当たらなかったんですよね。(^-^;
中からよさそうなソフトをダウンロードしてみました。
背景色と文字色の組み合わせも見られるものにしたので使い勝手もとてもいいです。
回答どうもありがとうございました。

回答No.6

noname#176215

私が重宝して使用しているツールをご紹介しておきます。
常に最全面化しておくと良いです。

また英語表記の色名はネット上でそのまま表記しても使
えます。付属の CSVファイルに自分用の色名を追加する
こともできます。

Ctrl + S　スポイトツール
Ctrl + C　十六進数表記でコピー

参考URL：

http://www.vector.co.jp/soft/win95/net/se133400.html

お礼

回答ありがとうございます。
ためしてみますね。

回答No.5

Joh_Taka

#4です。

大変な誤りに気付きました。

#4で紹介したソフトのカラーコードは、#BBGGRR の並びとなっていましたね。
HTMLのカラーコードは #RRGGBB とならなければいけませんので、#4で紹介したソフトは使わないでください。

説明も、うっかり#BBGGRR で行ってしまいましたが、誤りです。
申し訳ありません。

替わりに「HTMLカラーコード変換」をご紹介致します。
http://www.vector.co.jp/soft/win95/net/se098393.html

機能的にも、#4でのものとほぼ同等です。

数値の入力を「16進」にして、「赤」「緑」「青」にそれぞれ dc、c4、b4 を書いてから、
「色の一覧より選択できます」ボタンをクリック。
カラーパレットのスライダーやポジションを任意に動かすか、「色合い「鮮やかさ」「明るさ」の数値を直接入力して使用します。

参考URL：

http://www.vector.co.jp/soft/win95/net/se098393.html

お礼

わざわざ訂正ありがとうございます。

そこで質問なのですが（笑）、
紹介してくださったソフトのカラーコードが#BBGGRRの並びになっているということは、
それでも通用するものがあるということですよね、HTML以外で。
#BBGGRRのコードはどのような場面で使うんですか？
よろしければ教えてください♪

回答No.3

BLUEPIXY

#1です
Ｒ
Ｇ
Ｂ
に００～ＦＦの数字を入れて変更ボタンを押して下さい。
例えば、Ｒ：ＦＦのとき
■が赤で表示されます。
ひょっとしたら、ブラウザで違うのかもしれません。
ＩＥ６，ＮＮ７で動くと思うのですが。

ちなみに
#dcc4b4は、
R=DC
G=C4
B=B4
です。
ＦＦにちょっと近づけるというのは、
例えば
R=DD
G=C5
B=B5
とかいう意味です。
００～ＦＦは、１６進数で、どの色をどのくらい使うかを表しています。
１０進数でいうと
０～２５５です。
ｗｉｎｄｏｗｓだったらcalc(電卓を関数電卓モードで、１６進のラジオボタンをチェックするとわかります、相互に変換できます)

お礼

わざわざ何度もありがとうございます。
ブラウザのせいではなくて、私の無知のせいで
適正な数字・アルファベットを入れていなかったために
表示されなかったようです。

色の表示の仕方についても、
前から勉強しなくちゃなーとは思っていたのですが
とてもわかりやすく教えていただいて、理解できました。
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,Fの16段階ということなのですね。
回答どうもありがとうございました。

回答No.2

BLUEPIXY

#1です。
数字表記でもでますが、
■に色を付けて表示されると思うのですが…

お礼

次のご回答を読んで
適正な数字やアルファベットを入れたら、
■でその色が表示されました♪

回答No.1

BLUEPIXY

<script type="text/javascript">
<!--
function change(){
color = "#"+document.COLORTEST.RED.value + document.COLORTEST.GREEN.value + document.COLORTEST.BLUE.value;
document.getElementById("SQUARE").style.color=color;
document.COLORTEST.COLORCODE.value=color;
}
//-->
</script>

<form name="COLORTEST">
<label for="COLORCODE">カラーコード</label><input type="text" name="COLORCODE" value="#000000" ID="RESULT"><br>
<p id="SQUARE" style="color:black">■</p>
<label for="RED">Ｒ</label><input type="text" name="RED" value="00" id="RED"><br>
<label for="GREEN">Ｇ</label><input type="text" name="GREEN" value="00" id="GREEN"><br>
<label for="BLUE">Ｂ</label><input type="text" name="BLUE" value="00" id="BLUE"><br>
<input type="BUTTON" value="変更" onclick="javascript:change()"><input type="reset" value="クリア">
</form>
見たいにかけば、ブラウザ上で色を変えながらテストできます。
色を明るくするというのは、
基本的には、各赤青緑をＦＦに近づければいいと思います。

お礼

回答どうもありがとうございます。

上半分（script部分）をheadタグ内に、
下半分をbodyタグ内に入れてやってみました。
テストできそうには見えますが、
このフォームは、赤・青・緑の数字を自分で決定して
その結果を#xxxxxxのような形式で表示させるためのものでしょうか？
赤・青・緑のパラメーターを決定した結果「どんな色になったか」は、
このフォーム（ページ）では見られませんよね？
ffに近づけるには、6桁ある数字のどのあたりに
fを入れていけばいいのかもよくわからないんです。

ただ、自分で色を不連続に決めてそれを数字で表すことは可能みたいですね。