CSS color-mix()ジェネレーターとは
CSS color-mix()ジェネレーターは、ホバー、ボーダー、背景、控えめなテキスト用のCSS color-mix()呼び出しを生成します。 出力は公開サイトに使う前に確認しやすい形で表示されます。
Quick answer
Use color-mix() to blend two colors in a specified color space, such as oklab or srgb. It is useful for creating tint, shade, and hover variants from a single base color without a preprocessor.
Limitations
- color-mix() requires Chrome 111+, Edge 111+, Safari 16.2+, and Firefox 113+. Older browsers do not support it and will ignore the declaration.
- The oklab color space produces more perceptually uniform results than srgb. Mixing in srgb can create muddy intermediates.
- color-mix() may not reference CSS custom properties that contain color-mix() output in some older browser versions due to property cycle detection.
使い方
- 必要な値を入力します。
- 結果パネルの出力を確認します。
- ページに合う部分だけコピーします。
- 公開前にブラウザとホスティング環境で確認します。
主な用途
- 公開前の繰り返し作業を短くする。
- マークアップ、CSS、チェックリストを準備する。
- 静的サイトで見落としやすい小さなミスを減らす。