색의 3가지 속성
고유한 색의 종류를 구분하는 색상, 색의 진하기를 구분하는 채도, 밝고 어두움을 구분하는 명도
RGBA : 빛의 3원색인 빨강, 초록, 파랑과 투명도를 나타내는 Alpha를 조합하여 색을 표현하는 방식
HSB/HSL : 색의 속성을 직관적으로 다루기 쉬운 방식
HEX : RGB를 16진법으로 변환한 코드로 복사 붙여 넣기 할 수 있고 여러 환경에서 입력하기 쉬움
주색 보조색 강조색
서비스에 사용되는 색에는 기본적으로 주색, 보조색, 강조색, 흑백을 사용
주조색 : 색이 필요한 곳에 가장 많이 상요되는 색
보조색 : 주색외에 다른 요소와 구분이 필요할 때 사용하는 색
강조색 : 전체적인 부분에 포인트를 주기 위해 사용하는 색
흑백 : 주로 배경과 글에 사용하며 가장 밝은색과 어두운 색
색 계층
기본 골격은 흑백으로 구성, 기능이 있거나 꼭 알아야 하는 정보와 같이 중요한 요소는 주색과 보조색으로 강조
색 대비
WCAG에서 나눈 레벨을 주로 따름
A (최소) - 3:1
AA (중간) - 4.5:1
AAA (최대) - 7:1
색의 콘트라스크를 체크할때 유용한 툴
색 조합
단색 : 중요한 정보에 주색을 사용하고 회색 영역도 추색과 같은 계열의 톤을 사용
유사색 : 색상환에서 바로 옆에 있는 색들. 색의 대비가 낮고 조화로움
보색 : 색상환에서 맞은편에 있는 색. 색상 거리가 가장 멀고 색상차이가 크며 강한 대비를 이룸
삼보색 : 삼보색은 색상환에서 동일한 간격으로 위치하는 색들.
먼셀의 색상환
조커 삼보색 (보라,초록,주황)색 비율
6:3:1 = 보조색:주조색:강조색
밝은 색과 어두운 색
1개의 주색으로 정보를 구분하기 어려울 때 밝은 색과 어두운 색을 사용.
자연에서의 색 변화 규칙에 맞춰 밝기 - 채도 - 색조 순으로 색을 변경.
색을 어둡게 할 경우 RGB 계열 색조로 움직이고 채도를 늘리고 밝기를 줄인다.
색을 밝게 할 경우 CMY 계열 색조로 움직이고 채도를 줄이고 밝기를 늘린다.
자연에서는 빛이 강해지면 물체의 채도가 약해진다. 반사량이 강하면 하얗게 반사량이 적으면 어둡게 보이고 색이 박아지면 채도는 떨어지고 어두워지면 채도는 올라간다.
색 자체의 명도 차이
위에 사진은 같은 보색이지만 명도차이가 다르다.
배경과 색
색은 상대적이기때문에 주변에 어떤 색이 있냐에 따라 성질이 달라진다. 다크 모드를 디자인 할때 배경 색이 반전되기 때문에 같은 색을 사용하지 않고 알맞는 색을 사용해야한다.
어두운 배경 + 밝은 영역 + 어두운 내부 요소
밝은 배경 + 어두운 영역 + 밝은 내부 요소
색의 동시대비로 일어난 착시
항상 기본적이건 다 알고 있다고 생각하지만 막상 디자인 할때 실수 하는 부분은 기초적인 부분인 거 같다. 색의 콘트라스트를 수치로 확인해 볼 수 있는 사이트를 알게되어 좋았다. 아티클을 공부하면서 예전에 배웠던 개념이 생각이 나서 추가로 공부해봤다.
이번 아티클을 공부하면서 다시 기초를 공부 할 수 있어서 좋았다. 여태 그냥 색상 패널이라고 불렀었는데 다른 이름이 있다는 것을 알게 됐다. HSB와 HSL의 차이도 배울 수있었다. 추가로 색의 콘트라스트를 수치로 알 수 있는 사이트까지 알게되어 좋았다. 유용하게 쓰일거 같다.
