このウェブサイトの色をちょっと変えて、hsl()などでカンマを抜いて指定するようにしはじめた。でも、ベースラインの色はカンマ付きのままじゃないといけないので、こうすると一貫性がなくなる。ツールでどうにかすると簡単だけど、手軽に確認できなくなるし、なるべく避けたい。ベースラインでは元々正確な再現を目指していないので、近い色名を利用することにした。目で近い色を探すのは大変そうなので、機械的に探せるように、あわせて色入力フォームで選んだ色とコントラスト比が低い順で色名を並べるツールも作成した。
背景色のhsl(45 50% 95%)はoldlaceに、文字色のhsl(45 20% 10%)はblackに、ハイパーリンクのhsl(225 80% 54%)はslateblueになる。近い色といっても知覚的に考えるコードを書くのは難しそうだったので、機械的にコントラスト比で判断するだけ。最終的にはトップ10くらいから目でイメージが近いものを選ぶ。なんとなくはなんとかなる。
でも近くて遠い色になりやすい。近さが強調されてしまうというか。実際に完全なスタイルとベースラインを比較することはないので、この近くて遠い感じが表面化することはないが、確認していると気になってしまう。なので、特集ページでも使うことを考慮して、グレー系に丸めることにした。ハイパーリンクにslateblueだけは使った。
あらためて色名を眺めていると、ずいぶんと明るい色に偏っていることがわかる。ほとんど白みたいな色が何色もあるのに対して、ほとんど黒という色はまったくない。グレーだけを見てみても、grayより明るいものはdarkgray、silver、lightgray、gainsboro、whitesmokeとあるけど、暗いものはdimgrayしかない。ダーク・モードの時代なので、もっと暗い色が増えても良さそう。
色名には、ウェブ・セーフ・カラーよりも微妙な色が豊富にあるので、これだけにしても面白いかなーと思ったけど、どうも無理がある。ダーク・モードでない場合でも暗い色、特にグレーは使いたい。#202020(jet)、#303030(charcoal)と#505050(ebony)くらいのグレー(カッコ内の名称は以前にここのパレット定義で使っていた名前)があればなんとかなりそうだけど、ないものはない。