파란색에서 노란색으로 자연스럽게 변하는 그라데이션을 만들고 싶다. 단순히 두 색 사이를 CSS linear-gradient로 채우면 중간에 탁한 색이 나온다. 왜 그럴까?
RGB 직선 보간의 문제
파랑(0, 0, 255)에서 노랑(255, 255, 0)으로 RGB 값을 직선으로 변화시키면, 중간에 회색 빛이 돈다. RGB 공간에서의 직선이 인간 눈에는 자연스럽지 않기 때문이다.
HSL로 해결
색상 변환기로 두 색을 HSL로 바꾸자. 파랑(H:240)에서 노랑(H:60)으로 H값을 변화시키면 색상환을 따라 자연스럽게 변한다. 녹색을 거쳐가니까 탁하지 않다.
중간 색상 추가
CSS에서 그라데이션에 중간 포인트를 추가할 수 있다. 파랑 → 청록 → 녹색 → 노랑 순으로 중간 색들을 넣으면 자연스러워진다. 색상 변환기로 각 지점의 HEX 코드를 구해서 넣자.
그라데이션 도구 활용
Adobe Color, Coolors 같은 도구에서 그라데이션을 생성하고 중간 색상을 추출할 수 있다. 색상 변환기와 함께 쓰면 원하는 결과를 빠르게 얻을 수 있다.
CSS 그라데이션 작성
linear-gradient에 여러 색상 정지점을 추가합니다. background: linear-gradient(90deg, #FF0000 0%, #FF00FF 50%, #0000FF 100%); 빨강에서 파랑으로 갈 때 보라색을 거치도록 합니다. 색상 변환기에서 중간 색상의 정확한 HEX를 찾으세요.
그라데이션 도구
cssGradient.io, WebGradients 같은 도구에서 예쁜 그라데이션을 찾거나 직접 만들 수 있습니다. 색상 정지점 위치를 조절하면서 실시간으로 결과를 확인할 수 있어 편리합니다.
지속적인 학습
색상 이론은 깊이가 있는 분야입니다. 기본적인 변환 방법을 익힌 후 점점 더 깊은 내용을 학습하세요. 색상 변환기를 활용하면서 실습하면 이해가 빨라집니다.