컬러 보간 / 그라데이션 스텝

두 끝점 사이를 균등한 간격으로 나눈 색들을 만들어 냅니다. CSS 그러데이션은 이어지는 하나의 띠이지만, 이 도구는 차트 계열, 상태 배지, 히트맵 범례로 그대로 쓸 수 있는 개별 색 견본을 줍니다. 보간이 일어나는 색 공간을 직접 고를 수 있고, 이징 곡선으로 간격을 한쪽 끝으로 몰 수 있으며, 전체 램프를 헥스로 복사해 갈 수 있습니다.

색 공간은 사람들이 짐작하는 것보다 훨씬 중요하고, 비교 하나로 판가름이 납니다. 순수한 빨강에서 순수한 초록으로 보간해 중간점을 보세요. sRGB에서는 #808000, 실수처럼 보이는 어두운 올리브가 나옵니다. 인코딩된 값을 평균 내면 양쪽 끝의 체감 밝기를 동시에 절반으로 깎기 때문입니다. 렌더러가 쓰는 방식이자 빛이 실제로 더해지는 방식인 선형 RGB에서는 같은 중간점이 #bcbc00으로 훨씬 밝고, 어쩌면 지나치게 밝습니다. OKLab에서는 #d0a800, 경로가 끊긴 구멍이 아니라 경로 위의 한 걸음으로 읽히는 따뜻한 호박색이 됩니다.

이 어두워지는 중간 구간이 고전적인 그러데이션 결함이고, 두 끝점이 서로 다른 채널에 에너지를 실을 때마다 나타납니다. 파랑에서 노랑, 빨강에서 청록, 마젠타에서 초록이 모두 sRGB에서 주저앉습니다. 채널을 공유하는 끝점끼리는 — 연한 파랑에서 진한 파랑처럼 — 거의 드러나지 않는데, 마침 단색 계열인 팔레트에서 이 문제가 몇 년씩 눈에 띄지 않을 수 있는 이유가 그것입니다.

나머지 선택지에 대한 메모 둘. HSL은 색상환을 따라 움직이며 짧은 쪽 호를 택합니다. 대개 원하는 동작이지만, 반대쪽으로 갈 줄 알았던 빨강-초록 램프를 노랑을 거쳐 보내는 경우가 가끔 있습니다. 그리고 이징 곡선은 끝점이 무엇인지를 바꾸는 것이 아니라 단계들이 어디에 떨어지는지를 바꿉니다. 이즈아웃은 시작 쪽에 더 많은 단계를 모아 주는데, 흥미로운 변화가 낮은 쪽에 있어서 포화된 꼬리가 아니라 그쪽에 해상도를 주고 싶은 히트맵에 알맞은 모양입니다.