색상 믹서
신규두 색상을 원하는 비율로 혼합하고 결과 또는 중간 단계를 복사.
Click a swatch to copy its hex.
Mix colors from an image
Upload an image, choose a target color above, then click the image to sample that pixel. Images are decoded in your browser and never uploaded.
Paint (subtractive) results are realistic approximations of pigment mixing, not exact recipes — real paints and inks vary by brand and opacity.
Runs entirely in your browser. Nothing is uploaded.
물감이나 빛을 위한 무료 온라인 색상 믹서
이 색상 믹서는 두 가지 색상——또는 그 이상——을 새로운 색상으로 혼합하고 그 사이의 단계에 대한 완전한 그라디언트를 표시합니다. 스와치로 색상을 선택하거나, hex 코드를 입력하거나, 업로드된 이미지에서 직접 색상을 추출한 다음 혼합 결과를 HEX, RGB, HSL, CMYK로 확인하세요. 모든 것이 브라우저에서 실행되므로 즉각적이며 업로드한 내용은 어디에도 전송되지 않습니다.
대부분의 도구가 단순한 선형 혼합만 수행하는 반면, 이 도구는 두 색상을 온라인으로 혼합하는 세 가지 다른 방법을 제공하고 실시간으로 차이를 보여줍니다——화가가 기대하는 결과, 화면이 생성하는 결과, 또는 그라디언트와 디자인 시스템을 위한 순수한 수학적 중간점을 얻을 수 있습니다.
감법, 가법, 또는 단순 혼합——세 가지 혼합 모델
감법 혼합은 물감과 안료를 모델링합니다: 색상이 빛을 흡수(빼기)하므로 파랑+노랑=초록, 빨강+노랑=주황, 빨강+파랑=보라——물리적 물감, 잉크, CMYK 인쇄와 일치하는 '두 색상이 무엇을 만드는가'의 직관적인 결과입니다. 가법 혼합은 빛을 모델링합니다: 빨강, 초록, 파랑이 합쳐지므로 빨강+초록=노랑이고 세 가지 모두 합치면 흰색——화면, 프로젝터, 무대 조명이 작동하는 방식입니다.
세 번째 모드인 블렌드는 RGB 채널을 평균화하여 정확한 수치 중간점을 찾는 직선 선형 보간입니다——그라디언트, UI 색조, 디자인 토큰 생성에 이상적입니다. 단일 버튼으로 세 가지 사이를 전환하고, 블렌드 바가 즉시 다시 그려져 파랑에서 노랑 물감 혼합이 감법 중간에서 현실적인 초록을 통과하는 것을 볼 수 있습니다.
초록, 주황, 보라, 갈색을 만드는 두 가지 색상은?
내장된 색상 혼합 차트가 가장 많이 검색되는 안료 질문에 한 번의 탭으로 답합니다: 파랑+노랑=초록, 빨강+노랑=주황, 빨강+파랑=보라, 파랑+초록=청록, 그리고 주황+파랑 같은 보색에서 현실적인 갈색. 차트에서 아무 쌍이나 탭하면 감법 모드로 믹서에 로드되어 정확한 hex 결과를 볼 수 있습니다.
감법 엔진이 실제 안료처럼 혼합하기 때문에 이차색은 진실되게 나오고 삼차색은 자연스럽게 갈색 방향으로 어두워집니다——실제 물감을 너무 많이 섞을 때 생기는 탁해지는 것과 같은 효과입니다. 비율 슬라이더로 비율을 정밀하게 제어할 수 있습니다: 빨강 70%+파랑 30%는 50/50 혼합보다 더 따뜻하고 마젠타에 가까운 보라를 만듭니다.
이미지에서 색상 혼합——그리고 두 가지 이상의 색상 혼합
사진을 업로드하고 스포이트를 사용하여 직접 색상을 추출하세요——제품 사진, 색상 견본, 또는 영감을 주는 이미지에서 브랜드 색상을 매칭하는 데 완벽합니다. 두 개 이상의 픽셀을 선택하여 혼합합니다. 이미지는 HTML 캔버스에서 로컬로 디코딩되므로 이미지에서의 색상 믹서는 파일이 절대 기기를 떠나지 않는다는 것을 의미합니다——기밀 브랜드 에셋 및 미공개 디자인 목업에 적합합니다.
두 가지 이상을 결합해야 하나요? '색상 추가'를 클릭하여 세 번째, 네 번째, 다섯 번째 또는 여섯 번째 스와치를 추가하고, 각각 자체 가중치 슬라이더를 가집니다. 도구는 모든 입력의 가중 혼합을 반환합니다——팔레트 평균화, 다중 안료 혼합 재현, 또는 브랜드 색상 세트의 시각적 중심 찾기에 유용합니다.
Adobe Color, Coolors, colordesigner.io와의 비교
Adobe Color(color.adobe.com)는 보색, 삼색, 유사색 등의 색상 조화 탐색을 위해 설계되었으며 Adobe 서버에 데이터를 동기화하는 Adobe 계정이 필요합니다. 감법(물감) 또는 가법(빛) 혼합 모델이 없고 특정 hex 코드를 혼합하기 위한 비율 슬라이더도 없습니다. Coolors(coolors.co)는 팔레트 생성에 뛰어나지만 색상 믹서는 기본적인 선형 혼합만 수행합니다——이 도구의 '블렌드' 모드에 해당합니다.
colordesigner.io는 두 색상 선형 혼합과 그라디언트 바를 제공하지만 hex 값만 출력합니다——RGB, HSL 또는 CMYK 없음——물리 기반 혼합 모델도 없습니다. 이 도구가 그 공백을 채웁니다: 세 가지 혼합 모델, 네 가지 동시 출력 형식, 이미지 색상 샘플링, 개별 가중치 슬라이더가 있는 최대 여섯 가지 색상, 공유 가능한 URL. 계정 불필요, 사용 제한 없음, 서버 업로드 없음.
모든 코드를 바로 복사——그리고 공유 가능한 링크
결과 카드에는 혼합된 색상의 HEX, RGB, HSL, CMYK 값과 가장 가까운 CSS 명명 색상이 표시되며, 클릭 한 번으로 클립보드에 복사됩니다. 두 색상 사이에 2~20개의 균등 간격 중간점 스와치를 생성하고, 개별 단계를 복사하거나, CSS 그라디언트 또는 디자인 시스템 색상 램프를 위해 전체 시퀀스를 한 번에 가져오세요.
설치할 것도 없고 계정을 만들 필요도 없습니다. 색상 혼합, 이미지 샘플링, 코드 변환이 모두 브라우저에서 로컬로 실행됩니다——색상과 이미지는 기기에 남아 있습니다. 온라인 색상 믹서를 북마크하고 UtiloKit의 색상 팔레트 생성기와 대비 검사기와 함께 사용하여 완전한 업로드 없는 색상 워크플로를 구성하세요.
Frequently asked questions
온라인에서 두 가지 색상을 어떻게 혼합하나요?
스와치로 두 색상을 선택하거나 hex 코드를 입력하고, 혼합 모델(물감/감법, 빛/가법, 또는 단순 선형 혼합)을 선택한 다음 비율 슬라이더를 드래그합니다——예를 들어 30%/70%——각 색상이 결과에 얼마나 기여하는지 제어합니다. 혼합된 색상과 HEX, RGB, HSL, CMYK 코드가 즉시 업데이트됩니다. 형식 행을 클릭하면 클립보드에 복사됩니다.
어떤 두 색상이 초록을 만드나요?
물감이나 안료를 혼합할 때(감법 혼합) 파랑과 노랑이 초록을 만듭니다. 모델을 감법으로 설정하고 #2563EB 같은 파랑과 #FACC15 같은 노랑을 혼합하면 #61A73A 근처의 초록이 나옵니다. 화면에서 빛을 혼합할 때(가법)는 규칙이 다릅니다——빨강+초록=노랑, 세 가지 모두 최대 강도=흰색입니다.
가법 혼색과 감법 혼색의 차이는 무엇인가요?
가법 혼색은 빛을 결합합니다: 빨강, 초록, 파랑 채널이 합쳐지므로 빨강+초록=노랑, 세 가지 모두 최대 출력=흰색. 화면, 프로젝터, TV가 이렇게 작동합니다. 감법 혼색은 빛의 파장을 흡수(빼기)하는 안료나 염료를 결합합니다. 안료를 더 많이 추가할수록 어두워집니다. 파랑+노랑=초록, 세 원색 모두 혼합하면 갈색이 됩니다. CMYK 인쇄는 감법입니다.
두 가지 hex 색상을 어떻게 혼합하나요?
각 필드에 hex 코드를 입력하거나 붙여넣습니다——# 유무 상관없이——예를 들어 #FF5733과 #33C1FF. 믹서가 현재 비율로 즉시 혼합하고 결과 hex 코드와 RGB, HSL, CMYK 등가값을 반환합니다. #F53 같은 세 자리 약식 hex도 허용됩니다. 결과 행을 클릭하여 복사할 수 있습니다.
이미지에서 색상을 혼합할 수 있나요?
네. '이미지에서 혼합' 패널을 열고, 사진이나 디자인 스크린샷을 업로드한 다음, 캔버스를 클릭하여 이미지에서 색상 슬롯으로 직접 색상을 샘플링합니다. 이미지는 JavaScript를 사용하여 브라우저의 HTML 캔버스에서 로컬로 디코딩됩니다——서버로 데이터가 전송되지 않으며 이미지는 기기에서 완전히 비공개로 유지됩니다.
두 색상 사이에 몇 개의 그라디언트 단계를 생성할 수 있나요?
단계 컨트롤로 두 입력 색상 사이에 2~20개의 균등 간격 스와치를 생성할 수 있습니다. 11단계는 두 끝점과 9개의 중간점을 제공합니다——CSS 그라디언트 또는 디자인 시스템을 위한 완전한 색상 램프 구축에 이상적입니다. 생성된 바에서 개별 스와치를 클릭하여 hex 코드를 복사하거나, '모두 복사'를 사용하여 전체 시퀀스를 가져오세요.
무료인가요? 가입이 필요한가요?
아니요. 색상 믹서는 계정, 등록, 결제 장벽, 사용 제한 없이 완전히 무료입니다. 페이지를 열고 즉시 혼합을 시작하세요. 구독 뒤에 고급 색상 혼합을 잠가두는 일부 디자인 플랫폼과 달리, 여기의 모든 기능——감법 및 가법 모델, 이미지 샘플링, 다중 색상 혼합, 그라디언트 단계, 모든 출력 형식——이 첫 방문부터 무료로 제공됩니다.
Related tools
모든 도구 보기
신규 Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
색상 선택기 및 변환기
색상을 고르고 HEX, RGB, HSL, OKLCH 간에 변환.
신규 색상 대비 검사기
텍스트와 배경색 사이의 WCAG AA/AAA 대비 비율 확인.
신규 CSS 그라데이션 생성기
라이브 미리보기와 함께 선형, 방사형, 원뿔형 CSS 그라데이션 제작.
신규 CSS Box-Shadow 생성기
프리셋과 라이브 미리보기로 다중 레이어 CSS box-shadow 제작. CSS, 값 또는 React 스타일을 즉시 복사.
신규 색상 팔레트 생성기
보색, 유사색, 삼색, 단색 팔레트 생성.