CSS 그라디언트 색상 정지점 원리, 색이 급변하고 탁해지는 이유

파란색과 보라색처럼 톤이 비슷한 두 색으로 그라디언트를 만들면 대체로 무난하게 이어집니다. 그런데 색상 정지점 하나의 위치를 옮기거나, 밝기 차이가 큰 두 색을 그대로 이어보면 이야기가 달라집니다. 어느 순간 경계가 유독 선명하게 끊기거나, 중간에 어느 색도 아닌 탁한 얼룩 같은 구간이 보이는 경우가 생깁니다.

이 현상은 그라디언트가 고장 나서 생기는 게 아니라, 색상 정지점이 원래 하는 일 — 두 색 사이를 선형으로 채워 넣는 것 — 을 그대로 보여주는 결과입니다. 정지점 위치가 왜 색이 바뀌는 "속도"를 정하는지, 그 속도가 좁은 구간에 몰릴 때 왜 탁해 보이는지를 원리부터 살펴보겠습니다.

요약 ① 색상 정지점은 "이 위치에서 이 색이 100%"라는 좌표이고, 정지점 사이 구간은 두 색이 선형으로 섞이며 채워집니다. ② 정지점 간격이 좁으면 그 좁은 구간 안에서 색이 몰아서 바뀌기 때문에 변화가 급격하게 보이고, 간격이 넓으면 완만하게 보입니다. ③ 밝기·색상 차이가 큰 두 색을 정지점 없이 바로 이으면, 두 색의 중간값이 어느 쪽도 아닌 탁한 색으로 나타나 눈에 띄는 얼룩처럼 보일 수 있습니다.

색상 정지점이란 무엇인가

linear-gradient()나 radial-gradient() 같은 CSS 그라디언트 함수는 색상을 쉼표로 나열하고, 각 색상 뒤에 몇 %인지를 적을 수 있습니다. 이 "몇 %" 값이 색상 정지점입니다. 정지점은 "이 위치에서는 이 색이 정확히 100%로 나타난다"는 좌표 하나를 정하는 역할만 합니다.

정지점과 정지점 사이의 구간은 브라우저가 알아서 채웁니다. 두 정지점 사이의 어느 지점이든, 그 지점이 두 정지점 사이에서 몇 % 위치에 있는지를 계산해서 앞 색과 뒤 색을 그 비율만큼 선형으로 섞은 색을 보여줍니다. 그라디언트가 "색을 보간한다"고 말할 때의 실제 의미가 바로 이것입니다.

정지점 위치가 곧 색이 바뀌는 속도다

정지점 사이의 간격은 색이 바뀌는 속도를 그대로 결정합니다. 두 정지점이 0%와 15%처럼 가깝게 붙어 있으면, 앞 색에서 뒤 색으로 넘어가는 변화 전체가 이 좁은 15% 구간 안에 몰려서 일어납니다. 눈에는 색이 갑자기 뚝 바뀌는 것처럼 보입니다.

반대로 같은 두 색을 0%와 90%처럼 멀리 떨어뜨려 두면, 똑같은 변화량이 넓은 구간에 걸쳐 나뉘어 일어나므로 훨씬 완만하게 보입니다. 색 자체는 하나도 안 바뀌었는데 정지점 위치만 옮겼을 뿐인데 인상이 완전히 달라지는 이유가 여기에 있습니다.

정지점을 세 개 이상 쓸 때도 마찬가지입니다. 두 정지점이 가까이 붙어 있는 구간은 빠르게 바뀌고, 그다음 정지점까지 멀리 떨어진 구간은 색이 거의 그대로 유지되는 것처럼 보입니다. 같은 색 조합이라도 위치 숫자만 바꾸면 전혀 다른 그라디언트가 만들어집니다.

밝기 차이가 큰 색을 바로 이으면 중간이 탁해지는 이유

그라디언트는 기본적으로 두 색의 각 색상 채널값을 그대로 선형으로 섞어서 중간 색을 만듭니다. 문제는 밝은 노랑과 짙은 남색처럼 밝기와 색상이 크게 다른 두 색을 정지점 없이 바로 이으면, 이 채널별 산술 평균이 어느 쪽 색과도 닮지 않은 어중간한 회갈색 계열 톤으로 떨어질 때가 있다는 점입니다.

이 어중간한 톤이 좁은 구간에 몰려 나타나면, 매끄러운 그라디언트가 아니라 중간에 지저분한 얼룩이나 띠가 낀 것처럼 보입니다. 이런 현상을 흔히 "그라디언트 밴딩"이라고 부르기도 하지만, 8비트 색상 정보 손실로 생기는 진짜 밴딩과는 원인이 다릅니다. 여기서 보이는 얼룩은 파일 손상이 아니라 정지점 사이를 선형으로 곧장 이은 결과 그 자체입니다.

손으로 값을 하나씩 바꿔가며 확인하려면

이 관계를 도구 없이 확인하려면 CSS 코드를 직접 써야 합니다. linear-gradient(각도, 색상1 위치1%, 색상2 위치2%, …) 문법에 맞춰 색상 코드와 위치 숫자를 채우고, 파일을 저장한 뒤 브라우저를 새로고침해서 눈으로 확인하는 과정을 거칩니다.

정지점 위치 하나만 바꿔도 결과가 달라지므로, 숫자를 조금씩 바꿔가며 저장과 새로고침을 반복해야 합니다. 색상 두세 개, 위치 두세 개를 동시에 맞춰보고 싶다면 이 과정을 값의 조합 수만큼 되풀이해야 하는 번거로움이 있습니다.

직접 해보기 →

그라디언트 생성기가 정지점 조작을 실시간으로 보여주는 방식

그라디언트 생성기는 상단에 실제 배경색 미리보기 영역을 두고, 여기에 지금 설정한 값 그대로 만들어진 CSS 배경색을 그대로 적용합니다. 브라우저가 실제로 그리는 그라디언트를 그대로 보여주는 것이므로, 미리보기에서 본 색과 실제 사이트에 적용했을 때의 색이 다르지 않습니다.

각 색상 정지점은 한 줄로 나열되고, 줄마다 색상 피커와 헥스 코드 입력창, 0~100 사이의 위치 숫자 입력창이 붙어 있습니다. "+ 색상 추가" 버튼을 누르면 정지점을 필요한 만큼 늘릴 수 있고, 위치 숫자만 바꾸면 앞서 설명한 "변화 속도"를 바로 조절해볼 수 있습니다. 아래쪽 CSS 칸에는 완성된 linear-gradient()/radial-gradient() 문법이 그대로 나타나 복사 버튼으로 바로 가져갈 수 있습니다.

정지점을 순서대로 안 넣어도 되는 이유

정지점을 입력창에 추가하는 순서와 그라디언트에 실제로 나타나는 순서는 다를 수 있습니다. 그라디언트 생성기는 화면에 표시된 순서와 상관없이, 저장된 위치(%) 값을 기준으로 정지점을 다시 정렬한 뒤에 최종 CSS를 만듭니다.

그래서 중간에 정지점 하나를 새로 끼워 넣고 싶을 때, 목록 맨 아래에 추가한 다음 위치 숫자만 원하는 값으로 바꿔도 됩니다. 순서를 맞추려고 기존 줄을 지우고 다시 만들 필요가 없습니다.

정리

• 색상 정지점은 "이 위치에서 이 색이 100%"라는 좌표이며, 정지점 사이 구간은 두 색이 선형으로 섞이며 채워집니다.
• 정지점 간격이 좁을수록 그 구간의 색 변화는 빠르게, 넓을수록 완만하게 보입니다 — 정지점 위치가 곧 변화 속도입니다.
• 밝기·색상 차이가 큰 두 색을 정지점 없이 바로 이으면, 채널별 산술 평균이 어중간한 탁한 톤으로 떨어져 얼룩처럼 보일 수 있습니다.
• 이 얼룩은 파일 손상으로 생기는 진짜 8비트 밴딩과는 원인이 다른, 정지점 보간 자체의 결과입니다.
• 그라디언트 생성기는 정지점 값을 바꿀 때마다 실제 CSS 배경을 즉시 다시 그려서, 위치·색상 조합에 따른 변화를 눈으로 바로 비교할 수 있게 해줍니다.

📖 현장에서 마주치는 그라디언트 렌더링의 3가지 비극 (실제 사연)

CSS 그라디언트를 사용해 화려하고 유려한 배경이나 버튼, 카드를 디자인하려고 할 때, 실무자들은 종종 예상치 못한 화면을 마주하게 됩니다. 다음은 색상 정지점 보간의 물리적 한계를 이해하지 못해 발생했던 대표적인 실무 트러블 사례들입니다.

사연 1: 화사한 시안과 오렌지가 만든 끔찍한 "진흙탕 얼룩"

스타트업 UI 디자이너 A씨는 여름 프로모션 배너를 위해 시안(Cyan, #00ffff)에서 오렌지(Orange, #ff8800)로 이어지는 화려한 그라디언트를 디자인했습니다. 그래픽 툴에서는 중간에 부드러운 톤이 만들어졌지만, CSS로 개발자에게 넘기고 브라우저에서 렌더링된 배너를 확인한 순간 경악했습니다. 두 색상의 한가운데에 탁하고 칙칙한 갈색빛의 진흙 같은 띠(Sludge band)가 세로로 떡하니 자리 잡고 있었기 때문입니다. 이른바 "sRGB 그레이 데드존(Gray Dead Zone)" 현상으로, 보간 선이 색상환의 채도가 없는 중심부를 관통하면서 발생한 참사였습니다. 결국 A씨는 중간 지점에 인위적으로 명도와 채도가 높은 색상 정지점(Color Stop)을 두 개나 추가하여 문제를 간신히 해결해야 했습니다.

사연 2: 고급 OLED 화면에서 적나라하게 드러난 계단 현상(Banding)

프론트엔드 개발자 B씨는 프리미엄 브랜드 웹사이트의 다크 모드 배경으로, 아주 미세하고 고급스러운 다크 블루에서 진한 챠콜색으로 이어지는 은은한 그라디언트를 적용했습니다. 일반 모니터에서는 그럴싸해 보였으나, 클라이언트가 최신형 OLED 스마트폰으로 확인하자마자 컴플레인이 들어왔습니다. 미세한 색상 차이가 부드럽게 이어지지 못하고 마치 등고선이나 계단처럼 뚝뚝 끊어져 보이는 "컬러 밴딩(Color Banding)" 현상이 적나라하게 드러난 것입니다. B씨는 8비트 색 공간의 한계를 극복하기 위해 SVG로 만든 미세한 노이즈 텍스처(Grain)를 오버레이로 덧입히고, 보간 방식을 CSS 최신 규격인 in oklch로 변경하여 디더링(Dithering) 효과를 줌으로써 매끄러운 그라디언트를 완성할 수 있었습니다.

사연 3: 0%, 50%, 50.1%, 100% — 하드 스톱이 만든 기적의 반반 카드

웹 에이전시 소속 퍼블리셔 C씨는 배경이 정확히 대각선으로 반반 나뉘는 투톤 스플릿(Two-tone Split) 카드를 구현해야 했습니다. 예전 같으면 <div> 요소 두 개를 겹치거나 ::before 가상 요소를 썼겠지만, DOM 요소를 늘리는 것은 성능 낭비였습니다. 그는 CSS 그라디언트의 정지점 원리를 활용하여, linear-gradient(135deg, red 0%, red 50%, blue 50.1%, blue 100%)처럼 색상 정지점을 겹쳐버리는 이른바 "하드 컬러 스톱(Hard Color Stop)" 기법을 사용했습니다. 단 한 줄의 배경 속성만으로 완벽하게 칼로 자른 듯한 그래픽 사선을 만들어내며 색상 정지점 경계값의 강력함을 증명한 사례입니다.

🔬 핵심 기술 메커니즘 — 왜 그라디언트는 탁해지는가?

그라디언트의 색상 보간(Interpolation)은 브라우저의 렌더링 엔진이 수행하는 수학적 계산의 결과입니다. 이 계산의 원리를 모르면 평생 탁한 그라디언트와 싸워야 합니다.

1. 선형 색상 정지점 보간의 물리학 (Linear Interpolation Physics)

그라디언트는 시작점과 끝점 사이의 거리(비율)에 따라 두 색상 값을 수학적으로 섞어냅니다. 색상 정지점 $C_1$이 $p_1$% 위치에 있고, $C_2$가 $p_2$% 위치에 있다고 가정합시다. 특정 픽셀의 위치 $x$ (단, $x in [p_1, p_2]$)에서의 국소 진행률(Local Progress) $t$는 다음과 같이 정의됩니다. [ t = rac{x - p_1}{p_2 - p_1} ] 이 진행률 $t$에 따라 기존 sRGB 색 공간에서는 다음과 같이 R, G, B 각 채널별로 단순 선형 보간(Linear Interpolation)을 수행합니다. [ R(t) = (1-t)R_1 + tR_2 ] [ G(t) = (1-t)G_1 + tG_2 ] [ B(t) = (1-t)B_1 + tB_2 ]

2. sRGB "그레이 데드존(Gray Dead Zone)" 현상의 비밀

왜 밝고 쨍한 두 색을 섞었는데 중간에 탁한 회색이 나올까요? 보색(Complementary Color) 관계에 있는 두 색을 sRGB 공간에서 섞으면 벌어지는 비극입니다. 예를 들어, 파란색(Hue $240^circ$)과 노란색(Hue $60^circ$)을 단순 R,G,B 평균으로 섞는다고 생각해봅시다. 3차원 RGB 큐브 공간에서 파란색과 노란색을 잇는 가장 빠른 최단 직선은 불행히도 무채색(Achromatic, R=G=B)인 큐브의 한가운데를 정확히 관통하게 됩니다. 색상환의 둥근 테두리를 따라 부드럽게 돌아가는 것이 아니라, 채도가 0에 수렴하는 회색 중심축을 가로지르기 때문에 중앙 50% 지점에서 명도와 채도를 모두 잃은 진흙 같은 색(Muddy gray)이 나타나는 것입니다.

3. CSS Color Module Level 4: 최신 색 공간 보간 해결책

다행히 최신 CSS 규격에서는 이 문제를 우아하게 해결할 수 있습니다. linear-gradient() 함수 내에 in oklch 또는 in oklab 같은 보간 색 공간을 직접 명시할 수 있게 되었습니다.

/* 기존 방식: 중심이 탁해지는 sRGB 보간 */
background: linear-gradient(to right, cyan, orange);

/* 최신 방식: 원통형 지각 균일 공간을 따라 보간 (선명함 유지) */
background: linear-gradient(in oklch to right, cyan, orange);

/* P3 광색역 디스플레이를 위한 LAB 공간 보간 */
background: linear-gradient(in oklab to right, #00f, #ff0);

OKLCH 색 공간은 원통형(Cylindrical) 구조를 가집니다. 따라서 두 색상을 섞을 때 3차원 공간을 무식하게 가로지르는 대신, 명도(Lightness)를 일정하게 유지하며 채도(Chroma)와 색조(Hue)의 원형 궤도를 따라 보간합니다. 이로 인해 그레이 데드존이 완전히 사라지고, 광학적으로 매우 자연스럽고 풍부한 전이가 일어납니다.

4. 보간 힌트(Interpolation Hints)의 활용

색상 정지점 사이의 중간값(Midpoint, 보통 50%)을 개발자가 원하는 위치로 밀거나 당길 수 있는 "힌트" 기능이 존재합니다.

/* 빨간색과 파란색의 50% 믹스 지점을 30% 위치로 당김 */
background: linear-gradient(red, 30%, blue);

이 힌트를 활용하면 추가적인 색상을 선언하지 않고도 그라디언트의 무게 중심을 마음대로 이동시킬 수 있어, 버튼이나 헤더 디자인에서 빛 반사 효과 등을 줄 때 매우 유용합니다.

📊 CSS 그라디언트 보간 색 공간 완벽 비교 매트릭스

과거에는 무조건 sRGB 방식 하나뿐이었지만, 이제는 상황에 맞춰 색 공간을 선택해야 합니다. 다음 표를 통해 각 보간 방식의 차이점과 장단점을 확인하세요.

※ 브라우저 지원: Chrome 111+, Safari 16.2+, Firefox 113+ 이상부터 CSS Color Level 4 보간 스페이스 지원. 하위 호환성을 위해 반드시 기본 sRGB 그라디언트를 Fallback으로 먼저 선언해야 합니다.

⚠️ 그라디언트 색상 정지점 실무 5대 낭패와 실수

실무에서 가장 흔하게 저지르는 그라디언트 설계 실수 5가지와 그 파급 효과입니다.

1. 보색 간 다이렉트 sRGB 블렌딩: 파랑과 노랑, 혹은 빨강과 초록처럼 색상환 반대편에 있는 색을 중간 정지점 없이 바로 이으면 반드시 그레이 데드존 늪에 빠집니다. 중간에 다른 색(예: 보라색이나 주황색)을 경유하는 정지점을 억지로라도 추가해야 합니다.
2. 정렬 알고리즘의 오해 (정지점 꼬임 현상): red 70%, blue 30%처럼 앞선 색상의 퍼센트가 뒤의 색상보다 크면, 브라우저는 자동 정렬 규칙에 의해 앞의 값을 무시하고 red 30%, blue 30%로 강제 재조정해버립니다. 이 오토소팅 규칙을 모르면 디자인이 완전히 뭉개집니다.
3. 다크 모드에서의 밴딩 방치: 아주 넓은 영역(예: 전체 화면 배경)에 어두운 색상의 그라디언트를 펼치면 8비트 모니터의 한계로 수십 개의 등고선 계단이 생깁니다. 디더링이나 노이즈 텍스처 오버레이 없이 쌩 CSS만 믿는 것은 아마추어적인 실수입니다.
4. 모던 문법의 벤더 폴백(Fallback) 누락: background: linear-gradient(in oklch, ...)만 덜렁 적어놓으면 구형 브라우저나 크롬 110 이하 버전을 쓰는 기업망 환경에서는 배경이 아예 투명하게 날아가 버립니다. 반드시 바로 윗줄에 구형 문법을 함께 선언해야 합니다.
5. 반응형을 무시한 하드코딩 픽셀 단위 정지점: 퍼센트(%)가 아닌 px 단위로 정지점 거리를 지정하면(red 100px, blue 300px), 모바일 디바이스로 볼 때 그라디언트 비율이 엉망진창으로 찌그러집니다.

💡 생동감 넘치는 프로페셔널 그라디언트 5단계 워크플로우

1. Step 1: 메인 색조(Hues) 선정 — 브랜드 아이덴티티에 맞는 시작 색상과 끝 색상을 선정합니다. 이때 가급적 RGB가 아닌 HSL 또는 LCH 좌표계로 두 색을 픽업합니다.
2. Step 2: 보색 거리(Angle Distance) 계산 — 두 색상의 Hue 각도 차이가 $120^circ$를 넘어선다면 경고등을 켭니다. 중간에 반드시 채도가 높은(Vibrant) 경유 색상(Midpoint Hue)을 정지점으로 추가하여 브릿지 역할을 하게 만듭니다.
3. Step 3: 정지점 퍼센티지(Velocity) 튜닝 — 각 색상이 차지할 면적과 전이 속도를 결정합니다. 한 색상이 오래 유지되다 짧게 변하게 하려면 앞쪽 퍼센트를 길게 가져가고, 보간 힌트(Hint)를 활용해 텐션을 조절합니다.
4. Step 4: 최신 in oklch 보간 선언 & Fallback 구축 — 풍부한 색상 전이를 위해 OKLCH 색 공간 그라디언트를 작성하고, 그 위쪽에 안전빵으로 일반 sRGB 그라디언트를 선언하여 크로스 브라우징을 확보합니다.
5. Step 5: 다크 룸(Dark Room) 및 OLED 디스플레이 검증 — 모니터 밝기를 30% 이하로 낮추거나 실제 OLED 스마트폰 기기에서 화면을 띄워봅니다. 컬러 밴딩이 관찰될 경우 즉시 opacity 2~3% 수준의 미세한 화이트/블랙 노이즈 이미지를 background-image에 덧붙여 디더링을 강제합니다.

🔍 시니어 디자이너의 7가지 비밀 그라디언트 팁

1. 마의 계곡 피하기 (3-Stop Rule): 파란색에서 분홍색으로 갈 때, sRGB에서는 중간이 보라색이 되는 대신 탁해집니다. 이럴 때는 강제로 linear-gradient(blue, purple 50%, pink)처럼 중간색 정지점을 명시하여 강제로 그레이 데드존을 우회하세요.
2. 하드 스톱을 이용한 제로(0) DOM 스플릿: color1 50%, color2 50%처럼 정지점 위치를 동일하게 선언하면 부드러운 그라디언트가 아니라 선명한 직선 분할이 일어납니다. 쓸데없는 div를 추가하지 않고도 사선 패턴, 격자 패턴 등을 만들어내는 치트키입니다.
3. 보간 힌트로 그라디언트 밀기: 세 가지 색을 쓸 필요 없이, 두 색 사이에 퍼센트만 달랑 넣으면(color1, 75%, color2) 50% 믹스 지점이 75% 위치까지 밀려나면서 독특한 장력(Tension)이 생깁니다.
4. 풍부한 차세대 색 렌더링: 애플 생태계의 P3 디스플레이 등 최신 기기의 하드웨어 성능을 100% 끌어내려면 주저하지 말고 in oklch를 사용하세요. 놀랄 만큼 생동감 넘치는 발색을 얻을 수 있습니다.
5. 컬러 밴딩 박멸용 노이즈 디더링: CSS 그라디언트는 완벽한 수학식이라 8비트 한계를 여과 없이 보여줍니다. SVG 데이터 URI로 2% 투명도의 미세한 노이즈(base64)를 배경 이미지 속성에 콤마(,)로 덧붙여 병합하면, 시각적 디더링이 발생해 밴딩 라인이 마법처럼 사라집니다.
6. 역동성을 살리는 오프앵글(Off-Angle): 45deg나 90deg 같은 뻔한 각도보다는 135deg, 160deg, -10deg 등 살짝 틀어진 각도를 사용하면 모던하고 역동적인 UI 흐름(Flow)을 유도할 수 있습니다.
7. 웹 기반 그라디언트 제너레이터 활용: 이 모든 복잡한 정지점 수치와 Fallback 코드를 손으로 짜는 것은 시간 낭비입니다. 최상단과 하단에 링크된 전용 웹 툴을 사용하여 눈으로 보며 즉시 완벽한 크로스 브라우저 CSS를 생성하세요.

🎯 의사결정 트리: 내 프로젝트엔 어떤 그라디언트가 맞을까?

• 상황 A (강렬한 보색 대비와 화려한 영웅 배너가 필요함) ➔ 결정: in oklch 기반 보간 적용 (구형 브라우저용 3-stop sRGB Fallback 필수 삽입)
• 상황 B (단순하고 미니멀한 모노톤, 혹은 톤온톤 배경) ➔ 결정: 레거시 sRGB 기반 기본 linear-gradient() (충분히 부드럽게 섞이므로 굳이 최신 문법 불필요)
• 상황 C (다크 모드용 미세한 차콜~블랙 그라디언트) ➔ 결정: in oklab 보간 + 미세 노이즈 SVG 오버레이 (OLED 밴딩 방어 최우선)
• 상황 D (기하학적 패턴이나 사선 분할 배경이 필요함) ➔ 결정: 하드 컬러 스톱 (동일 % 연속 선언) 적용 (DOM 요소 렌더링 비용 절감)

📑 핵심 용어 사전 및 치트시트

• 색상 정지점(Color Stop): 그라디언트 트랙 위에서 특정 색상이 정확히 100% 불투명도로 렌더링되는 기준 좌표(퍼센트 또는 길이 단위).
• 색 공간 보간(Color Interpolation): 두 정지점 사이의 색상을 혼합하기 위해 렌더링 엔진이 수행하는 수학적 알고리즘.
• sRGB 그레이 데드존(Gray Dead Zone): sRGB 색 공간에서 두 보색을 선형 혼합할 때 명도와 채도가 급감하며 탁한 회색/갈색으로 보이는 치명적 렌더링 한계 구역.
• OKLCH / OKLab: 인간의 시각적 인지(Perceptual) 모델을 기반으로 설계된 최신 색 공간으로, 밝기와 채도를 독립적으로 유지하며 보간할 수 있어 그레이 데드존을 원천 차단함.
• 보간 힌트(Interpolation Hint): 색상을 추가하지 않고도, 두 정지점의 혼합 중간값(50%) 위치를 인위적으로 밀거나 당기기 위해 선언하는 단독 퍼센트 값.
• 컬러 밴딩(Color Banding): 모니터의 비트 심도(Bit Depth) 한계로 인해, 미세한 그라디언트 전이가 등고선 같은 뚜렷한 계단 모양의 띠로 쪼개져 보이는 현상.
• 디더링(Dithering): 컬러 밴딩을 착시로 완화하기 위해 의도적으로 미세한 노이즈 픽셀을 흩뿌려 색상을 부드럽게 섞이게 만드는 그래픽 처리 기법.
• 하드 스톱(Hard Color Stop): 두 색상의 정지점 위치를 동일하게(예: 50%, 50%) 설정하여 보간을 생략하고 칼같이 잘린 뚜렷한 경계선을 만드는 CSS 기법.

자주 묻는 질문

Q1. 그라디언트 중간이 왜 자꾸 탁한 진흙색으로 변하는 건가요? OKLCH가 이걸 어떻게 고치죠?

A1. 기존 웹 브라우저는 색상을 섞을 때 단순히 sRGB 공간의 x, y, z 직선 좌표를 가로지르는 산술 평균을 냈습니다. 이 직선이 색상환의 중앙(채도 0인 무채색 영역)을 뚫고 지나가면 색이 죽어버리는 "그레이 데드존"이 발생합니다. 반면 in oklch 보간법은 3차원 공간을 무식하게 가로지르지 않고, 마치 둥근 원통형 둘레를 따라 미끄러지듯 색을 섞습니다. 그래서 채도(Chroma)와 명도(Lightness)를 끝까지 잃지 않고 쨍한 본연의 색을 유지하는 것입니다.

Q2. 보간 힌트(Interpolation Hints)라는 게 정확히 뭐고 언제 쓰나요?

A2. linear-gradient(black, 30%, white)처럼 색과 색 사이에 퍼센트 기호만 덜렁 적는 것을 말합니다. 원래 블랙과 화이트가 50:50으로 만나는 중간 지점은 정직하게 한가운데(50%)에 생깁니다. 하지만 이 힌트를 30% 위치에 주면, 전체 공간의 앞쪽 30% 지점에서 이미 두 색이 절반씩 섞인 상태가 됩니다. 즉, 앞쪽은 급격히 밝아지고 뒤쪽은 서서히 밝아지는 식의 "가속도(Tension)" 곡선을 색상 추가 없이 매우 간단하게 만들어낼 때 유용합니다.

Q3. 하나의 요소로 사선으로 반반 잘린 뾰족한 투톤 배경을 만들 수 있나요?

A3. 네, 하드 컬러 스톱(Hard Color Stop) 기법을 쓰면 됩니다. background: linear-gradient(135deg, #ff0000 0%, #ff0000 50%, #0000ff 50%, #0000ff 100%); 이렇게 앞 색상의 끝점(50%)과 뒤 색상의 시작점(50%)을 정확히 일치시켜 버리세요. 브라우저가 두 색을 섞을 여유 공간을 0%로 만들어버리기 때문에 픽셀 단위로 날카롭게 잘린 솔리드 투톤 백그라운드를 추가 태그 없이 즉시 구현할 수 있습니다.