記事本文
カラー関連の情報を各形式で CSS 内に記述
Lucky bag::blog: カラー関連の情報を CSS 内に記述という「ちょっとしたことなんだけど実は便利」な記事を受けて。 ちなみに本題に入る前の前振りとして、仕様についてつらつらと語っているため、サンプルだけ手っ取り早く見たいという方はそのセクションを直接参照してください。 というか本題より前振りの方が長いです。
Lucky bag::blog の e-luck さんはカラーネームと 16 進記法と関数的記法を紐付けて書いていますが、関数的記法のパーセント値ってあまり使われていないのかなあと思いました。
まあ、かくいう私も色情報は専ら 16 進記法による指定 ( #800080 のような指定 ) を使っていますが。
ただ、 rgb(128,128,128) という数字よりも、 rgb(50%,50%,50%) という書き方の方が直感的に色をイメージできそうな気がしませんか ?
しませんか、そうか。
Cascading Style Sheets, Level 2 における色の指定方法
CSS の仕様ではどのようにして色を指定すると示されているでしょうか。 現時点での Recommendation である CSS の仕様は Cascading Style Sheets, Level 2 ですので、今回は基本的にはこの仕様およびその邦訳を元に確認していきます。 CSS2 syntax and basic data types - 4.3.6 Colors によると、
A <color> is either a keyword or a numerical RGB specification.
The list of keyword color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16 colors are defined in HTML 4.0 ([HTML40]). In addition to these color keywords, users may specify keywords that correspond to the colors used by certain objects in the user's environment. Please consult the section on system colors for more information.
<color>は，キーワード又は数値RGB指定のいずれかとする。
キーワード色名は，aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellowとする。 これらの16色は，HTML 4.0([HTML40])で定義される。 これらの色キーワードに加えて，利用者は，利用者の環境のオブジェクトが使用する色に対応するキーワードを指定してもよい。 更なる情報を入手したい場合は，システム色を参照すること。
と示されています。
キーワードで指定できる色は引用文中にあるように 16 色 ( ただし CSS 2.1 では追加色として Orange (#ffA500) が新たに加えられています。 ) だけですので、多くの場合は数値による RGB 指定を行うことになると思います。
なお、カラーネームで検索すると、キーワードによる 16 色以外の色名も色々とヒットしますが、これはあくまでブラウザが内蔵している機能であり、色名によっては、また UA によっては予想した色と違うものになる可能性があることに注意してください。
The format of an RGB value in hexadecimal notation is a '#' immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.
The format of an RGB value in the functional notation is 'rgb('followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ')'. The integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Whitespace characters are allowed around the numerical values.
16進記法のRGB値のフォーマットは，'#'で始まり，その直後に3桁又は6桁の16進数が続くものとする。 3桁の数字のRGB記法(#rgb)は，ゼロを付加するのではなく，数字を重複させることによって，6桁の形式(#rrggbb)に変換される。 例えば，#fb0は#ffbb00に展開される。これによって，確実に白(#ffffff)は短い記法(#fff)で指定でき，ディスプレイの色ビット幅への依存性が除去される。
関数的記法でのRGB値のフォーマットは，'rgb('で始まり，これに三つの数値(三つの整数値又は三つのパーセント値のいずれか)をコンマで区切ったリストが続き，さらに')'が続くものとする。 整数値255は100%に対応し，16進記法でのF又はFFに対応する。 すなわち，rgb(255,255,255) = rgb(100%,100%,100%) = #FFFである。 空白文字が，数値の前後にあってもよい。
このように、 RGB 値の指定方法は 16 進数による記法と、関数的記法の 2 つに分かれ、更に関数的記法は <integer> 形式と <percentage> 形式に分かれます。
RGB 関数的記法における <integer> 形式と <percentage> 形式
さて、これらの形式について考えてみましょう。
まず <integer> 形式というのは文字通り整数値で、
The integer value 255 corresponds to 100%
と、 255 = 100% として指定します。
なお、 CSS 2 では
EM { color: rgb(255,0,0) } /* integer range 0 - 255 */
と、 0 から 255 までの間で指定するようにコメントで示されていましたが、 CSS 2.1 では
em { color: rgb(255,0,0) }
と、そのコメントが削除されている点にも留意してください。
( Changes - C.3.6 Section 4.3.6 も併せて参照してください。
Deleted the comments about range restriction after the following examples:
と明示されています。 )
次に <percentage> 形式ですが、これは整数値 255 を 100% としたパーセント値で指定します。
こちらも同様に CSS 2 では
EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
と、 0.0% から 100.0% までの間で指定するようにコメントで示されていましたが、 CSS 2.1 では
em { color: rgb(100%, 0%, 0%) }
と、そのコメントが削除されています。
なお、<percentage> 形式は
The format of a percentage value (denoted by <percentage> in this specification) is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a <number> immediately followed by '%'.
のように、 + または - の符号付き ( 付けない場合のデフォルト値は + ) の実数の後に、 % を付けて指定することになっています。
RGB 関数的記法における <percentage> 形式はどこまで計算すべきか
<percentage> 形式には整数でなく実数が使えますが、 255 を 100% とする場合、たいていの値は小数点以下がずらずらと続くことになります。 例えば整数値で 51 の場合は割り切れて 20.0% になりますが、 55 の場合は約 21.568627... となりますので、ある程度のところで丸めを行うのが現実的でしょうか ?
試しに小数点以下を四捨五入した換算表を作ってみましたが、 10 進数の 4 も 6 も同じ 2% になりますね。 小数点第一位もしくは第二位くらいまでは指定した方が良いかもしれません。
| 10 進数 | 16 進数 | % |
|---|---|---|
| 0 | 00 | 0% |
| 1 | 01 | 0% |
| 2 | 02 | 1% |
| 3 | 03 | 1% |
| 4 | 04 | 2% |
| 5 | 05 | 2% |
| 6 | 06 | 2% |
| 7 | 07 | 3% |
| 8 | 08 | 3% |
| 9 | 09 | 4% |
| 10 | 0A | 4% |
| 11 | 0B | 4% |
| 12 | 0C | 5% |
| 13 | 0D | 5% |
| 14 | 0E | 5% |
| 15 | 0F | 6% |
| 16 | 10 | 6% |
| 17 | 11 | 7% |
| 18 | 12 | 7% |
| 19 | 13 | 7% |
| 20 | 14 | 8% |
| 21 | 15 | 8% |
| 22 | 16 | 9% |
| 23 | 17 | 9% |
| 24 | 18 | 9% |
| 25 | 19 | 10% |
| 26 | 1A | 10% |
| 27 | 1B | 11% |
| 28 | 1C | 11% |
| 29 | 1D | 11% |
| 30 | 1E | 12% |
| 31 | 1F | 12% |
| 32 | 20 | 13% |
| 33 | 21 | 13% |
| 34 | 22 | 13% |
| 35 | 23 | 14% |
| 36 | 24 | 14% |
| 37 | 25 | 15% |
| 38 | 26 | 15% |
| 39 | 27 | 15% |
| 40 | 28 | 16% |
| 41 | 29 | 16% |
| 42 | 2A | 16% |
| 43 | 2B | 17% |
| 44 | 2C | 17% |
| 45 | 2D | 18% |
| 46 | 2E | 18% |
| 47 | 2F | 18% |
| 48 | 30 | 19% |
| 49 | 31 | 19% |
| 50 | 32 | 20% |
| 51 | 33 | 20% |
| 52 | 34 | 20% |
| 53 | 35 | 21% |
| 54 | 36 | 21% |
| 55 | 37 | 22% |
| 56 | 38 | 22% |
| 57 | 39 | 22% |
| 58 | 3A | 23% |
| 59 | 3B | 23% |
| 60 | 3C | 24% |
| 61 | 3D | 24% |
| 62 | 3E | 24% |
| 63 | 3F | 25% |
| 64 | 40 | 25% |
| 65 | 41 | 25% |
| 66 | 42 | 26% |
| 67 | 43 | 26% |
| 68 | 44 | 27% |
| 69 | 45 | 27% |
| 70 | 46 | 27% |
| 71 | 47 | 28% |
| 72 | 48 | 28% |
| 73 | 49 | 29% |
| 74 | 4A | 29% |
| 75 | 4B | 29% |
| 76 | 4C | 30% |
| 77 | 4D | 30% |
| 78 | 4E | 31% |
| 79 | 4F | 31% |
| 80 | 50 | 31% |
| 81 | 51 | 32% |
| 82 | 52 | 32% |
| 83 | 53 | 33% |
| 84 | 54 | 33% |
| 85 | 55 | 33% |
| 86 | 56 | 34% |
| 87 | 57 | 34% |
| 88 | 58 | 35% |
| 89 | 59 | 35% |
| 90 | 5A | 35% |
| 91 | 5B | 36% |
| 92 | 5C | 36% |
| 93 | 5D | 36% |
| 94 | 5E | 37% |
| 95 | 5F | 37% |
| 96 | 60 | 38% |
| 97 | 61 | 38% |
| 98 | 62 | 38% |
| 99 | 63 | 39% |
| 100 | 64 | 39% |
| 101 | 65 | 40% |
| 102 | 66 | 40% |
| 103 | 67 | 40% |
| 104 | 68 | 41% |
| 105 | 69 | 41% |
| 106 | 6A | 42% |
| 107 | 6B | 42% |
| 108 | 6C | 42% |
| 109 | 6D | 43% |
| 110 | 6E | 43% |
| 111 | 6F | 44% |
| 112 | 70 | 44% |
| 113 | 71 | 44% |
| 114 | 72 | 45% |
| 115 | 73 | 45% |
| 116 | 74 | 45% |
| 117 | 75 | 46% |
| 118 | 76 | 46% |
| 119 | 77 | 47% |
| 120 | 78 | 47% |
| 121 | 79 | 47% |
| 122 | 7A | 48% |
| 123 | 7B | 48% |
| 124 | 7C | 49% |
| 125 | 7D | 49% |
| 126 | 7E | 49% |
| 127 | 7F | 50% |
| 128 | 80 | 50% |
| 129 | 81 | 51% |
| 130 | 82 | 51% |
| 131 | 83 | 51% |
| 132 | 84 | 52% |
| 133 | 85 | 52% |
| 134 | 86 | 53% |
| 135 | 87 | 53% |
| 136 | 88 | 53% |
| 137 | 89 | 54% |
| 138 | 8A | 54% |
| 139 | 8B | 55% |
| 140 | 8C | 55% |
| 141 | 8D | 55% |
| 142 | 8E | 56% |
| 143 | 8F | 56% |
| 144 | 90 | 56% |
| 145 | 91 | 57% |
| 146 | 92 | 57% |
| 147 | 93 | 58% |
| 148 | 94 | 58% |
| 149 | 95 | 58% |
| 150 | 96 | 59% |
| 151 | 97 | 59% |
| 152 | 98 | 60% |
| 153 | 99 | 60% |
| 154 | 9A | 60% |
| 155 | 9B | 61% |
| 156 | 9C | 61% |
| 157 | 9D | 62% |
| 158 | 9E | 62% |
| 159 | 9F | 62% |
| 160 | A0 | 63% |
| 161 | A1 | 63% |
| 162 | A2 | 64% |
| 163 | A3 | 64% |
| 164 | A4 | 64% |
| 165 | A5 | 65% |
| 166 | A6 | 65% |
| 167 | A7 | 65% |
| 168 | A8 | 66% |
| 169 | A9 | 66% |
| 170 | AA | 67% |
| 171 | AB | 67% |
| 172 | AC | 67% |
| 173 | AD | 68% |
| 174 | AE | 68% |
| 175 | AF | 69% |
| 176 | B0 | 69% |
| 177 | B1 | 69% |
| 178 | B2 | 70% |
| 179 | B3 | 70% |
| 180 | B4 | 71% |
| 181 | B5 | 71% |
| 182 | B6 | 71% |
| 183 | B7 | 72% |
| 184 | B8 | 72% |
| 185 | B9 | 73% |
| 186 | BA | 73% |
| 187 | BB | 73% |
| 188 | BC | 74% |
| 189 | BD | 74% |
| 190 | BE | 75% |
| 191 | BF | 75% |
| 192 | C0 | 75% |
| 193 | C1 | 76% |
| 194 | C2 | 76% |
| 195 | C3 | 76% |
| 196 | C4 | 77% |
| 197 | C5 | 77% |
| 198 | C6 | 78% |
| 199 | C7 | 78% |
| 200 | C8 | 78% |
| 201 | C9 | 79% |
| 202 | CA | 79% |
| 203 | CB | 80% |
| 204 | CC | 80% |
| 205 | CD | 80% |
| 206 | CE | 81% |
| 207 | CF | 81% |
| 208 | D0 | 82% |
| 209 | D1 | 82% |
| 210 | D2 | 82% |
| 211 | D3 | 83% |
| 212 | D4 | 83% |
| 213 | D5 | 84% |
| 214 | D6 | 84% |
| 215 | D7 | 84% |
| 216 | D8 | 85% |
| 217 | D9 | 85% |
| 218 | DA | 85% |
| 219 | DB | 86% |
| 220 | DC | 86% |
| 221 | DD | 87% |
| 222 | DE | 87% |
| 223 | DF | 87% |
| 224 | E0 | 88% |
| 225 | E1 | 88% |
| 226 | E2 | 89% |
| 227 | E3 | 89% |
| 228 | E4 | 89% |
| 229 | E5 | 90% |
| 230 | E6 | 90% |
| 231 | E7 | 91% |
| 232 | E8 | 91% |
| 233 | E9 | 91% |
| 234 | EA | 92% |
| 235 | EB | 92% |
| 236 | EC | 93% |
| 237 | ED | 93% |
| 238 | EE | 93% |
| 239 | EF | 94% |
| 240 | F0 | 94% |
| 241 | F1 | 95% |
| 242 | F2 | 95% |
| 243 | F3 | 95% |
| 244 | F4 | 96% |
| 245 | F5 | 96% |
| 246 | F6 | 96% |
| 247 | F7 | 97% |
| 248 | F8 | 97% |
| 249 | F9 | 98% |
| 250 | FA | 98% |
| 251 | FB | 98% |
| 252 | FC | 99% |
| 253 | FD | 99% |
| 254 | FE | 100% |
| 255 | FF | 100% |
JIS 慣用色のカラー関連の情報をまとめてみる
本当はこれから書く表だけを以って一つの記事にしようと思っていたのですが、 <percentage> 形式の RGB 関数的記法に換算していたときに、「あれ、パーセントの値を四捨五入して作っちゃったけど、確か <percentage> 形式の数字って整数じゃなくて実数だったよね......」と後から思い出してしまったので、長い長い前振りになったわけです。 まあ、仕様を読み返す良い機会だったので、今後のためにちょっと書かせてもらいました。
JIS Z 8102 に、物体色の色名が慣用色として示されているのですが、私はこれを参考にしてカラーリングを決めることがあります。 数値による指定だとどうしてもイメージが沸かないもので。 そこで冒頭に取り上げた Lucky bag::blog: カラー関連の情報を CSS 内に記述につながるのですが、その慣用色の色情報を一覧にしておくと後々楽だなあ ( 自分が ) ということで、一覧表を作ってみました。
Lucky bag::blog: カラー関連の情報を CSS 内に記述を参考にして、気に入った色の行を CSS ファイル内に書くと便利かもしれません。 また、 CSS に限らず RGB 形式で色を指定する時の簡易カラーチャートにしても良いかも。
トラックバック送信先
- Lucky bag::blog: カラー関連の情報を CSS 内に記述
-
カラー関連の情報を CSS 内に書くというアイデアをもらって、慣用色の一覧を作ってみました。 「○○なイメージに合う色」を一覧から探して CSS 内に記録してもらうと良いかも。
