カスタムカラー画面
色を選ぶか、すでに手元にある色のHEX値を貼り付けると、画面全体がその色になります。色そのものが大事なときに役立ちます。大きさで確かめたいブランドカラー、2台のモニターで比べたい色味、あるいは単に、よくある5色以外の背景が欲しいときに。
いつでもEscキーを押せば、このページに直接戻れます。
正確な色が大事なとき
- ブランドカラーを実寸で見る。資料の中の色見本と、同じ値で埋まった壁一面は、まったく違って見えます。ポスターや什器になる前に、それを知っておく価値があります。
- 2台のディスプレイを比べる。同じHEX値を両方に出して正面に座れば、2枚のパネルの白色点や彩度の差は、議論の対象ではなく目で見えるものになります。
- ほかにない色の背景を作る。商品撮影用の特定の青、真っ黒より目に優しい黒に近いグレー、ビデオ通話の背後に置くやわらかい暖色など。
- ディスプレイやカメラに、意図した既知の値を見せる。中間グレーが本当に中立か、深い色にバンディングが出ないか、プロジェクターが送った色と一致するか、といった確認です。
HEX値の意味
HEXカラーは、赤・緑・青それぞれを00からffで表す3組の数字を、シャープのあとに書いたものです。つまり#ff0000は赤が最大でほかはゼロ、#808080は全チャンネルが半分、#3b82f6はこのページが最初に表示する青です。3桁の書き方は各桁を2回繰り返す省略形なので、#f80と#ff8800は同じ色です。それ以外の入力は、推測せずに拒否します。
最近使った色の保存先
このブラウザのローカルストレージの中、このサイト専用のキーの下です。どこにも送信されません。このページには送る先がないからです。ブラウザごと、端末ごとに別なので、ノートPCで作った一覧はスマホには出ませんし、ブラウザのデータを消せば一緒に消えます。
よくある質問
色のHEX値はどこで分かりますか？
ブランドガイドラインには記載がありますし、デザインツールならカラーパネルに出ます。どのOSにもスポイト付きのカラーピッカーがあり、画面上のものから値を読み取れます。手元にあるのが59 130 246のようなRGBの3つ組だけでも、変換ツールがHEX値にしてくれますし、このページのピッカーは入力だけでなくドラッグでの指定も受け付けます。
色は正確ですか？
指定した値そのものが、sRGBとしてディスプレイへ送られます。そこから先、ディスプレイが何を出すかは、パネル、画質モード、明るさ、そのとき夜間モードが全体を暖色に寄せているかどうかで決まります。同じHEX値を出した2台の画面がしばしば食い違うのはそのためで、色が要となる作業がブラウザのタブではなくキャリブレーションしたディスプレイを使うのもそのためです。
なぜ明るさではなく減光なのですか？
ウェブページには色を暗くすることしかできず、明るくすることはできないからです。減光は、選んだ不透明度で色の上に黒を重ねます。モニターのバックライトやスマホの明るさに届くブラウザのAPIはないので、ウェブページから画面を明るくできると言うものは、より明るい絵を見せているだけです。
色を永久に保存できますか？
最近使った色の一覧が直近のものを自動で覚えますが、短い一覧なので順に押し出されます。来月また必要になる色は、ブックマークではなくHEX値をメモしてください。6文字のメモはどんなブラウザの保存領域より長生きしますし、ここへ貼り直すのは一瞬です。