CSSフィルタ実験場
CSS Filter Playground
サンプルにぼかし・明度・彩度・色相・ドロップシャドウのフィルタを重ねて試し、CSSを出力します。
CSSのフィルタ関数を見本の上に重ねて、宣言を渡します。プレビューはブラウザ自身の`filter`プロパティで描いているので、見えているものは定義上そのCSSがすることそのものであって、その近似ではありません。ここでの追加分は等価な`feColorMatrix`です。ぼかしとドロップシャドウを除けば、これらの関数はどれもRGBAについてアフィンなので、8つの連なりが20個の数にまとまります。
プレビュー
ブラウザ自身の filter プロパティで描いています。だからこれは下の CSS がすることの近似ではなく、そのものです。
CSS
フィルター
使い方
何を見るか選びます
単色の見本は特定の色に何が起きるかを、グラデーションはグレーを含む幅の中で何が起きるかを、自分の画像は実際にフィルタをかける対象に何が起きるかを見せます。出す前の判断は最後のもので行ってください。
必要な関数だけ動かします
中立の値のままのものは出力から完全に外れるので、CSSは実際に変えた分だけの短さに保たれます。順序は意味を持ち、一覧の並びどおりになります。
ドロップシャドウが要るなら最後に足します
別のブロックになっているのは、量ひとつではなく3つの数と色を取るからで、またアルファチャンネルをたどるからです。透明なPNGなら、箱ではなくその形をなぞります。
CSSを取るか、行列を取ります
CSSはスタイルシートのためのものです。`feColorMatrix`はSVGフィルタやシェーダ、あるいは行列1回の掛け算で済むことに8回のパスを走らせるのを避けたいパイプラインのためのものです。
よくある質問
行列にぼかしが入っていないのはなぜですか。
空間的な処理だからです。ぼかしたピクセルは周囲のピクセルに依存しますが、カラーマトリクスは常に1ピクセルずつしか見ません。ドロップシャドウも同じです。パネルはまとめられなかったものを名指しし、黙って落とす代わりに別の段として残します。
hue-rotate(180deg)で補色になりませんでした。
決してなりません。この関数は非線形なRGB立方体の輝度軸まわりの回転で、仕様が固定の行列で定義しています。知覚的な色相の回転ではありませんし、そう設計されてもいません。実際の補色が要るなら、カラーコード変換か配色パレット生成でOKLCHの色相を回してください。
grayscale(1)は正しい輝度係数を使っていますか。
仕様が定めている係数、つまりRec. 709を、ガンマ符号化された値に適用しています。非線形な値に輝度の重みをかけるのは厳密には誤りで、正しい彩度落としはまず線形化します。仕様がこの手順を定め、ブラウザもそのとおりにするので、ここでは訂正せずにその食い違いを再現します。ブラウザと一致することが目的だからです。
backdrop-filterも扱えますか。
関数は同じなので、コピーした値はそちらでも有効です。違うのは入力です。`backdrop-filter`は要素ではなく、要素の背後に描かれているものにフィルタをかけます。だからここのプレビューでは、すりガラスのパネルが実際のコンテンツの上でどう見えるかは分かりません。ページに貼って目で確かめてください。
ここから渡せます
ボックスシャドウ生成
Box Shadow Generator
複数枚重ねたボックスシャドウとテキストシャドウをプレビューしながら組み立て、CSSを出力します。
カラーピッカー
Colour Picker
OKLCHの色域から、画面のスポイトで、またはアップロードした画像から色を選び、好きな表記でコピーします。
カラーコード変換
Colour Format Converter
HEX・RGB・HSL・HWB・LAB・LCH・OKLCHのあいだで色を変換し、いちばん近い色名も示します。
コントラスト比チェッカー
Contrast Checker
文字色と背景色の組み合わせをWCAG 2とAPCAで採点し、基準を満たす最も近い色を提案します。
次の一手
このツールが出したものをそのまま受け取れる道具です。
CSS整形・圧縮
CSS Beautifier & Minifier
並べ替えを一切せずにCSSを整形または圧縮し、トークンの並びをそのまま保ちます。
明るさ・色の補正
Brightness & Colour Adjust
ヒストグラムを見ながら明るさ・コントラスト・彩度・色温度・シャープネスを調整します。
ボックスシャドウ生成
Box Shadow Generator
複数枚重ねたボックスシャドウとテキストシャドウをプレビューしながら組み立て、CSSを出力します。
カラーコード変換
Colour Format Converter
HEX・RGB・HSL・HWB・LAB・LCH・OKLCHのあいだで色を変換し、いちばん近い色名も示します。
カラーピッカー
Colour Picker
OKLCHの色域から、画面のスポイトで、またはアップロードした画像から色を選び、好きな表記でコピーします。
コントラスト比チェッカー
Contrast Checker
文字色と背景色の組み合わせをWCAG 2とAPCAで採点し、基準を満たす最も近い色を提案します。