컬러 믹서
색상
두 색상과 비율(0-100%) 선택. 선택한 색 공간에서 보간 — RGB는 가장 단순한 수학·HSL은 색조 보존 블렌드·CIELAB은 지각적 균일 전이 — 결과와 11단계 그라데이션 스트립 표시. 중간 강조색 선택·그라데이션 색 정지점 생성·왜 두 색의 중간이 탁해 보이는지 확인(보통 RGB 중간점이 지각적 절반이 아니기 때문)에 유용.
—
결과
#8033B3
11단계 블렌드
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
LAB이 지각적으로 가장 균일한 그라데이션. RGB·HSL은 빠르지만 중간이 불균일해 보일 수 있음.
사용법
- 색상 A·B 설정(hex 또는 색 선택기).
- RGB·HSL·LAB 블렌딩 선택.
- 비율 슬라이드 또는 11단계 스트립 확인.
자주 묻는 질문
- 왜 RGB 블렌드는 중간이 탁해 보이나요?
- RGB는 채널 값 직접 평균. 채도 높은 빨강에서 채도 높은 파랑으로 가는데 녹색 채널이 0에 머물러 중간이 저채도 보랏빛 회색. 중간 채도 유지하려면 HSL 또는 LAB 시도.
- LAB을 언제 사용?
- LAB은 지각적 균일 — 같은 수치 간격이 같은 지각 간격으로 보임. 그라데이션 부드러움 중요할 때 최적. 모던 브라우저 CSS `color-mix(in lab, …)`도 동일.
- HSL에서 두 색이 반대일 때 색조는?
- HSL은 색상환 짧은 호 선택. 빨강(0°)과 청록(180°) 혼합은 모호 — 도구가 한 방향 선택; 결과가 예상 밖이면 LAB 시도.
- 50% 혼합이 시각적으로 정확히 중간이 아닌 이유?
- LAB만 지각적 중간 결과 제공. RGB·HSL 중간점은 수학적 중간 — 종종 두 끝점 중 어두운 쪽에 지각적으로 더 가까움.
관련 도구
색맹 시뮬레이터
8가지 색각 이상(CVD)에 따라 이미지가 어떻게 보이는지 시뮬레이션.
색상00
CSS Box Shadow 생성기
여러 레이어로 CSS box-shadow를 디자인 — 실시간 미리보기 + CSS·Tailwind 출력.
색상00
컬러 포맷 변환기
어떤 색이든 HEX·RGB·HSL·HSV·OKLCH·CSS 변수로 한 번에 변환.
색상00
CSS 그라디언트 생성기
선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.
색상00
컬러 팔레트 생성기
기준 색에서 여섯 가지 배색으로 조화로운 팔레트를 만드세요.
색상00
색상 대비 검사기
글자/배경 대비를 WCAG AA·AAA 기준으로 검사하세요.
색상00