소개🐱‍👤🦊

안녕하세요, 저는 브라질 출신의 게임/웹 개발자인 Leandro입니다. 이곳에 온 것은 이번이 처음입니다. 친절하게 대해주세요 🤗🥰.

색상 작업을 할 때마다 많은 흥미로운 질문이 떠오릅니다. 그러므로 내가 그것을 더 잘 이해할 수 있도록 토론하고 여러분이 무엇을 생각하는지 봅시다.

일관된 색상 팔레트를 만드는 것이 왜 그렇게 어려운가요? 😪🌧

모든 것은 약 10년 전 제 첫 3D 모델에서 시작됩니다.



질감을 표현해야 했을 때 색상이 어떻게 작용하는지 이해하는 것이 얼마나 어려운 일인지 깨달았습니다. 나는 보색과 yadda yadda에 대한 원칙을 알고 있었습니다. 나는 2, 3, 4색이 아닌 16, 32색을 원했다.

오늘 😏🍃

최근에 저는 저만의 CSS 프레임워크를 만들기 시작했고 갑자기 이전에 겪었던 것과 동일한 문제에 직면했습니다. 어떻게 하면 내 웹사이트를 위한 일관된 5색 팔레트를 개발할 수 있을까요?

이것이 내가 끝낸 것입니다.


좋은 색상들이죠? 뭔가 잘못되었습니다. 성공 버튼의 더 나은 대비 버전을 얻을 수 없었고 텍스트가 읽을 수 있을 만큼 명확하지 않았으며 색상 문제로 다시 어려움을 겪었습니다.

갑자기 나는 이것을 깨달았습니다.


색상은 물리적으로 동일하지 않기 때문에 동일한 명도 및 채도 값을 사용하더라도 색상의 대비가 달라집니다. (이것은 내가 다루지 않을 기술적 주제입니다)

.first-example {
  --textPrimary: hsl(260, 95%, 45%);
  --textInfo: hsl(213, 95%, 45%); 
  --textSuccess: hsl(165, 95%, 45%);
  --textError: hsl(0, 95%, 45%);
  --textAlert: hsl(50, 95%, 45%);   

  --backgroundPrimary: hsl(260, 95%, 70%);
  --backgroundInfo: hsl(213, 95%, 70%); 
  --backgroundSuccess: hsl(165, 95%, 70%);
  --backgroundError: hsl(0, 95%, 70%);
  --backgroundAlert: hsl(50, 95%, 70%); 
}

그래서 저는 그것에 대해 생각하기 시작했습니다. 이미지에서 모든 색상의 대비가 동일하면 흐릿하고 생동감이 없어지고, 회색조를 적용하면 이미지가 사라지게 됩니다. 눈에 띄고 관심 지점을 갖기 위해서는 이러한 종류의 차이가 필요합니다.

하지만 사용자 인터페이스와 색상에 대해 이야기할 때 대비가 있어도 모두 일관성이 있어야 합니까? 글쎄요, 그래야 할 수도 있고 실제로 한 가지 색상만 튀어나와야 할 수도 있고 그렇지 않을 수도 있습니다. 너무 많을 수도 있습니다.

음, LCH(Luminance, Chroma, Hue)에 대해 알게 되었고 sRGB 외부의 색상을 구현하는 데 어떻게 도움이 되는지 뿐만 아니라 색조만 변경할 수 있고 동일한 대비를 유지하도록 지각적으로 정확하도록 설계된 방법도 알게 되었습니다.

구경하다:


회색조 버전:


보시다시피 CSS는 아직 LCH를 지원하지 않기 때문에(CSS4에 지원 예정) HSL로 변환해야 했고, 그 숫자는 나에게 악몽을 안겨주었습니다. 확인 해봐:

.final-example {
  --textPrimary: hsl(249.75, 67%, 70%);
  --textInfo: hsl(197.44, 95%, 47%); 
  --textSuccess: hsl(164.99, 60%, 43%);
  --textError: hsl(2.72,  85%, 68%);
  --textAlert: hsl(24.96, 90%, 53.50%);   

  --backgroundPrimary: hsla(249.75, 67%, 70%, 0.15);
  --backgroundInfo: hsla(197.44, 95%, 47%, 0.15); 
  --backgroundSuccess: hsla(164.99, 66%, 40%, 0.15);
  --backgroundError: hsla(2.72,  85%, 68%, 0.15);
  --backgroundAlert: hsla(24.96, 90%, 53.50%, 0.15); 
}

내가 미쳤어? 이것에 대해 토론합시다!🤓🪐☔

나는 여전히 색상을 일관되게 보이게 하고 함께 작동하게 하는 방법에 대한 실마리가 없습니다. 아마도 제가 지나치게 생각하고 있는 것일 수 있으며, 사용자가 원하는 색상을 만족스럽게 만드는 한 RGB 값이 일치하는지 확인하기 위해 아무도 실제로 RGB 값을 검사하지 않을 것입니다. 눈을 떼겠습니다.

어떻게 생각해? 색상 팔레트는 어떻게 구성합니까? 첫 번째 버전을 고수하고 명암을 약간 조정하여 읽을 수 있도록 해야 할까요, 아니면 최종 버전이 가장 정확할까요? 댓글을 남겨주세요! 시아 💜