カラーチェッカーを作ってみる

サイトのGAMES内にカラーチェッカーを追加しました。
あとせっかく作ったのでitch.ioのLFCheckPlayerへのリンクも追加。

カラーチェッカーはよくあるRGB値を入力して色を確認するアレです。アレなのですが、RGBを100段階で入力できるものがぱっと出てこなかったので作ってみました。
ゲームでColor(0.9, 0.5, 0.3, 1.0)とか入力するときにカラーコードがどうだっかと確認するのが割と手間だったりするんですよね。
確認しやすいように0~255の色指定と0~100の色指定をまとめてみたのがこちらになります。

ついでにW3C日本語訳)が定めている背景色と前景色のコントラスト比も出るようにしています。
読みやすい文字の基準として、背景色と文字色のコントラスト比が4.5:1以上であることが望ましいとのことです。文字が大きい場合は3:1以上。
配色の補助として使える値かと思います。


作るにあたって久しぶりにHTMLとjavascriptに多めに触れることになりましたが、カラーピッカーがブラウザ標準で付いていることをこのタイミングで知りました。
スマートフォンは勿論FirefoxとChromeでもカラーピッカーのUIが全く違って個性が出ますね。

あとVSCodeでCSSを開いてみたら以前から使っているこのサイトのスタイルシート内に文法ミスが出ていたので修正しました。メモ帳では見過ごす間違いが一目で分かる親切さはまさに文明の利器。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です