글자색/배경색 자동 선택 하기

색의 3속성은 색상, 채도, 명도 가 있다.

2-15) 빛과 색 용어와 의미, 색의 3속성

이번에는 이런걸 개발해야된다.

코드 정보를 표현할 때 배경색, 글자색을 부여해서 영역에 표시하는데 사용한다.

배경색과 글자색이 서로 잘 보이도록 자동 선택되며 서로 중복되지 않도록 한다.

 

최초 로직

색상 변경 시 보색을 자동 선택한다.

문제점

• 보색도 안보이는게 있다.
• 자동으로 바뀌는 점

해결 방안

• 보색인데 잘 안보이는 이유는 보색이 서로 중명도와 중명도인 경우 잘 안보인다.
• 무조건 보색으로 바뀌면 사용자가 선택할수가 없다.

 

개선 로직

1. 색상 변경 시 색 대비가 괜찮으면 그대로 변경한다.

2. 색 대비가 안좋은 경우(명도가 비슷한 경우) 보색으로 변경한다.

3. 보색이 색 대비가 안좋은 경우 해당 색의 명도에 따라 흰색, 검은색으로 변경한다.

 

이렇게 하면

항상 보색인게 아니라 사용자가 선택한 색이 괜찮은 경우 그대로 적용되는 점

 

 

중요한 부분은 색 대비가 좋냐 안좋냐 판단하는 로직이다.

처음에는 명도, 채도, 색계열? 이 비슷한 색을 찾아서 제외한다고 복잡하게 로직을 짰는데

디자이너분의 조언을 들어본 결과 채도나 다른 속성도 결국 명도가 비슷해서 안보이는 것이다~

라고 하여

간단하게 두 색의 명도를 비교하여 그 차이가 85(256/3) 보다 낮은 경우를 색 대비가 안좋다고 하기로 했다.

 

RGB에서는 색의 명도를 뮤 라고 하고 수식은 (R+G+B)/3 이다.

 

 

참고

stackoverflow.com/questions/9018016/how-to-compare-two-colors-for-similarity-difference

How to compare two colors for similarity/difference

ko.wikipedia.org/wiki/%EB%AA%85%EB%8F%84

명도 - 위키백과, 우리 모두의 백과사전

ko.wikipedia.org/wiki/%EC%B1%84%EB%8F%84

채도

m.blog.naver.com/PostView.nhn?blogId=wlgus6012&logNo=220264068540&proxyReferer=https:%2F%2Fwww.google.com%2F

색상대비