탁하지 않은 그라디언트를 만드는 비법에 대한 글인데요. 개인적으로 컬러 시스템에 대한 이해도가 높아지는 내용이 많아 재밌었습니다! 😚 RGB 색상 모델 안에서는 3가지 숫자값이 비슷해질수록 회색

탁하지 않은 그라디언트를 만드는 비법에 대한 글인데요. 개인적으로 컬러 시스템에 대한 이해도가 높아지는 내용이 많아 재밌었습니다! 😚 RGB 색상 모델 안에서는 3가지 숫자값이 비슷해질수록 회색이 돌기 때문에 그라디언트가 탁해지기 쉽다는 이야기인데요. 노란색은 (255/255/0)이고 파란색은 (0/0/255)이기 때문에 중간은 (127.5/127.5/127.5)=회색으로 수렴하게 됩니다. 특히 요즘은 보색으로 그라이언트를 만드는 경우가 많아 더더욱 이런 경우가 많을 것 같습니다. 글쓴이는 이에 대한 대안으로 HSV(Hue, Saturation, Value)나 HSL(Hue, Saturation, Lightness) 모델 안에서 그라디언트를 만드는 것을 제안하고 있습니다. 이런 색상 모델 하에서는 '채도'가 아예 별도의 축으로 존재하기 때문에, 그라디언트의 채도 변화 없이 깨끗하게 만들 수 있다고 해요. 다만 이런 색상 모델의 그라디언트는 css 코드로 변환하기 어려운 단점이 있는데요. 이를 위해 HSV, HSL 그라디언트를 생성하고 코드변환까지 도와주는 웹페이지도 만들었다고 합니다. 🤭 (링크: https://www.joshwcomeau.com/gradient-generator/) 여러분도 그라디언트를 활용할 일이 있다면, 디자인 툴에서 바로 그리지 말고 이 사이트를 활용해보셔도 좋을 것 같습니다! -------------------- - 위의 예시에서는 순수한 노란색(255/255/0)에서 시작합니다. 그래디언트를 따라 이동하면서 파란색(0/0/255)에서 혼합을 시작합니다. 중앙에 도달할 때까지 노란색의 절반을 혼합하고 파란색의 절반을 혼합했습니다. 즉, 세 채널 모두 중간 값인 127.5를 향해 수렴합니다. 결과 색상은 회색입니다. 파란색과 노란색 사이의 중간점이 회색이라는 것이 조금 이상합니다. 채도가 높은 두 색상을 함께 혼합하면 완전히 채도가 낮은 색상이 됩니다. 색상만 혼합하고 채도를 전체적으로 일정하게 유지 하는 방법이 있다면 어떨까요? - HSL은 Hue/Saturation/Lightness의 약자입니다. Hue(색조)는 색상환에서 색상을 제어합니다. Saturation(채도)는 색상이 얼마나 생생한지를 제어합니다. Lightness(밝기)는 색상이 얼마나 밝거나 어두운지를 제어합니다. 개인적으로, 나는 이것이 색상에 대해 생각하는 훨씬 더 직관적인 방법이라고 생각합니다. - CSS는 그라디언트 계산에 사용되는 색상 모드를 변경할 수 있는 방법을 제공하지 않습니다. 적어도 아직까지는 주어진 그라디언트에 대해 HSL 보간을 사용하도록 "선택"할 수 없습니다. - 그래서 우리의 트릭은 사용자 정의 색상 모드를 사용하여 중간지점 색상 덩어리를 생성하고 CSS 그라디언트 기능에 모두 전달하는 것입니다. CSS 엔진은 RGB 보간법을 사용하지만 최종 결과에는 영향을 미치지 않습니다.