빨강에서 파랑으로 그라데이션을 만들었는데 중간에 회색빛 탁한 색이 나온 경험이 있나요? RGB 보간 방식의 한계 때문입니다. 선명한 그라데이션을 만드는 방법을 알아봅니다.
왜 탁해지는가
RGB 색상 공간에서 빨강(255,0,0)과 파랑(0,0,255)의 중간은 (127,0,127) 보라색인데, 실제로는 채도가 낮아 보입니다. 두 색상을 직선으로 연결하면 색상환의 중심(무채색 영역)을 지나기 때문입니다.
해결책: 중간 색상 추가
그라데이션 경로에 중간 색상을 수동으로 추가합니다. 빨강→파랑이면 중간에 보라(#8000FF)를 넣어 색상환을 따라가도록 합니다. 색상 변환기로 HSL을 확인하면서 H값이 자연스럽게 변하도록 조절하세요.
CSS에서 적용
background: linear-gradient(to right, red, purple, blue); 처럼 중간 색상을 명시합니다. 3~4개의 색상 정지점을 사용하면 훨씬 자연스럽습니다.
중간 색상 개수
단순한 두 색상 그라데이션에 2~3개의 중간 색상을 추가하면 대부분 해결됩니다. 색상환의 짧은 경로를 따라가도록 중간 색상을 배치하세요. 색상 변환기에서 HSL의 H값을 확인하면서 자연스러운 변화를 만드세요.
Lab 색 공간
고급 사용자라면 Lab 색 공간에서 보간하는 것도 방법입니다. Lab은 인간의 색 인지에 더 가깝게 설계되어 RGB나 HSL보다 자연스러운 그라데이션을 만듭니다. CSS Color Level 4의 lab() 함수로 사용할 수 있습니다.
실용적인 팁
색상 작업을 할 때 자주 쓰는 값들은 메모장이나 노션에 정리해두세요. 매번 검색하는 시간을 아낄 수 있습니다. 색상 변환기를 북마크해두면 필요할 때 바로 접속할 수 있습니다.