search

taihoon / share

5 stars 0 forks source link

HSL이 RGB보다 좋은 점 #2

Open taihoon opened 3 years ago

taihoon commented 3 years ago

https://sujansundareswaran.com/blog/why-hsl-is-better-than-hex-and-rgb 을 발번역 했어요.

#3ecbbe 이거 무슨 색인지 알 수 있음? rgba(253, 152, 39) 이건 뭘까?

어렵지? 16진수(HEX)와 RGB는 직관적인 색상 모델이 아니라 그래. 근데 HSL은 색상을 표현하는 실제 방식을 모방하고 있어 보다 친화적이야.

자~ 너는 지금 책상에 앉아 있을텐데, 책상의 색상을 봐봐. 마호가니 책상이라고 가정하면 그 색상은

일 꺼야.

이제 책상 표면 위 5센치 정도 위에 손을 올려봐. 그림자가 생겨 책상이 조금 어둡지? 그치만 책상의 색은 변한게 아니야. 표면에 도달한 빛의 양이 준거지. 이 변경을 색상 자체를 변경하지 않고 16진수나 rgb로 표현하는 것은 불가능해. 아예 다른 값이 되거든.

원래 색과 이 값은 아무 상관 관계가 없어. 유추하기도 힘들지 ㅠ.

HSL

hsl은 hue, saturation, lightness의 약자야. 직관적인 색상 모델이지. 닝겐이 더 잘 이해할 수 있어. css는 rgb와 비슷한 형식으로 hsl(20, 100%, 60%) 처럼 쓰면 돼.

hue(색조)는 색상이고 빨간색으로 시작해. 녹색은 120°, 파랑은 270°야.

각 색상이 컬러휠(색상환)의 어디에 있는지 잘 봐둬. hsl 시스템을 활용할 때 꼭 필요하거든.

saturation(채도)는 색상의 강도나 순도를 지정하는 백분율이야. 0%는 색상이 채도가 낮고 흐릿한 회색인데 색상이 믹스에 존재하지 않다는 거지. 100%는 가장 순수한 색상이야.

lightness(밝기)도 백분율이야. 0%는 완전한 어둠, 즉 완전한 검은색이지. 100%는 순수한 흰색인 눈부신 빛이야.

이런 방식으로 색상을 가장 잘 표현하려면 색상 값을 선택하고 채도를 100%, 밝기를 50%로 해야겠지.

hsl(20, 100%, 60%)를 다시 볼까?

이렇게 hsl 값을 읽는 것 만으로 색상을 시각화 할 수 있어. 그렇담 hsl을 사용해 책상 예제를 표현해 볼까?

봐봐. 색조와 채도는 달라지지 않고 밝기만 달라졌어. 아래 예제도 봐봐.

button        { background-color : hsl(20, 100%, 60%); }
button:hover  { background-color : hsl(20, 100%, 70%); }
button:active { background-color : hsl(20, 100%, 40%); }
button button:hover button:active

HSL로 팔레트 구성하기

머리속으로 색상을 시각화 하는 방법을 알았으니 이제 색상 팔레트를 만드는 방법을 알아보자.

빨강 hsl(0, 100%, 50%)을 기본으로 할께.

보색(Complementary)

보색은 서로 반대편에 있는 색상이야. 보색의 조화는 극적이고 강렬한 느낌을 줘.

근접보색(Split–Complementary)

근접 보색은 보색 양옆의 두 색이야. 격조 높은 효과를 기대할 수 있어.

등간격 3색(Triadic)

이건 서로 동일한 거리에 있는 3가지 색상이야. 화려한 느낌을 준대.

등간격 4색(Tetradic)

서로 동일한 거리에 있는 4가지 색상. 다양하고 깊이 있다고 해.

유사(Analogous)

기본 색상 양쪽에서 두개의 생상을 선책하는 거야. 원색의 개성을 보여주며 부드러움과 통일감을 줄 수 있어.

단색(Monochromatic)

동일한 색조를 사용하지만 밝기가 달라. 단정한 느낌을 준대.

자. 이렇게 hsl을 사용하면 팔레트를 만드는건 간단한 산수가 돼. 레츠두잇~

hg-pyun commented 3 years ago

오.. 잘보고갑니다!