ラベル Color の投稿を表示しています。 すべての投稿を表示
ラベル Color の投稿を表示しています。 すべての投稿を表示

火曜日, 8月 18, 2026

HTMLとCSSの様々な表現 29　
00,33,66,99,cc,ffだけの組み合わせで表現できる186色

00,33,66,99,cc,ffだけの組み合わせで表現できる186色の一覧表です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>web color 186</title>
<style>
body {
background-color: black;
 font-size: 14px;
color: white;
}
</style>
</head>
<body>
<center>
<h3>00,33,66,99,cc,ffだけの組み合わせで表現できる186色の一覧を16進数順に整列 </h3>
<table width="960px" border="1">
 <tr>
 <td width="160px" style="background-color:#000000; color:#ffffff;">#000000</td>
 <td width="161px" style="background-color:#000033; color:#ffffff;">#000033</td>
 <td width="162px" style="background-color:#000066; color:#ffffff;">#000066</td>
 <td width="163px" style="background-color:#000099; color:#ffffff;">#000099</td>
 <td width="164px" style="background-color:#0000cc; color:#ffffff;">#0000cc</td>
 <td width="165px" style="background-color:#0000ff; color:#ffffff;">#0000ff</td>
 </tr>
 <tr>
 <td style="background-color:#330000; color:#ffffff;">#330000</td>
 <td style="background-color:#330033; color:#ffffff;">#330033</td>
 <td style="background-color:#330066; color:#ffffff;">#330066</td>
 <td style="background-color:#330099; color:#ffffff;">#330099</td>
 <td style="background-color:#3300cc; color:#ffffff;">#3300cc</td>
 <td style="background-color:#3300ff; color:#ffffff;">#3300ff</td>
 </tr>
 <tr>
 <td style="background-color:#333300; color:#ffffff;">#333300</td>
 <td style="background-color:#333333; color:#ffffff;">#333333</td>
 <td style="background-color:#333366; color:#ffffff;">#333366</td>
 <td style="background-color:#333399; color:#ffffff;">#333399</td>
 <td style="background-color:#3333cc; color:#ffffff;">#3333cc</td>
 <td style="background-color:#3333ff; color:#ffffff;">#3333ff</td>
 </tr>
 <tr>
 <td style="background-color:#336600; color:#ffffff;">#336600</td>
 <td style="background-color:#336633; color:#ffffff;">#336633</td>
 <td style="background-color:#336666; color:#ffffff;">#336666</td>
 <td style="background-color:#336699; color:#ffffff;">#336699</td>
 <td style="background-color:#3366cc; color:#ffffff;">#3366cc</td>
 <td style="background-color:#3366ff; color:#ffffff;">#3366ff</td>
 </tr>
 <tr>
 <td style="background-color:#339900; color:#ffffff;">#339900</td>
 <td style="background-color:#339933; color:#ffffff;">#339933</td>
 <td style="background-color:#339966; color:#ffffff;">#339966</td>
 <td style="background-color:#339999; color:#ffffff;">#339999</td>
 <td style="background-color:#3399cc; color:#ffffff;">#3399cc</td>
 <td style="background-color:#3399ff; color:#ffffff;">#3399ff</td>
 </tr>
 <tr>
 <td style="background-color:#33cc00; color:#333333;">#33cc00</td>
 <td style="background-color:#33cc33; color:#333333;">#33cc33</td>
 <td style="background-color:#33cc66; color:#333333;">#33cc66</td>
 <td style="background-color:#33cc99; color:#333333;">#33cc99</td>
 <td style="background-color:#33cccc; color:#333333;">#33cccc</td>
 <td style="background-color:#33ccff; color:#333333;">#33ccff</td>
 </tr>
 <tr>
 <td style="background-color:#33ff00; color:#333333;">#33ff00</td>
 <td style="background-color:#33ff33; color:#333333;">#33ff33</td>
 <td style="background-color:#33ff66; color:#333333;">#33ff66</td>
 <td style="background-color:#33ff99; color:#333333;">#33ff99</td>
 <td style="background-color:#33ffcc; color:#333333;">#33ffcc</td>
 <td style="background-color:#33ffff; color:#333333;">#33ffff</td>
 </tr>
 <tr>
 <td style="background-color:#660000; color:#ffffff;">#660000</td>
 <td style="background-color:#660033; color:#ffffff;">#660033</td>
 <td style="background-color:#660066; color:#ffffff;">#660066</td>
 <td style="background-color:#660099; color:#ffffff;">#660099</td>
 <td style="background-color:#6600cc; color:#ffffff;">#6600cc</td>
 <td style="background-color:#6600ff; color:#ffffff;">#6600ff</td>
 </tr>
 <tr>
 <td style="background-color:#663300; color:#ffffff;">#663300</td>
 <td style="background-color:#663333; color:#ffffff;">#663333</td>
 <td style="background-color:#663366; color:#ffffff;">#663366</td>
 <td style="background-color:#663399; color:#ffffff;">#663399</td>
 <td style="background-color:#6633cc; color:#ffffff;">#6633cc</td>
 <td style="background-color:#6633ff; color:#ffffff;">#6633ff</td>
 </tr>
 <tr>
 <td style="background-color:#666600; color:#ffffff;">#666600</td>
 <td style="background-color:#666633; color:#ffffff;">#666633</td>
 <td style="background-color:#666666; color:#ffffff;">#666666</td>
 <td style="background-color:#666699; color:#ffffff;">#666699</td>
 <td style="background-color:#6666cc; color:#ffffff;">#6666cc</td>
 <td style="background-color:#6666ff; color:#ffffff;">#6666ff</td>
 </tr>
 <tr>
 <td style="background-color:#669900; color:#ffffff;">#669900</td>
 <td style="background-color:#669933; color:#ffffff;">#669933</td>
 <td style="background-color:#669966; color:#ffffff;">#669966</td>
 <td style="background-color:#669999; color:#ffffff;">#669999</td>
 <td style="background-color:#6699cc; color:#ffffff;">#6699cc</td>
 <td style="background-color:#6699ff; color:#ffffff;">#6699ff</td>
 </tr>
 <tr>
 <td style="background-color:#66cc00; color:#333333;">#66cc00</td>
 <td style="background-color:#66cc33; color:#333333;">#66cc33</td>
 <td style="background-color:#66cc66; color:#333333;">#66cc66</td>
 <td style="background-color:#66cc99; color:#333333;">#66cc99</td>
 <td style="background-color:#66cccc; color:#333333;">#66cccc</td>
 <td style="background-color:#66ccff; color:#333333;">#66ccff</td>
 </tr>
 <tr>
 <td style="background-color:#66ff00; color:#333333;">#66ff00</td>
 <td style="background-color:#66ff33; color:#333333;">#66ff33</td>
 <td style="background-color:#66ff66; color:#333333;">#66ff66</td>
 <td style="background-color:#66ff99; color:#333333;">#66ff99</td>
 <td style="background-color:#66ffcc; color:#333333;">#66ffcc</td>
 <td style="background-color:#66ffff; color:#333333;">#66ffff</td>
 </tr>
 <tr>
 <td style="background-color:#990000; color:#ffffff;">#990000</td>
 <td style="background-color:#990033; color:#ffffff;">#990033</td>
 <td style="background-color:#990066; color:#ffffff;">#990066</td>
 <td style="background-color:#990099; color:#ffffff;">#990099</td>
 <td style="background-color:#9900cc; color:#ffffff;">#9900cc</td>
 <td style="background-color:#9900ff; color:#ffffff;">#9900ff</td>
 </tr>
 <tr>
 <td style="background-color:#993300; color:#ffffff;">#993300</td>
 <td style="background-color:#993333; color:#ffffff;">#993333</td>
 <td style="background-color:#993366; color:#ffffff;">#993366</td>
 <td style="background-color:#993399; color:#ffffff;">#993399</td>
 <td style="background-color:#9933cc; color:#ffffff;">#9933cc</td>
 <td style="background-color:#9933ff; color:#ffffff;">#9933ff</td>
 </tr>
 <tr>
 <td style="background-color:#996600; color:#ffffff;">#996600</td>
 <td style="background-color:#996633; color:#ffffff;">#996633</td>
 <td style="background-color:#996666; color:#ffffff;">#996666</td>
 <td style="background-color:#996699; color:#ffffff;">#996699</td>
 <td style="background-color:#9966cc; color:#ffffff;">#9966cc</td>
 <td style="background-color:#9966ff; color:#ffffff;">#9966ff</td>
 </tr>
 <tr>
 <td style="background-color:#999900; color:#ffffff;">#999900</td>
 <td style="background-color:#999933; color:#ffffff;">#999933</td>
 <td style="background-color:#999966; color:#ffffff;">#999966</td>
 <td style="background-color:#999999; color:#ffffff;">#999999</td>
 <td style="background-color:#9999cc; color:#ffffff;">#9999cc</td>
 <td style="background-color:#9999ff; color:#ffffff;">#9999ff</td>
 </tr>
 <tr>
 <td style="background-color:#99cc00; color:#333333;">#99cc00</td>
 <td style="background-color:#99cc33; color:#333333;">#99cc33</td>
 <td style="background-color:#99cc99; color:#333333;">#99cc99</td>
 <td style="background-color:#99cc99; color:#333333;">#99cc99</td>
 <td style="background-color:#99cccc; color:#333333;">#99cccc</td>
 <td style="background-color:#99ccff; color:#333333;">#99ccff</td>
 </tr>
 <tr>
 <td style="background-color:#99ff00; color:#333333;">#99ff00</td>
 <td style="background-color:#99ff33; color:#333333;">#99ff33</td>
 <td style="background-color:#99ff99; color:#333333;">#99ff99</td>
 <td style="background-color:#99ff99; color:#333333;">#99ff99</td>
 <td style="background-color:#99ffcc; color:#333333;">#99ffcc</td>
 <td style="background-color:#99ffff; color:#333333;">#99ffff</td>
 </tr>
 <tr>
 <td style="background-color:#cc0000; color:#ffffff;">#cc0000</td>
 <td style="background-color:#cc0033; color:#ffffff;">#cc0033</td>
 <td style="background-color:#cc0066; color:#ffffff;">#cc0066</td>
 <td style="background-color:#cc0099; color:#ffffff;">#cc0099</td>
 <td style="background-color:#cc00cc; color:#ffffff;">#cc00cc</td>
 <td style="background-color:#cc00ff; color:#ffffff;">#cc00ff</td>
 </tr>
 <tr>
 <td style="background-color:#cc3300; color:#ffffff;">#cc3300</td>
 <td style="background-color:#cc3333; color:#ffffff;">#cc3333</td>
 <td style="background-color:#cc3366; color:#ffffff;">#cc3366</td>
 <td style="background-color:#cc3399; color:#ffffff;">#cc3399</td>
 <td style="background-color:#cc33cc; color:#ffffff;">#cc33cc</td>
 <td style="background-color:#cc33ff; color:#ffffff;">#cc33ff</td>
 </tr>
 <tr>
 <td style="background-color:#cc6600; color:#ffffff;">#cc6600</td>
 <td style="background-color:#cc6633; color:#ffffff;">#cc6633</td>
 <td style="background-color:#cc6666; color:#ffffff;">#cc6666</td>
 <td style="background-color:#cc6699; color:#ffffff;">#cc6699</td>
 <td style="background-color:#cc66cc; color:#ffffff;">#cc66cc</td>
 <td style="background-color:#cc66ff; color:#ffffff;">#cc66ff</td>
 </tr>
 <tr>
 <td style="background-color:#cc9900; color:#ffffff;">#cc9900</td>
 <td style="background-color:#cc9933; color:#ffffff;">#cc9933</td>
 <td style="background-color:#cc9966; color:#ffffff;">#cc9966</td>
 <td style="background-color:#cc9999; color:#ffffff;">#cc9999</td>
 <td style="background-color:#cc99cc; color:#ffffff;">#cc99cc</td>
 <td style="background-color:#cc99ff; color:#ffffff;">#cc99ff</td>
 </tr>
 <tr>
 <td style="background-color:#cccc00; color:#333333;">#cccc00</td>
 <td style="background-color:#cccc33; color:#333333;">#cccc33</td>
 <td style="background-color:#cccc66; color:#333333;">#cccc66</td>
 <td style="background-color:#cccc99; color:#333333;">#cccc99</td>
 <td style="background-color:#cccccc; color:#333333;">#cccccc</td>
 <td style="background-color:#ccccff; color:#333333;">#ccccff</td>
 </tr>
 <tr>
 <td style="background-color:#ccff00; color:#333333;">#ccff00</td>
 <td style="background-color:#ccff33; color:#333333;">#ccff33</td>
 <td style="background-color:#ccff66; color:#333333;">#ccff66</td>
 <td style="background-color:#ccff99; color:#333333;">#ccff99</td>
 <td style="background-color:#ccffcc; color:#333333;">#ccffcc</td>
 <td style="background-color:#ccffff; color:#333333;">#ccffff</td>
 </tr>
 <tr>
 <td style="background-color:#ff0000; color:#ffffff;">#ff0000</td>
 <td style="background-color:#ff0033; color:#ffffff;">#ff0033</td>
 <td style="background-color:#ff0066; color:#ffffff;">#ff0066</td>
 <td style="background-color:#ff0099; color:#ffffff;">#ff0099</td>
 <td style="background-color:#ff00cc; color:#ffffff;">#ff00cc</td>
 <td style="background-color:#ff00ff; color:#ffffff;">#ff00ff</td>
 </tr>
 <tr>
 <td style="background-color:#ff3300; color:#ffffff;">#ff3300</td>
 <td style="background-color:#ff3333; color:#ffffff;">#ff3333</td>
 <td style="background-color:#ff3366; color:#ffffff;">#ff3366</td>
 <td style="background-color:#ff3399; color:#ffffff;">#ff3399</td>
 <td style="background-color:#ff33cc; color:#ffffff;">#ff33cc</td>
 <td style="background-color:#ff33ff; color:#ffffff;">#ff33ff</td>
 </tr>
 <tr>
 <td style="background-color:#ff6600; color:#ffffff;">#ff6600</td>
 <td style="background-color:#ff6633; color:#ffffff;">#ff6633</td>
 <td style="background-color:#ff6666; color:#ffffff;">#ff6666</td>
 <td style="background-color:#ff6699; color:#ffffff;">#ff6699</td>
 <td style="background-color:#ff66cc; color:#ffffff;">#ff66cc</td>
 <td style="background-color:#ff66ff; color:#ffffff;">#ff66ff</td>
 </tr>
 <tr>
 <td style="background-color:#ff9900; color:#ffffff;">#ff9900</td>
 <td style="background-color:#ff9933; color:#ffffff;">#ff9933</td>
 <td style="background-color:#ff9966; color:#ffffff;">#ff9966</td>
 <td style="background-color:#ff9999; color:#ffffff;">#ff9999</td>
 <td style="background-color:#ff99cc; color:#ffffff;">#ff99cc</td>
 <td style="background-color:#ff99ff; color:#ffffff;">#ff99ff</td>
 </tr>
 <tr>
 <td style="background-color:#ffcc00; color:#333333;">#ffcc00</td>
 <td style="background-color:#ffcc33; color:#333333;">#ffcc33</td>
 <td style="background-color:#ffcc66; color:#333333;">#ffcc66</td>
 <td style="background-color:#ffcc99; color:#333333;">#ffcc99</td>
 <td style="background-color:#ffcccc; color:#333333;">#ffcccc</td>
 <td style="background-color:#ffccff; color:#333333;">#ffccff</td>
 </tr>
 <tr>
 <td style="background-color:#ffff00; color:#333333;">#ffff00</td>
 <td style="background-color:#ffff33; color:#333333;">#ffff33</td>
 <td style="background-color:#ffff66; color:#333333;">#ffff66</td>
 <td style="background-color:#ffff99; color:#333333;">#ffff99</td>
 <td style="background-color:#ffffcc; color:#333333;">#ffffcc</td>
 <td style="background-color:#ffffff; color:#333333;">#ffffff</td>
 </tr>
</table>
</body>
</html>

表示するとこんな感じです。
投稿者 時刻:
ラベル: , ,

月曜日, 7月 27, 2026

グリーンの色が一般と業界で かなり違う

グリーンの色が一般と業界で、かなり違う事が気になって居ます。

発端はクレヨンの色

ところがRGBだとこうなります

ところがCMYKは、こんな感じ

HTMLはクレヨンと同じ感じ・・・
そもそもRGB以外のgreenはdarkgreenなのに、RGBのgreenはどう考えてもgreenyellowですよね〜。気にすると眠れなくなるので忘れることにします。（^o^）汗
投稿者 時刻:
ラベル:

木曜日, 7月 09, 2026

写真撮影時の必須アイテム「カラーチェッカー クラシック」を作成してみる

BlogやFacebookにアップする写真は，オートで正直適当に撮影していますが、仕事で関わる場合は神経を使います。ホワイトバランスにカラーチェッカー クラシックですね。

特にカラーチェッカー クラシックは本気で調達すると200万円ほどします。一般的なモノでも数万円ですね。実は昔購入した当時最安値のモノを紛失してしまったのでIllustratorで手作りしていました。

カラーチェッカー クラシック（ColorChecker Classic）の24色の基準値を確認する方法はいくつかありますが、
色管理やカメラプロファイル作成の分野では、BabelColor が公開している ColorChecker の測色データが事実上の標準としてよく使われおり、様々な情報収集ができます。

BabelColor の公開データは以下でダウンロード可能で・・・
BabelColor ColorChecker Pages (Page 2)
BabelColor ColorChecker Pages (Page 1)

以下のファイルが公開されています。

ColorChecker24_After_Nov2014.txt
ColorChecker24_Before_Nov2014.txt
Excel形式の測色データ
Lab、XYZ、sRGB、Adobe RGB
スペクトル反射率データ

私はD50のRGB値をIllustratorで設定して見ました。

厚手のマット紙にプリントすれば完成です。
投稿者 時刻:
ラベル: ,

土曜日, 6月 06, 2026

IllustratorでPhotoshopとInDesignのスウォッチ作成

質問がありましたので・・・
自分では過去に解説していたと思っていましたが、探しても無かったので・・・
IllustratorでPhotoshopとInDesignのスウォッチ作成の手順を整理しました。

Illustratorで基準となる矩形を上の様に作成します。

ここで［オブジェクト］＞［ブレンド］＞［作成］で4つの矩形を時計回りでクリックし、最後に基点の矩形をクリックします。

そのまま［オブジェクト］＞［ブレンド］＞［拡張］にて・・・

実データに変換します。

続けて上図の様に残りの部分もブレンド処理します。

全てを［オブジェクト］＞［ブレンド］＞［拡張］にて実データ化したら、全選択で・・・

スウォッチパレットの［新規スウォッチグループ］をクリックし・・・

名前を付けて［OK］すれば・・・

スウォッチに登録されます。

あとは、スウォッチオプションにて［スウォッチライブラリを交換用として保存］すれば完了です。PhiotoshopやInDesignで読み込めばそれぞれのスウォッチに登録されます。ちなみにPhotoshop用ははIllustratorはRGBモードのドキュメントで作成です。
投稿者 時刻:
ラベル: , , ,

日曜日, 7月 13, 2025

色温度とWhiteの関係

色温度と、その時のWhiteの色の関係を整理してみました。

2000Kから8000Kまでの色温度と、その状態で見える白色です、色温度が低いとオレンジ色に、高いと青みが掛かります。

上段左端から・・・
2000K、3000K、4000K、5000K
下段左端から・・・
6000K、6500K、7000K、8000K
 
投稿者 時刻:
ラベル: ,

日曜日, 5月 11, 2025

ホワイトバランスカードを自作してみた

ホワイトバランスカードを自作してみました。

需要なのは18%のグレーの色ですね。


これは以下の様になります。
R: 105, G: 105, B: 105
C: 56, M: 47, Y: 44, K: 0
Hex (16進数):
#777777（中間グレー）

黒と白はそのままでOKです。

反射率 18% のグレー
カメラや測光では、18% の反射率が「中間グレー」として使われる。
sRGB 値では (105, 105, 105) で表される。
Lab 色空間では L ≈ 50* に相当する。

「黒 50%」(K=50%) は「反射率 18% のグレー」より明るい（約 35–40% 反射）。
ディスプレイ上の「50% グレー」(RGB 128,128,128) も 18% グレーより明るい（約 22–25% 反射）。カメラや測光の基準では「中間グレー」=「反射率 18%」=「Lab L = 50」。
印刷の「黒 50%」は「反射率 18% のグレー」より約 10% ほど明るい。よって、「黒 50%」と「反射率 18% のグレー」は 厳密には異なる ものの、用途によっては 近い基準 として扱われることがある。

これを厚手のマット用紙に印刷してお菓子の箱程度の厚紙（※）に貼れれば完璧です。写真の右が自作品で、左が市販のホワイトバランスカードです。

※インクジェットプリンタ用紙に入っている厚紙がい感じです。

それぞれのカードの目的は・・・
グレー（18%反射グレー）
    ホワイトバランス設定 & 露出補正
    基準色としてカメラが正しい色を認識できる

白（高反射ホワイト）
    ハイライトの確認 & 白飛び防止 最大輝度の基準
    適正露出の判断

黒（低反射ブラック）
    シャドウの確認 & 黒つぶれ防止 最小輝度の基準
    コントラスト調整
投稿者 時刻:
ラベル: , ,
登録: 投稿 (Atom)