画像とデザインツール

Color Mixer

「Color Mixer」は画像とデザインに使えるブラウザツールです。入力内容と結果は通常この端末内で処理され、登録は必要ありません。

ブラウザ内で処理登録不要プライバシーの説明 ↗
Color 1

Set to 0 to exclude this color.

Color 2

Set to 0 to exclude this color.

Color 3

Set to 0 to exclude this color.

Both modes output opaque sRGB. HSL hue wraps around 360°; RGB uses ordinary gamma-encoded channel values.

Mixed color

使い方

使い方

  1. Enter two to four source colors and adjust each contribution.
  2. Choose RGB for direct channel averaging or HSL for hue-aware interpolation.
  3. Review the result, contrast ratios, and color values, then copy or download the mix.

Two deliberately visible algorithms

RGB mode averages red, green, and blue channel values in ordinary gamma-encoded sRGB. HSL mode averages saturation and lightness and follows the shortest path around the hue wheel. Neither mode is perceptually uniform: for brand matching or print work, validate the result in a color-managed design tool.

Weights are normalized

Each source has a percentage-like weight. The calculation divides every weight by the total, so the mix still works when the visible values do not add to 100. At least two enabled colors are required, and empty or invalid entries are ignored.

Contrast is a reading aid

The displayed contrast ratios use the WCAG relative-luminance formula for the final sRGB color against pure white and pure black. They are guidance for this exact solid color; text size, font weight, anti-aliasing, surrounding colors, and non-solid backgrounds still need review.

よくある質問

あわせて知りたいこと

Which color space should I use?

RGB is the simplest and most predictable channel average. HSL can feel more intuitive when you want hues to travel around the color wheel, but its lightness and saturation are not perceptual measurements.

Why do RGB and HSL produce different results?

They interpolate different coordinates. RGB moves through red, green, and blue channel values, while HSL moves through hue, saturation, and lightness before converting back to sRGB.

Are alpha values supported?

This focused tool mixes opaque six-digit HEX colors. Transparency is outside the calculation, so use a compositing tool when the source colors or background include alpha.

Does the tool upload my colors?

No. Mixing, contrast calculation, copying, and the optional JSON download all happen in this browser.