두 색 혼합 및 단계색 만들기

이 디지털 혼합이 의미하는 것

빨강·초록·파랑 채널값을 선택한 비율로 단순 가중 혼합합니다. 50%에서는 출력의 각 채널이 두 입력값의 정확한 중간이 됩니다. 코드에서 재현하기 쉽고 UI 단계색, 오버레이 후보, 전환 계획을 빠르게 잡는 데 유용합니다.

디지털 채널 혼합은 물감을 섞는 일과 다릅니다. 빛, 화면 픽셀, 반투명 레이어, 안료는 서로 다른 물리·수학 모델을 따릅니다. 화면의 파랑과 노랑이 물감처럼 기대한 초록이 된다고 볼 수 없고 실제 안료에는 고유한 분광 특성이 있습니다.

sRGB 숫자는 지각적으로 균일하지 않기 때문에 단순 보간 단계도 눈에는 고르지 않을 수 있습니다. 단계색으로 탐색한 뒤 눈으로 간격과 대비를 확인하세요. 엄격한 디자인 시스템은 OKLCH에서 밝기와 채도를 직접 통제해 최종 단계를 만드는 편이 좋습니다.

색상 혼합 사용 순서

1. 팔레트나 브랜드 시스템에서 시작과 끝 두 색을 고릅니다.
2. 결과에서 더 강하게 보여야 할 색 쪽으로 비율을 움직입니다.
3. 하나의 중간 토큰이 필요하면 혼합된 HEX를 복사합니다.
4. 여섯 단계 행에서 전환이 고르게 보이고 원하는 색상을 유지하는지 살펴봅니다.
5. 의미가 있는 역할을 배정하기 전 글자와 UI 조합을 대비 검사기로 확인합니다.

색을 혼합하면 유용한 상황

더 나은 결과를 위한 실무 팁

• 문서에는 양 끝 색을 함께 남기세요. 맥락 없는 중간색은 유지·보수하기 어렵습니다.
• 숫자가 같은 간격이라고 눈에도 같아 보인다고 가정하지 말고 전체 단계를 함께 판단하세요.
• 실제 디자인이 아래 표면에 좌우된다면 최종 CSS에서는 불투명색 혼합 대신 투명도 합성을 쓰세요.
• 장식용 단계색을 범주형 데이터 팔레트로 쓰지 마세요. 범주는 서로 뚜렷한 색이 필요합니다.

도구가 알 수 없는 것

계산 결과를 정확하게 사용하려면 한계도 함께 알아야 합니다.

• 결과는 불투명한 sRGB 채널 혼합이며 알파 합성이 아닙니다.
• 물감, 잉크, 염료 또는 감산식 분광 혼합을 모사하지 않습니다.
• 여섯 단계는 숫자 기반이라 실제 디자인 시스템에는 지각적 보정이 필요할 수 있습니다.

자주 묻는 질문