본문 바로가기

웹디자인을 위한 추천 컬러 매칭 사이트

엉클샘 발행일 : 2019-01-12

웹디자인을 위한 추천 컬러 매칭 사이트


웹디자인을 할 때면 컬러 배색이나 컬러 매칭이 고민될때가 많습니다. 그럴 때 유용하게 사용할 수 있는 컬러 매칭사이트를 소개해드립니다.


http://paletton.com


구글에서 찾다가 발견한 사이트인데 생각보다 체계적으로 만들어져 있어서 유용한 사이트입니다.


컬러매칭사이트

사이트에 들어가시면 위 화면이 나옵니다. 무료 정보 사이트라 그런지 상하좌우로 광고가 많이 붙긴 합니다. 

동그란 원에서 색상을 클릭하면 왼쪽 밑에 RGB색상 정보가 나옵니다. 그리고 오른쪽으로 어울리는 색상을 추천해 줍니다. 색상을 클릭하시면 Hex 칼라코드나 RGB정보 등이 자세하게 나옵니다. 그리고 위에 빨간색으로 체크한 부분을 보시면 단색, 유사한 색, 어울리는 보색 등으로 매칭을 해줍니다. 


그리고 오른쪽 밑에 있는 EXAMPLES를 누르시면 다양한 샘플화면들이 나옵니다.


컬러매칭사이트

원하는 색상을 클릭한 다음 EXAMPLES를 누르면 나오는 웹페이지 샘플 화면입니다. 본인이 선택한 컬러에 맞춰 색상을 배합한 웹페이지 샘플입니다. 놀랍죠. 그리고 오른쪽 위에 보시면 웹페이지를 색상 테마별로 미리보기가 됩니다. 웹디자인을 하시는 분들이라면 대충이나마 색상 미리보기를 할 수 있기 때문에 사용하시면 아주 편리하실 겁니다.



컬러매칭사이트

오른쪽 위에 보시면 웹페이지 디자인 뿐만아니라 Artwork를 색상을 배합해서 보여줍니다. Artwork 밑에 보시면 Animated가 있는데 색상 조합을 애니메이션 샘플로도 보실 수 있습니다.



컬러매칭사이트

그리고 다시 홈 화면으로 와서 오른쪽 밑에 있는 TABLES/EXPORT를 클릭해보시면 웹에서 다양하게 활용할 수 있게 만들어 놨습니다.



컬러매칭사이트

오른쪽 위에 보시면 as HTML, CSS 등등이 나와있죠. 클릭하면 현재 보고있는 색상을 해당 코드로 보실 수 있습니다. as text도 있어서 텍스트 파일로도 보실 수 있습니다.



컬러매칭사이트

as CSS를 누르면 나오는 코드입니다. 



컬러매칭사이트

그리고 Color combinations 화면입니다. 정말 다양하게 정리 잘 해 놓은 사이트인 것 같습니다. 유용한 색상 배합 사이트로 디자인을 조금 더 쉽게 해 보세요.


반응형

댓글