컬러 믹서

컬러 믹서 사용 가이드

두 색의 중간색이 필요할 때 RGB 숫자를 반씩 더하면 파랑과 노랑의 중간이 회색(#808080)이 되는 것처럼 탁한 색이 나오기 쉽습니다. 색을 어떤 공간에서 섞느냐에 따라 결과가 크게 달라지기 때문입니다.

이 믹서는 세 가지 방식을 제공합니다. OKLab은 사람이 느끼는 밝기와 색감을 기준으로 섞어 파랑과 노랑의 중간이 맑은 하늘색이 되고, sRGB는 CSS 기본 방식 그대로, 선형 RGB는 빛을 섞는 방식이라 중간이 밝게 나옵니다. 방식을 바꿔 가며 결과를 비교할 수 있습니다.

혼합 비율 슬라이더로 중간색을 정하고, A에서 B까지 7단계 팔레트 칸을 누르면 그 비율로 바로 이동합니다. 결과에는 모든 브라우저에서 쓰는 HEX 값과 2023년 이후 브라우저가 직접 섞는 color-mix() 코드가 함께 나옵니다.

사용 방법

1. 1'색상 A'와 '색상 B'를 고릅니다.
2. 2'색상 B 혼합 비율' 슬라이더로 B를 얼마나 섞을지 정합니다.
3. 3'섞는 방식'을 바꿔 가며 중간색을 비교합니다.
4. 4팔레트 칸을 누르거나 'HEX 복사'로 결과를 가져가고, 아래 CSS 코드도 함께 씁니다.

색상 A #0000FF · 색상 B #FFFF00 · 50%

OKLab: #6CABC7 (맑은 하늘색)
sRGB: #808080 (회색)

color: #6CABC7;
color: color-mix(in oklab, #0000FF 50%, #FFFF00);

이럴 때 쓰면 좋아요

• 두 브랜드 색 사이의 중간 단계 색이 필요할 때
• hover 색을 기본 색과 검정·흰색을 섞어 만들 때
• 그라데이션의 중간이 탁해지는 이유를 확인할 때
• CSS color-mix()로 테마 색을 자동으로 만들 때

문제가 생겼을 때

활용 팁

• 기본 색과 흰색을 10~20% 섞으면 연한 배경, 검정을 10~20% 섞으면 hover 색을 쉽게 만들 수 있습니다.
• 7단계 팔레트는 A와 B 사이를 같은 간격으로 나눈 값이라 그라데이션 색 지점으로 쓰기 좋습니다.
• 선형 RGB 방식은 조명이나 빛 번짐처럼 밝은 혼합이 자연스러운 경우에 어울립니다.

자주 묻는 질문