-
hex color 에서 밝기를 어떻게 추출할 수 있을까?CSS 2022. 4. 14. 15:49
현재 진행 중인 프로젝트에서 string 데이터를 ascii 로 비꾸고 -> 이를 hex color 값으로 바꾸어 고유의 색상을 부여하는 작업을 진행 중이다.
이렇게 하면 각 string data 마다 고유의 색상이 정해지기 때문에, 만일 요청한 profile picture가 404 에러로 돌아올 경우, onError를 통해 styling 을 따로 해줄 수 있다.
하지만 그 위에 띄울 유저 아이콘 색상을 결정하는 것이 의외의 난관이었다. 까만색 배경에는 하얀색 아이콘을, 하얀색 배경에는 까만색 아이콘을 띄워주고 싶었기 때문이다.
답은 hex color code 의 근본을 응용하는데에 있었다. hex로 바꾼다음 -> r, g, b 세 가지를 대표하는 두 글자씩을 각기 떼어낸 다음, 일정한 값을 곱하여 그 결과 (number)를 기준 삼으면 얼마나 밝은 / 어두운 색깔인지 판단할 수 있다고 한다.
https://stackoverflow.com/questions/12043187/how-to-check-if-hex-color-is-too-black
'CSS' 카테고리의 다른 글
[번역] 개별 transform 속성으로 CSS transform을 더 세밀하게 조정하기 (1) 2022.10.18 [scss] react-data-grid 에서 기본 sorting 화살표 보여주기. (0) 2022.05.20