HEXカラー明度計算機

色(HEX)の明るさを、相対輝度・知覚的な明度(L*)・HSLの明度・YIQの明るさで計算し、背景にしたときの文字色を示します。

知覚的な明度 L*(0〜100)—

相対輝度(0〜1)—
HSLの明度—
YIQの明るさ(0〜255)—
背景にしたときの読みやすい文字色—

計算式

使い方のヒント

同じHSLの明度でも、色相によって、実際の見た目の明るさは、大きく違います(黄色は明るく、青は暗く見える)。デザインで明るさをそろえたいときは、L*を見ると、見た目に近い比較ができます。

関連ツール

よくある質問

HEXカラー明度計算機では何がわかりますか？

色(HEX)の明るさを、相対輝度・知覚的な明度(L*)・HSLの明度・YIQの明るさで計算し、背景にしたときの文字色を示します。

何を入力すればいいですか？

次の項目を入力します: 色(HEX)。内容を変えると、結果もそれに合わせて変わります。

結果にはどんな項目が表示されますか？

「知覚的な明度 L*(0〜100)」「相対輝度(0〜1)」「HSLの明度」「YIQの明るさ(0〜255)」「背景にしたときの読みやすい文字色」などが表示されます。

どんな計算式を使っていますか？

ページ内の「計算式」にまとめています。たとえば「相対輝度(WCAG)から、L* = 116 × ³√Y − 16 (Yが小さい場合は、別の式)」のような式です。

入力した値は外部に送信されますか？

いいえ。処理はお使いのブラウザの中だけで行い、サーバーには送信しません。

結果はどのくらい正確ですか？

色の見え方はモニターや印刷で変わります。サイズや比率は計算どおりですが、仕上がりは実際に書き出して確認してください。

結果をコピーできますか？

はい。「結果をコピー」ボタンで、表示されている結果をクリップボードにコピーできます。

スマホでも使えますか？

はい。画面の幅に合わせて表示されます。アプリのインストールや会員登録は必要ありません。

同じカテゴリ(色・配色・グラデーション)の他のツールはありますか？

はい。HEX/RGB/HSL変換機、カラーパレット抽出、カラーピッカー、HEX→RGB→HSL変換機などがあります。

関連記事