今回の仕上がり
公式ツールで青色の#336699を入力すると、oklch(0.4993 0.0987 250.43)と表示されました。Lを0.7へ変えると、CとHはそのまま、HEXは#6ea3daになりました。生成値の桁数は画面の表示に合わせています。
background: oklch(0.7 0.0987 250.43);
/* 今回のツール表示：#6ea3da */HEXを入力し、Lを変える
- 公式ツールの上部、HEX/RGBAの入力欄へ#336699を入れ、Enterを押します。
- 隣のOKLCHの欄が更新されるまで待ちます。Lは明るさ、Cは鮮やかさ、Hは色相です。
- LightnessのL欄を0.7にし、Enterを押します。色の面と上部のCSS・HEX表示を確認します。
- 出力を自分のCSSへ写し、実際の文字や背景と組み合わせて確認します。
今回の操作にはアカウント作成・インストール・支払いは必要ありませんでした。色のCSSを選ぶ助けになりますが、ページ全体の配色や文字の読みやすさが自動で保証されるわけではありません。
使いどころと注意点
同じ色相のまま明るさを調整したいときに便利です。ただしLだけを変えたことと、背景に対する文字のコントラストが基準を満たすことは別です。コントラストを比べる自作例も使い、文字と背景の組を確認してください。
P3・Rec2020やFallbackの入口もありますが、今回はsRGB内の1色を操作した確認です。広色域の変換精度、全端末の色再現、印刷、全通信の監査は未確認。画面の見え方はディスプレイでも変わります。
作者・出典・確認範囲
公式画面の作者表記はAndrey Sitnik様・Roman Shamin様、制作はEvil Martiansです。公式リポジトリとライセンス全文を確認・保存しました。ツールのソフトウェア条件と、選んだ色を使うサイトの品質確認を分けて扱います。
確認日：2026年10月15日。最近のXでの流行やAI利用は確認しておらず、断定しません。スマホ実機での編集、すべての色・機能は未検証です。