자바스크립트로 색상값 명도 채도 변경 하기 how to change color's bright with javascript

업무상 자바스크립트로 특정 색을 선택하면 비슷한 채도나 명도의 색을 자동으로 지정해주는 기능이 필요했다

예를 들면 블로그 테마 메인 컬러를 선택하면 더 밝은 컬러 더 어두운 컬러를 자동으로 지정해준다.

tinycolor2

tinycolor2

GitHub - bgrins/TinyColor: Fast, small color manipulation and conversion for JavaScript

GitHub - bgrins/TinyColor: Fast, small color manipulation and conversion for JavaScript

위 라이브러리를 통해서 간단하게 수정이 가능하다.

lighten() 파라미터 값을 주는 만큼 밝게 변경해준다.

tinycolor("#f00").lighten().toString(); // "#ff3333"
tinycolor("#f00").lighten(100).toString(); // "#ffffff"

tinycolor("#f00").darken().toString(); // "#cc0000"
tinycolor("#f00").darken(100).toString(); // "#000000"

darken() 파라미터 값을 주는 만큼 밝게 변경해준다.

css에 많이 사용하는 hex 색상코드 값을 변경하기 쉽다.

tinycolor(color).lighten(15).toString()
tinycolor(color).darken(15).toString()

위 코드를 사용해서 hex 컬러 값의 명도를 높인 값과 낮춘 값을 자동으로 선택해주는 기능을 구현했다.