색상 믹서
실시간 그라데이션 미리보기와 함께 RGB, RYB 감산, HSL 또는 지각적 Lab 혼합 모드를 사용하여 두 색상을 혼합하세요.
이 도구에 대해
색상 선택기를 사용하거나 16진수 값을 입력하여 두 색상을 선택한 후, 비율 슬라이더를 드래그하여 0~100% 사이의 어느 지점에서든 혼합하세요. RGB 가산, RYB 감산(전통적인 물감), HSL 보간, 지각적 Lab 혼합 등 네 가지 혼합 모델 중 선택하고, HEX, RGB, HSL 값으로 결과를 확인하세요. 5단계 그라데이션 띠는 두 색상 사이의 전체 범위를 보여줍니다.
사용 방법
- 1 1단계: 색상 선택기를 사용하거나 입력 필드에 16진수 코드를 직접 입력하여 색상 A와 색상 B를 선택하세요.
- 2 2단계: 모드 선택기에서 혼합 모델(RGB, RYB(물감 방식), HSL, 또는 Lab(지각적))을 선택하세요.
- 3 3단계: 비율 슬라이더를 드래그하여 혼합에서 색상 A와 색상 B의 비율을 설정하세요.
- 4 4단계: 혼합 색상의 HEX, RGB, 또는 HSL 값을 복사하고, 5단계 그라데이션 띠를 중간 색조의 참조로 사용하세요.
Why mixing two colors is not one simple answer
Ask what red and green make and you get two correct answers. Mix them as light and you get yellow; mix them as paint and you get a muddy brown. That is the whole story of this tool: blending two colors depends entirely on the model you mix in. This mixer takes two colors and a proportion slider and computes the blend four different ways, so you can see how the same inputs produce strikingly different outputs. It is not a color converter — it does not just translate one color between formats — it interpolates between two colors and shows the path between them as a five-step gradient.
| Mode | Models | Best for |
|---|---|---|
| RGB Additive | Mixing light | Screens, simple averages |
| RYB Subtractive | Mixing paint/pigment | Art, traditional color wheels |
| HSL Interpolation | Hue/saturation/lightness | Smooth hue rotation |
| Lab Perceptual | Human vision | Even-looking gradients |
Additive versus subtractive: the core distinction
Additive mixing (RGB) is how light works. Start from black and add colored light; the more you add, the brighter it gets, until red, green, and blue light combine to white. Mixing in RGB is a straight average of the red, green, and blue channels — fast and correct for anything displayed on a screen. Subtractive mixing (RYB) is how pigment works. Start from white paper and each pigment subtracts wavelengths; stack enough and you approach black. This is the color wheel taught in art class, where the primaries are red, yellow, and blue, and blue plus yellow makes green. The RYB mode converts each color into red-yellow-blue space, blends there, and converts back, so it reproduces the intuitive results painters expect — which RGB averaging cannot.
A worked example
Set Color A to pure blue #0000FF and Color B to pure yellow #FFFF00, with the slider at 50%. In RGB Additive mode the channel-by-channel average gives a flat gray-ish #7F7F00 — counter-intuitive, because averaging light does not behave like paint. Switch to RYB Subtractive and the same two colors blend toward green, exactly as mixing blue and yellow paint would. The tool even recognises classic pairings: feed it familiar combinations and it surfaces a paint-mixing note like "Blue + Yellow → Green" or "Red + White → Pink." The slider lets you weight the mix — at 25% you get a blend that is three-quarters Color A, useful for tinting one color slightly toward another.
The other two modes
HSL interpolation blends in hue–saturation–lightness space and, crucially, rotates the hue the short way around the color wheel. Blending red and cyan in HSL travels through the nearest arc rather than averaging to gray, which keeps intermediate steps colorful instead of washing out. Lab perceptual mode interpolates in the CIELAB color space, which is designed so that equal numerical steps look like equal visual steps to the human eye. Lab is the right choice when you want a gradient whose midpoint genuinely looks halfway between the ends — RGB gradients often appear to darken or muddy in the middle, and Lab fixes that.
Reading the output
For any blend the tool shows the result as a HEX value (one click to copy), plus its RGB and HSL equivalents, so you can drop the mixed color straight into CSS or a design file. Below that, the five-step gradient renders the blend at 0%, 25%, 50%, 75%, and 100% in your chosen mode — a quick way to compare how, say, RGB and Lab produce visibly different middle tones between the same two endpoints.
Practical use cases
- Picking a midpoint color between two brand colors for a hover state, a border, or a divider.
- Building gradients that look even — use Lab mode so the middle does not appear dull, a common flaw in naive CSS gradients.
- Predicting paint results with RYB before mixing physical pigments, or to teach traditional color theory.
- Generating tints and shades by mixing a color with white or black at varying proportions.
Common mistakes
- Expecting screen math to match paint. RGB averaging gives "wrong" results for pigment because light and paint mix by opposite physics. Use RYB when you mean paint.
- Assuming all gradients are equal. The same two endpoints produce different midpoints in each mode; if a gradient looks muddy, switch from RGB to Lab.
- Entering bad hex codes. The text inputs expect a full six-digit hex like
#FF6B6B; three-digit shorthand in the text field will not update until it is a valid six-digit value. - Treating the slider as opacity. It is a blend proportion between two solid colors, not transparency — 50% means an equal mix, not half-see-through.
All four conversions and the gradient are computed in your browser; no colors are sent anywhere. Mix, copy the HEX, and paste it wherever you need it.