色を混ぜる方法
異なるカラースペースで 2 色以上を、比率を調整しながらブレンドします。
问题
ホバー状態やトランジションなどの中間色を作るために、2 色をブレンドする必要があります。
前提条件
- カラーモデルの理解
- ブレンドモードに関する知識
ステップ
-
1. Choose the color space for mixing
Mixing in RGB averages each channel independently, which can produce muddy midpoints. Mixing in HSL preserves hue and saturation better. Mixing in OKLCH (a perceptual space) produces the most natural-looking gradients. Choose based on the desired visual result.
入力mix in OKLCH输出perceptually uniform -
2. Set the mix ratio
Specify how much of each color to use: 50/50 for an even blend, 70/30 for a bias toward the first color. The ratio determines the position of the result between the two colors. Some mixers support multiple colors with weighted ratios.
入力red + blue, 50/50输出purple -
3. Compute and output the result
Convert both colors to the chosen color space, interpolate at the specified ratio, and convert back to the output format (HEX, RGB, HSL). Verify the result visually. For CSS, use the color-mix() function: color-mix(in oklch, red, blue).
入力color-mix(in oklch, #FF0000 50%, #0000FF)输出#800080 (approx)
期待される結果
入力された色を指定した割合で混ぜ合わせた色。
よくあるエラー
- Muddy midpoint in RGB mixing
- RGB mixing can produce grayish midpoints for complementary colors. Mix in HSL or OKLCH for more vibrant results.
- Hue wraps incorrectly
- When mixing in HSL, hue is circular (0° and 360° are the same). Interpolate along the shorter arc to avoid going the long way around.
トラブルシューティング指引
- If the mixed color looks wrong, try a different color space.
- CSS color-mix() is modern; check browser support or precompute the value.
セキュリティ上の制限
- Color mixing is a pure calculation with no security implications.