알아두면 좋은 사이트 (그라데이션, filter, 색상 조화)

이거는 굳이 블로그에 글을 여러 개 남길 필요 없이 한 번에 다 작성하겠다.

 

1. 그라데이션을 편안하게 맞출 수 있다. linear, radial 설정까지 가능하고 잘 사용하면 편안하다.

https://cssgradient.io/

 

 

2. filter 태그를 사용해서 색상이 변경될때 맞춰야 되는 값을 알려줌.

기준은 #000이고 이 이미지를 #fff 로 변경하고 싶으면 input에 입력하고 compute filters를 눌러보자.

https://codepen.io/sosuke/pen/Pjoqqp

CSS filter generator to convert from black to target hex color

이런식으로 나올 것이다.

filter: invert(100%) sepia(0%) saturate(7473%) hue-rotate(31deg) brightness(101%) contrast(91%);

Loss: 37.4. The color is extremely off. Run it again!

 

필터 입력하면 색상이 변한다.(아이콘처럼 단색인 것에만 사용하기를 추천.)

 

3 색상 찾는 수고로움을 덜어주는 페이지

주요 색상과 잘 어울리는 서브색상을 알려주는 페이지이다. css랑 관련이 없어 보이지만 편리해서 넣었다.

https://mycolor.space/

ColorSpace - Color Palettes Generator and Color Gradient Tool