색상 믹서 - 온라인 색상 혼합 도구
RGB 또는 HSL 색공간에서 조절 가능한 비율로 두 개 이상의 색상을 혼합합니다. 그라디언트 미리보기 및 결과 복사 — 100% 클라이언트 처리, 서버 전송 없음.
자주 묻는 질문
색상 믹서란 무엇인가요?
색상 믹서는 두 개 이상의 색상을 설정 가능한 비율로 혼합하여 새로운 중간 색상을 만드는 온라인 도구입니다. 선택한 색공간(RGB 또는 HSL)에서 입력 색상 간의 수학적 보간을 계산하고, 결과를 여러 형식(HEX, RGB, HSL)으로 출력합니다. 호버 상태, 전환 중간점, 기존 디자인 색상의 조화로운 중간색을 도출하는 데 유용합니다.
이 도구는 어떻게 사용하나요?
1. HEX 입력 필드 또는 시각적 색상 선택기를 사용하여 두 가지 색상을 입력합니다. 2. 혼합 비율 슬라이더를 조절하여 각 색상의 기여도를 제어합니다 (0% = 순수 색상 1, 100% = 순수 색상 2). 3. 선택적으로 RGB와 HSL 혼합 모드를 전환합니다. 4. HEX, RGB, HSL 값과 함께 결과 색상을 확인합니다. 5. 출력 값을 클릭하여 클립보드에 복사합니다. 6. 다중 색상 혼합을 위해 색상을 추가하거나, 그라디언트 단계 미리보기로 중간 색상을 확인할 수 있습니다.
색상 데이터가 안전한가요? 서버로 전송되나요?
색상 데이터는 100% 안전하며 브라우저를 떠나지 않습니다. 보간, 형식 변환, 그라디언트 생성 등 모든 색상 혼합 계산은 JavaScript 수학 연산을 사용하여 전적으로 클라이언트 측에서 수행됩니다. 서버로 전송되는 데이터는 없습니다.
RGB 혼합과 HSL 혼합의 차이점은 무엇인가요?
RGB 혼합은 빨강, 초록, 파랑 채널을 각각 독립적으로 보간합니다. 단순하고 예측 가능하지만, 색상환에서 멀리 떨어진 색상(예: 빨강과 시안)을 혼합할 때 탁하거나 회색빛 중간색이 생길 수 있습니다. HSL 혼합은 색상, 채도, 명도를 별도로 보간합니다. 색상 보간은 360도 색상환의 최단 경로를 따르므로, 더 생생하고 직관적인 결과를 만들어냅니다.
두 개 이상의 색상을 혼합할 수 있나요?
네. '색상 추가' 버튼을 클릭하여 추가 색상 입력을 추가할 수 있습니다(최대 8개). 각 색상에는 가중치 제어가 있으며, 결과는 RGB 공간에서 모든 입력 색상의 가중 평균입니다.
혼합 비율은 어떻게 계산되나요?
두 색상의 경우, 비율 슬라이더는 0%에서 100%까지의 선형 보간 계수를 제어합니다. 0%에서는 순수 색상 1, 50%에서는 동일한 혼합, 100%에서는 순수 색상 2입니다. 공식: result = color1 × (1 - ratio/100) + color2 × (ratio/100). 다중 색상 혼합에서는 각 색상의 가중치를 총 가중치 합으로 나누어 기여 비율을 결정합니다.
그라디언트 단계란 무엇인가요?
그라디언트 단계 미리보기는 두 입력 색상 사이의 중간 색상을 보여주는 스트립입니다. 3에서 10 단계를 선택할 수 있습니다. 각 단계는 색상 1에서 색상 2로의 전환에서 다른 혼합 비율을 나타냅니다. 각 단계를 클릭하여 색상 값을 복사할 수 있습니다.
코드 예제
// Color Mixer
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (!result) return null;
return {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
};
}
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, '0'))
.join('');
}
function mixColorsRgb(hex1, hex2, ratio = 0.5) {
const c1 = hexToRgb(hex1);
const c2 = hexToRgb(hex2);
if (!c1 || !c2) return null;
const t = Math.max(0, Math.min(1, ratio));
return rgbToHex(
c1.r * (1 - t) + c2.r * t,
c1.g * (1 - t) + c2.g * t,
c1.b * (1 - t) + c2.b * t,
);
}
function generateGradientSteps(hex1, hex2, steps = 5) {
const result = [];
for (let i = 0; i < steps; i++) {
const ratio = steps === 1 ? 0.5 : i / (steps - 1);
result.push(mixColorsRgb(hex1, hex2, ratio));
}
return result;
}
// Usage
const blue = '#3b82f6';
const red = '#ef4444';
console.log('50/50 mix:', mixColorsRgb(blue, red, 0.5));
console.log('Gradient:', generateGradientSteps(blue, red, 5));