색상 혼합기

단계 1 / 2

색상 A

색상 B

단계

결과

두 HEX 색상을 입력하고 원하는 단계 수를 선택하면 색상 혼합기가 시작 색상, 끝 색상, 그 사이에 균등하게 배치된 색상을 보여줍니다. 빠른 UI 색상 단계, 그라디언트 계획, 아이콘 상태, CSS나 디자인 파일로 옮기기 전 정확한 HEX 스톱 확인에 유용합니다.

HEX 혼합 계산 방식

1

두 HEX 색상 입력

3자리 또는 6자리 HEX를 # 포함 또는 # 없이 사용할 수 있습니다. 예: #FF6B35, #1E3A8A, F60.
2

2-20단계 선택

첫 번째 견본은 첫 번째 색상이고 마지막 견본은 두 번째 색상입니다. 가운데 견본은 그 사이에서 계산됩니다.
3

RGB 채널 보간

도구는 HEX를 빨강, 초록, 파랑 채널 값으로 변환하고 각 채널을 선형 보간한 뒤 가장 가까운 정수로 반올림합니다.
4

HEX 스톱 확인

각 견본은 디자인이나 스타일시트에서 다시 사용할 수 있도록 선택 가능한 6자리 대문자 HEX 코드로 표시됩니다.

이 도구가 하는 일

색상 혼합기는 표준 HEX 색상 표기만 사용합니다. #F60 같은 짧은 HEX와 #FF6B35 같은 전체 HEX를 입력받아 내부에서 정규화하고, 모든 결과를 6자리 대문자 HEX 코드로 출력합니다.

혼합은 RGB/sRGB 채널에서의 단순 선형 보간입니다.

각 HEX 색상을 0부터 255까지의 R, G, B 값으로 변환합니다.
각 단계마다 t를 0부터 1까지 계산합니다.
각 채널에 시작 + (끝 - 시작) * t를 적용합니다.
각 채널을 가장 가까운 정수로 반올림하고 결과를 다시 HEX로 변환합니다.

양 끝 색상이 포함되므로 2단계는 “시작과 끝만”을 뜻합니다. #FF6B35에서 #1E3A8A까지 7단계로 만들면 출력은 다음과 같습니다.

단계	위치	HEX
1	0%	`#FF6B35`
2	16.67%	`#DA6343`
3	33.33%	`#B45B51`
4	50%	`#8F5360`
5	66.67%	`#694A6E`
6	83.33%	`#44427C`
7	100%	`#1E3A8A`

알맞은 사용 사례

UI 상태 색상 단계: hover, active, selected, disabled 상태용 중간 색상을 만듭니다.
그라디언트 계획: 다른 도구에서 CSS 그라디언트를 작성하기 전에 정확한 HEX 스톱을 정합니다.
아이콘과 일러스트 변형: 관련된 소수의 색상 세트를 일관되게 유지합니다.
디자인 QA: 눈대중이 아니라 채널별로 계산된 중간점을 비교합니다.

기억할 제한 사항

이 혼합기는 rgb(), hsl(), 색상 이름, alpha 값, 8자리 HEX를 받지 않습니다. RGB, HSL, LAB, LCH, CSS snippet, 대비 검사, 접근성 평점도 내보내지 않습니다. 이런 기능이 필요하다면 HEX 스톱을 얻은 뒤 전용 변환기, 대비 검사기, 그라디언트 생성기를 사용하세요.

자주 묻는 질문

HEX만 가능합니다. 3자리 또는 6자리이며, 앞의 #는 있어도 없어도 됩니다. rgb(), hsl(), alpha 채널, 색상 이름은 읽지 않습니다.

네. 첫 단계는 첫 번째 색상이고 마지막 단계는 두 번째 색상입니다. 나머지 단계는 두 색상 사이에서 보간된 색상입니다.

혼합은 RGB/sRGB에서 채널별로 계산됩니다. 예측 가능하고 코드에서 재사용하기 쉽지만, 지각 기반 LAB 또는 LCH 보간과는 다릅니다.

아니요. 견본과 HEX 코드만 보여줍니다. 생성된 HEX 값을 CSS에 사용하거나, 접근성 비율이 중요하다면 대비 검사기에 넣어 확인하세요.

색상 혼합기

HEX 혼합 계산 방식

두 HEX 색상 입력

2-20단계 선택

RGB 채널 보간

HEX 스톱 확인

이 도구가 하는 일

알맞은 사용 사례

기억할 제한 사항

자주 묻는 질문

관련 도구

ASCII 표 참조

키보드 단축키 참고표

HTML 문자 참조

보색 찾기

랜덤 영어 글자 생성기

랜덤 색상 팔레트 생성기