색상 혼합기 무료 온라인: 두 색상 혼합 그라디언트 생성

A 전혀 필요 없습니다. 도구를 열고 바로 색상을 고르면 됩니다. 모든 작업은 브라우저에서 처리되며, 서버에 저장되지 않습니다. 방금 직접 진한 남색에서 옅은 금색까지 12단계 그라데이션을 만들고 HEX 코드를 CSS에 바로 복사해봤습니다. 회원가입, 스팸, 번거로움 전혀 없습니다.

A 둘 다 바뀝니다. 단계가 많을수록 부드러운 전환이 생기지만 각 중간색이 미묘하게 달라집니다. 5단계는 대담하고 뚜렷한 색상, 20단계는 거의 끊김 없는 그래디언트에 적합합니다. 저는 히어로 섹션 배경에 8-10단계를 쓰고, 하나 건너 하나씩 견본을 복사해 UI 요소에 사용합니다. 팁: 플랫 디자인에는 단계 수가 적은 쪽이 더 잘 맞습니다.

A 그랬으면 좋겠네요! 현재는 각 견본을 클릭해서 HEX 코드를 하나씩 복사해야 합니다. 20단계 그라디언트면 20번 클릭이죠. 해결책? 단계 수를 줄여서(예: 5단계) 코드를 복사한 뒤, 더 세밀하게 조정하며 재생성하는 겁니다. 어떤 분들은 스크린샷을 찍어 스포이드 도구로 추출하기도 하는데, 정확도가 떨어집니다.

A 이 도구는 HEX 코드를 사용해 RGB 색 공간에서 색상을 혼합합니다. 화면, 웹사이트, 앱에는 문제없습니다. 하지만 브로셔, 명함, 포스터 같은 인쇄 프로젝트라면 혼합된 색상이 CMYK 출력과 정확히 일치하지 않습니다. 아름다운 라벤더 그라데이션이 고객 전단지에서 탁하게 나와서 뼈저리게 깨달았습니다. 여기서 색을 섞은 다음 각 HEX 코드를 별도 변환기로 CMYK로 바꾸세요. 아니면 처음부터 CMYK 소프트웨어에서 직접 작업하는 것이 더 낫습니다.

A RGB로 혼합하며, HSL이 아닙니다. 그래서 파란색과 주황색 같은 보색 사이의 그라디언트는 중간에 회색빛 영역을 지나가곤 합니다. 중간 단계를 더 선명하게 만들고 싶다면 중간색을 직접 고른 뒤 두 번에 나눠 혼합해보세요. 저는 브랜드 그라디언트에서 중앙 스와치가 CTA 버튼에 들어갈 때 이 방법을 씁니다. 30초만 더 걸리지만 색 품질 차이는 확실합니다.

A 내장된 내보내기 기능은 아직 없지만 간단한 방법이 있습니다. 그라데이션을 생성한 다음 각 HEX 스와치를 수동으로 CSS linear-gradient() 문자열에 복사하세요. 10단계라면 복사-붙여넣기로 약 60초면 충분합니다. 또는 도구를 스크린샷으로 찍어 Figma에 불러온 뒤 스포이드로 색상을 추출하세요. 저는 PNG로 내보낸 다음 스와치를 잘라 스타일 가이드에 사용합니다. SVG가 필요하면 각 HEX를 RGB로 변환해 스톱 오프셋에 매핑하면 됩니다.

A 아니요. 디자이너들이 자주 빠지는 함정입니다. 이 도구는 RGB 공간에서 혼합하므로 색상환의 직선이 아니라 RGB 큐브 내부의 직선을 따라갑니다. 순수한 빨강과 초록을 섞으면 선명한 노랑이 아니라 탁한 갈색-노랑 구간을 통과합니다. 예측 가능한 결과를 원한다면 명도나 채도가 비슷한 색을 고르세요. 또는 중간 색상을 하나 더 추가해서 두 번에 나눠 블렌딩하는 방법도 있습니다. 중간에 회색처럼 탁해지지 않고 제어하기 쉬운 곡선이 만들어집니다.

A 색상환 반대편에 있으면서 명도 차이가 큰 조합은 피하세요. 파랑 #0033CC와 주황 #FF8800을 12단계로 블렌딩하면 6단계 근처가 탁한 갈색이 됩니다. 명도가 비슷한 색을 고르는 게 핵심이에요. 틸 #008080에서 코랄 #FF7F50으로 가면 중간색이 훨씬 깔끔합니다. 대비를 강하게 원한다면 세 번째 색을 경유지로 넣고 두 번에 나눠 블렌딩하세요. 30초 더 쓰면 히어로 섹션이 살아납니다.

A 네, 복사한 HEX 코드를 스타일시트에 곧바로 넣으시면 됩니다. 다크모드는 미세한 색상 차이가 중요하므로, 단계 수를 10으로 맞추고 3번과 7번 코드를 배경색과 테두리에 자주 씁니다. 코드를 적용하기 전에 브라우저 개발자 도구로 먼저 확인해 보세요.

A 대체로 그렇지만, 시작하는 색상에 따라 중간 단계의 간격 느낌이 달라질 수 있습니다. 밝은 노란색과 진한 보라색의 순서를 바꾸면 10개의 견본 전체에서 시각적 무게감이 달라집니다. 지난주에 브랜드 컬러 순서를 바꿨더니 밝은 중간 단계가 너무 빨리 중앙을 차지하는 것을 발견했어요. 그라데이션 한쪽이 너무 무거워 보이면 입력값을 서로 뒤집어보세요.