색상 혼합기
색 견본뿐 아니라 알고리즘도 확인
색상 혼합기는 모든 결과 옆에 보간 공간을 표시합니다. 끝점과 비율을 바꾸지 않고 방식만 전환하므로 보이는 차이가 입력 변경이 아니라 계산 방식에서 생겼다는 점을 확인할 수 있습니다. 디자인 리뷰와 개발 전달에서도 선택 근거를 분명하게 설명할 수 있습니다.
두 색 · 3가지 공간 · 7단계 · 로컬 처리
정확한 디지털 블렌드를 만드는 온라인 색상 혼합기
두 HEX 색을 0부터 100까지 정확한 비율로 섞고, 세 가지 보간 색 공간을 같은 조건에서 비교하세요. 결과의 HEX, RGB, HSB 값을 확인하고 바로 사용할 수 있는 CSS color-mix() 선언도 복사할 수 있습니다. 이 색상 혼합기는 모든 계산을 브라우저 안에서 수행하며 팔레트, 인터페이스, 일러스트, 캐릭터 색 연구에 적용하기 전에 중간 색을 눈으로 검토하게 해 줍니다.
업데이트: 2026년 8월 11일
색상 혼합기
이 색상 혼합기는 무엇을 계산하나요?
이 색상 혼합기는 불투명한 두 sRGB 끝점 사이의 수학적 보간을 계산합니다. 각 끝점의 기여 비율을 정한 뒤 익숙한 웹 혼합을 위한 sRGB, 빛의 세기에 맞춘 선형 sRGB, 지각적으로 정돈된 경로를 위한 OKLCH 중 하나를 선택합니다. 세 공간이 서로 다른 좌표를 보간하므로 같은 비율에서도 결과가 달라집니다.
기본값 #FF5A5F와 #2F80ED를 50대 50으로 섞으면 sRGB에서는 #976DA6, 선형 sRGB에서는 #BE6FB8, OKLCH에서는 #C060D6이 나옵니다. 세 답은 각각 선택한 방식에서 모두 올바릅니다. 색상 혼합기는 이와 함께 같은 간격의 일곱 색을 만들고 선택한 지점을 HEX, RGB, HSB로 변환합니다.
색상 혼합기
왜 한 가지 이상의 혼합 방식을 비교해야 할까요?
중간색 하나만 보면 끝점 사이를 어떤 좌표계로 이동했는지라는 핵심 결정이 가려집니다. 여러 방식을 비교하면 설명되지 않은 기본값이 아니라 실제 시각 작업에 맞는 혼합을 선택할 수 있습니다.
색상 혼합기
실제 제작 흐름에 맞는 값 복사
각 혼합을 대문자 HEX, 현대식 RGB, 반올림한 HSB, CSS color-mix()로 제공합니다. 색상 혼합기는 상태 색, 차트 계열, 일러스트 전환, 팔레트 탐색에 쓸 수 있는 7단계 램프도 보여 주므로 중간 비율을 손으로 계산할 필요가 없습니다.
색상 혼합기
비공개 팔레트를 브라우저 안에 유지
끝점, 비율, 결과와 복사 값은 현재 브라우저 세션에서만 처리됩니다. 색상 혼합기는 파일을 업로드하거나 계정을 요구하지 않습니다. 공개 전 브랜드 색, 고객 팔레트, 초기 캐릭터 아트 방향처럼 외부에 보내기 곤란한 색을 시험할 때 유용합니다.
색상 혼합기
인터랙티브 색상 혼합기
두 HEX 끝점과 비율을 설정하고 같은 혼합을 세 색 공간에서 비교하세요.
혼합 결과#976DA6sRGB
색상 혼합기
결과 값
- HEX
- #976DA6
- RGB
- rgb(151 109 166)
- HSB
- hsb(284° 34% 65%)
CSS COLOR 5
CSS color-mix()
color-mix(in srgb, #FF5A5F 50%, #2F80ED 50%)브라우저 지원 정책상 필요하면 계산된 HEX를 폴백으로 사용하세요.
색상 혼합기
7단계 혼합 램프
색을 선택하면 HEX가 복사됩니다.
#FF5A5F#DC6077#BA678E#976DA6#7473BE#527AD5#2F80ED
개인정보 보호 설계: 모든 색은 이 브라우저 안에서만 혼합됩니다.
색상 혼합기
재현 가능한 3단계 혼합 작업 흐름
출력을 우연한 예쁜 색이 아니라 다시 만들 수 있는 디자인 결정으로 다루세요. 끝점을 고정하고, 공간을 비교하고, 마지막으로 실제 맥락에서 검증합니다.
색상 혼합기
1. 안정적인 끝점과 역할 입력
각 끝점에 3자리 또는 6자리 HEX를 붙여 넣거나 기본 색 선택기를 사용합니다. 단순히 왼쪽과 오른쪽이라 부르지 말고 표면, 강조, 배경처럼 의미 있는 역할을 지정하세요. 역할이 안정적이면 이후 비율 변경을 설명하고 문서화하기 쉬워집니다.
색상 혼합기
2. 같은 비율을 세 공간에서 비교
50대 50에서 시작해 sRGB, 선형 sRGB, OKLCH를 차례로 바꾼 다음 비율을 1포인트씩 움직이세요. 명도, 채도감, 색상을 따로 관찰합니다. 색상 혼합기는 비교하는 동안 두 끝점을 그대로 유지하므로 실험 조건이 섞이지 않습니다.
색상 혼합기
3. 선택한 색을 실제 화면에서 시험
선택한 값을 실제 컴포넌트, 일러스트 또는 차트에 복사합니다. 출시 전에 대비, 인접 색, 밝은 테마와 어두운 테마, 지원 브라우저를 확인하세요. 보기 좋은 중간색이 자동으로 읽기 쉬운 텍스트 색이나 안전한 프로덕션 토큰이 되지는 않습니다.
색상 혼합기
sRGB, 선형 RGB, OKLCH 비교
끝점과 백분율이 같아도 눈에 보이는 중간색은 달라질 수 있습니다. 각 방식이 무엇을 보간하고 어디에 유용하며 채택 전에 무엇을 점검할지 정리했습니다.
| 방식 | 보간 대상 | 유용한 작업 | 사용 전 점검 |
|---|---|---|---|
| sRGB | 감마 인코딩된 빨강, 초록, 파랑 채널 | 기존 웹 동작과 익숙한 빠른 혼합 | 중간색이 예상보다 어둡거나 회색으로 보일 수 있음 |
| 선형 sRGB | 빛의 세기에 선형인 빨강, 초록, 파랑 | 빛과 비슷한 합성 및 에너지 기반 전환 | 일반 UI 혼합보다 밝게 느껴질 수 있음 |
| OKLCH | 지각 명도, 크로마, 최단 경로 색상 | 균일한 램프와 크로마 중심 팔레트 | 고채도 색은 sRGB 출력에서 잘릴 수 있음 |
색상 혼합기
혼합 색상 출시 전 체크리스트
생성한 혼합을 프로덕션 값으로 바꾸기 전에 입력, 방식, 출력 환경, 의미 역할을 검증하세요. 보기 좋은 실험이 설명 없는 토큰이 되는 일을 막습니다.
- 색상 혼합기두 개의 6자리 HEX 끝점과 각각의 의미 역할을 기록합니다.
- 색상 혼합기정확한 비율을 기록하고 두 가중치 합이 100%인지 확인합니다.
- 색상 혼합기보간 공간이 sRGB, 선형 sRGB, OKLCH 중 무엇인지 명시합니다.
- 색상 혼합기전체 램프를 판단하기 전에 0%, 50%, 100% 위치를 확인합니다.
- 실제 프로덕션 배경에서 텍스트와 UI 대비를 검사합니다.
- 필요한 환경에서는 복사한 CSS와 정적 폴백을 모두 시험합니다.
- 페인트, 잉크, 염료 결정이라면 실제 재료 견본을 사용합니다.
색상 혼합기
디지털 혼합은 안료 혼합이 아닙니다
이 색상 혼합기는 화면 색 좌표를 보간합니다. 실제 안료는 흡수, 산란, 불투명도, 바인더, 농도, 바탕에서 상호작용하므로 RGB나 OKLCH 중간값이 예측하지 못하는 결과가 나올 수 있습니다. 재료 색 결정에는 실제 도포 견본이나 제조사 데이터를 사용하세요.
색상 혼합기
표준과 재현 가능한 수치 예시
이 페이지의 방식과 용어는 공개된 웹 플랫폼 색 보간 모델을 따릅니다. 숫자 예시는 보이는 기본 끝점으로 재현할 수 있어 방식 선택을 검증할 수 있습니다.
- 비율은 0%부터 100%까지 1퍼센트포인트 단위로 조절됩니다.
- 도구는 sRGB, 선형 sRGB, OKLCH 세 공간을 비교합니다.
- 50대 50에서 #FF5A5F와 #2F80ED는 sRGB로 #976DA6입니다.
- 같은 끝점은 선형 sRGB로 #BE6FB8, OKLCH로 #C060D6입니다.
- 7단계 위치는 표시상 0%, 17%, 33%, 50%, 67%, 83%, 100%입니다.
CSS Color Module Level 4 설명:
Mixing or otherwise combining colors has different results depending on the interpolation color space used.
색상 혼합기
다음 색상 작업으로 이동
색상 혼합기
색상 혼합기 자주 묻는 질문
색상 혼합기
색을 혼합할 때 가장 좋은 색 공간은 무엇인가요?
보편적인 하나는 없습니다. 익숙한 기존 웹 동작에는 sRGB, 빛의 세기를 반영하려면 선형 sRGB, 지각 균일성이나 크로마가 중요하면 OKLCH를 사용하세요. 같은 끝점으로 세 방식을 비교한 뒤 선택하는 것이 좋습니다.
색상 혼합기
50대 50인데 모드마다 다른 이유는 무엇인가요?
모드마다 평균하는 좌표가 다릅니다. 감마 인코딩 sRGB 채널, 선형 빛 RGB 채널, OKLCH 명도·크로마·색상은 경로를 다르게 표현하므로 끝점 가중치가 같아도 보이는 중간색은 달라집니다.
색상 혼합기
업로드 없이 온라인에서 HEX를 혼합할 수 있나요?
네. 3자리 또는 6자리 HEX를 입력하세요. 이 색상 혼합기는 브라우저 안에서 계산하고 팔레트를 서버에 저장하지 않으며 이미지 업로드나 계정도 요구하지 않습니다.
색상 혼합기
CSS color-mix() 값은 무엇을 하나요?
지원 브라우저에 보간 공간, 끝점 색, 백분율을 알려 줍니다. 생성 값을 CSS 색 속성에 넣고 브라우저 지원 정책상 필요하면 그 앞에 시험한 정적 폴백을 제공합니다.
색상 혼합기
7단계 램프를 디자인 스케일로 써도 되나요?
출발점으로 사용하세요. 남길 각 단계에 실제 의미 역할을 부여하고 대비와 인접 상태를 확인한 뒤 사용하지 않는 값은 제거합니다. 색 모델에서 같은 간격이라는 이유만으로 접근 가능하고 관리하기 쉬운 토큰이 되지는 않습니다.
색상 혼합기
이 색상 혼합기가 페인트 혼합을 예측하나요?
아니요. 디지털 좌표만 보간하며 안료 화학, 분광 반사, 불투명도, 바탕을 모델링하지 않습니다. 최종 출력이 페인트, 잉크, 염료 등이라면 실제 재료를 혼합하고 교정하세요.