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

A 시작 색과 끝 색을 선택하고 중간 단계 수를 정의하면 자동으로 생성됩니다.

A 그라디언트 팔레트, 부드러운 전환, 디자인용 중간 톤 선택.

A 1개부터 많은 단계까지. 많을수록 두 색상 사이 전환이 점진적.

A 직접적으로는 불가능하지만 좋은 출발점이 됩니다. 두 색상 사이의 그라데이션 단계를 생성한 다음 견본에서 HEX 코드를 복사하세요. 그 코드를 WebAIM과 같은 전용 WCAG 대비 확인 도구에 붙여넣습니다. 접근성 높은 UI를 디자인할 때 저는 항상 이 방법을 사용합니다. 예를 들어 브랜드 파랑(#0055AA)과 흰색(#FFFFFF)이 12단계 그라데이션을 만들면 6번째 단계를 흰색과 비교하여 AA 준수 여부를 테스트하세요. 그 중간 색상이 보조 텍스트에 아주 잘 어울릴 수 있습니다.

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로 변환해 스톱 오프셋에 매핑하면 됩니다.