컬러 믹서
브라우저 처리컬러 믹서는 두 가지 이상의 색을 섞었을 때 어떤 색이 나오는지 미리 확인할 수 있는 도구입니다. 시작 색과 끝 색을 정하고 그 사이를 섞으면, 두 색이 자연스럽게 이어지는 중간 색들을 한눈에 볼 수 있어 색 조합을 감각이 아닌 결과로 확인할 수 있습니다.
도구 실행입력 후 결과 확인
컬러 믹서 샘플 실행
브라우저 처리
컬러 믹서는 두 가지 이상의 색을 섞었을 때 어떤 색이 나오는지 미리 확인할 수 있는 도구입니다. 시작 색과 끝 색을 정하고 그 사이를 섞으면, 두 색이 자연스럽게 이어지는 중간 색들을 한눈에 볼 수 있어 색 조합을 감각이 아닌 결과로 확인할 수 있습니다.
샘플 결과
컬러 믹서 샘플 결과 입력값을 분석한 뒤 복사 가능한 결과, 오류 안내, 다음 작업 힌트를 이 영역에 표시합니다.
자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.
컬러 믹서 사용 안내
컬러 믹서는 두 가지 이상의 색을 섞었을 때 어떤 색이 나오는지 미리 확인할 수 있는 도구입니다. 시작 색과 끝 색을 정하고 그 사이를 섞으면, 두 색이 자연스럽게 이어지는 중간 색들을 한눈에 볼 수 있어 색 조합을 감각이 아닌 결과로 확인할 수 있습니다.
그라데이션의 중간 톤을 찾거나, 두 브랜드 색 사이를 잇는 보조 색을 만들거나, 어울리는 강조색을 탐색할 때처럼 '딱 떨어지는 한 가지 색'이 아니라 '사이의 색'이 필요한 작업에 유용합니다. 섞이는 비율을 조절하면 어느 색에 더 가까운 결과를 얻을지도 조정할 수 있습니다.
사용 방법
- 섞을 첫 번째 색을 색상 선택기나 HEX 코드 입력으로 지정합니다.
- 두 번째 색도 같은 방식으로 지정해, 어떤 두 색을 섞을지 정합니다.
- 혼합 비율 슬라이더가 있다면 조절해, 두 색 중 어느 쪽에 더 가깝게 섞을지 정합니다.
- 미리보기에서 만들어진 중간 색을 확인하고, 마음에 드는 색의 코드를 복사합니다.
이럴 때 사용하세요
- 컬러 믹서로 UI에 적용하기 전 시각 값을 빠르게 미리보기
- 컬러 믹서 결과를 색상 코드 변환 작업 전후에 비교하며 디자인 시스템에 넣을 토큰이나 CSS를 정리하기
- 컬러 믹서 결과를 확인한 뒤 색상 코드 변환 또는 색상 팔레트 생성기에서 다음 작업을 이어갈 수 있습니다.
문제가 생겼을 때
컬러 믹서: 미리보기와 실제 화면이 다름
부모 요소 크기, 상속 스타일과 선택자 우선순위를 확인하세요.
컬러 믹서: 미리보기와 실제 화면이 다름
컬러 믹서에서 부모 요소 크기, 상속 스타일과 선택자 우선순위를 확인하세요.
활용 팁
- 두 브랜드 색이 한 화면에 함께 쓰여 충돌할 때, 그 사이의 중간 색을 만들어 경계나 배경에 두면 시각적으로 더 부드럽게 이어집니다.
- 강조색과 배경색을 섞은 중간 톤은 호버 상태나 비활성 버튼 색처럼 '살짝 변형된 색'이 필요한 UI 상태에 활용하기 좋습니다.
- 혼합 비율을 단계별로 바꿔 가며 여러 중간 색을 뽑으면, 그라데이션이나 차트 색 구간을 만들 때 쓸 색 시리즈를 손쉽게 마련할 수 있습니다.