본문 바로가기

디자인 소스

예쁜 컬러조합을 만들어주는 색상 조합 팔레트, Coolors

예쁜 컬러조합을 만들어주는 색상 조합 팔레트, Coolors

다양한 정보를 전달해 드리려고 노력하는 블로그!!!

글과 사진 및 이미지 ▶ CopyLeft(C)
◎CopyLeft(C) 는 공유는 하시되 복사 붙여넣기가 아니라 내용을 응용하여 작성해서 가져가셔야 된다는 걸 알려 드립니다.
◎사진과 이미지 일부는 퍼온 것도 있음을 밝힙니다.


목차


“Coolors” 예쁜 컬러조합을 만들어주는 색상 조합 팔레트

PPT를 만들 때나 디자인을 할 때 뿐만 아니라 색을 사용하는 곳은 많다. 그럴 때마다 필자는 다른 사람이 만든 작업물의 컬러를 많이 참고하는 편인데, “Coolors”를 알게 되어 병행하면서 사용하게 되었다.

coolors 사이트 바로가기
PC의 경우 무료로 사용할 수 있는데, 아이폰의 경우는 유료이다. 안드로이드는 확인을 못 해봤다.

  • Adobe Add-ons 에서 어도비 포토샵과 일러스트에도 사용가능하지만 유료이다.
  • 크롬 확장프로그램도 있다.



Coolors의 사용법.

처음 시작 시 랜덤으로 5개의 컬러가 조합되어 나온다.
상단의 설명은 왼쪽부터 나열해 보겠다.

Coolors의 맨 위 상단 6개 설명.


  1. Generate - Generate를 클릭하면 랜덤 컬러를 잡아준다.
  2. Explore - 사람들이 컬러조합을 한 것들을 확인할 수 있다.
  3. iOS App - 아이폰 앱을 다운받는 링크로 들어가 진다.
  4. Add-on - 어도비 Add-on으로 다운받는 링크로 들어가진다.
  5. Chrome Extension - 크롬 확장프로그램을 다운받는 링크로 들어가진다.
  6. More - 기타 내용이 있으니 확인해보면 된다.

색상 밑에 색상 명과 6자리의 웹 색상 코드가 나와 있다.

Coolors의 중간 상단 3개 버튼 설명.


3가지 모두 컬러의 변화를 줄 수 있다. 하나하나 클릭해보면 쉽게 사용할 수 있다.

  • Hue는 색상, Saturation은 채도, Brightness는 명도, Temperature는 온도이다.

Coolors의 컬러색 4개 버튼 설명.



위의 이미지에서 4가지 버튼 4개 버튼에 대해서 설명하겠다.

  1. Alternative Shades - 대체 음영을 확인 할 수 있다.
  2. Drag - 클릭을 하고 드레그하면 색들의 위치를 변경할 수 있다.
  3. Adiust - 색상을 다양하게 변경할 수 있다.
  4. Lock - 색을 자물쇠를 걸어 변경이 안 되도록 한다.



마무리

필자의 경우 색 조합을 잘못하는 편이다. 어느 색을 같이 사용해야 할지 몰라서 다른 사람들의 칼라를 참고하여 작업을 많이 하는 편이다. 하지만 Coolors를 알게 되어 조금 더 쉽게 칼라조합을 할 수 있게 되었다. 다른 사람들이 올린 컬러 값도 확인이 가능하기 때문에 컬러를 확인 할때 참고하면 좋을듯하다.

그리고 자신이 만든 컬러값도 저장이 되니 다른 곳에서도 확인이 가능하다. 사용방법은 여러 가지 있을듯하다.

%23%20%uC608%uC05C%20%uCEEC%uB7EC%uC870%uD569%uC744%20%uB9CC%uB4E4%uC5B4%uC8FC%uB294%20%uC0C9%uC0C1%20%uC870%uD569%20%uD314%uB808%uD2B8%2C%20Coolors%0A@%28%24.%uBE14%uB85C%uADF8%29%5BMarxico%2C%20%uD2F0%uC2A4%uD1A0%uB9AC%5D%20%0A%0A%3Cp%3E%3Cfont%20color%3D%22%23ffffff%22%3E%3Cspan%20style%3D%22background-color%3A%20rgb%280%2C%20153%2C%20153%29%3B%20color%3A%20rgb%28255%2C%20255%2C%20255%29%3B%22%3E%uB2E4%uC591%uD55C%20%uC815%uBCF4%uB97C%20%uC804%uB2EC%uD574%20%uB4DC%uB9AC%uB824%uACE0%20%uB178%uB825%uD558%uB294%20%uBE14%uB85C%uADF8%21%21%21%3C/span%3E%3C/font%3E%3C/p%3E%0A%uAE00%uACFC%20%uC0AC%uC9C4%20%uBC0F%20%uC774%uBBF8%uC9C0%20%u25B6%20CopyLeft%28C%29%0A%u25CECopyLeft%28C%29%20%uB294%20%uACF5%uC720%uB294%20%uD558%uC2DC%uB418%20%uBCF5%uC0AC%20%uBD99%uC5EC%uB123%uAE30%uAC00%20%uC544%uB2C8%uB77C%20%uB0B4%uC6A9%uC744%20%uC751%uC6A9%uD558%uC5EC%20%uC791%uC131%uD574%uC11C%20%uAC00%uC838%uAC00%uC154%uC57C%20%uB41C%uB2E4%uB294%20%uAC78%20%uC54C%uB824%20%uB4DC%uB9BD%uB2C8%uB2E4.%20%0A%u25CE%uC0AC%uC9C4%uACFC%20%uC774%uBBF8%uC9C0%20%uC77C%uBD80%uB294%20%uD37C%uC628%20%uAC83%uB3C4%20%uC788%uC74C%uC744%20%uBC1D%uD799%uB2C8%uB2E4.%20%0A%0A---%0A%0A%23%20%uBAA9%uCC28%0A%5BTOC%5D%0A%0A%0A%0A---%0A%0A%23%23%20%22Coolors%22%20%uC608%uC05C%20%uCEEC%uB7EC%uC870%uD569%uC744%20%uB9CC%uB4E4%uC5B4%uC8FC%uB294%20%uC0C9%uC0C1%20%uC870%uD569%20%uD314%uB808%uD2B8%0APPT%uB97C%20%uB9CC%uB4E4%20%uB54C%uB098%20%uB514%uC790%uC778%uC744%20%uD560%20%uB54C%20%uBFD0%uB9CC%20%uC544%uB2C8%uB77C%20%uC0C9%uC744%20%uC0AC%uC6A9%uD558%uB294%20%uACF3%uC740%20%uB9CE%uB2E4.%20%uADF8%uB7F4%20%uB54C%uB9C8%uB2E4%20%uD544%uC790%uB294%20%uB2E4%uB978%20%uC0AC%uB78C%uC774%20%uB9CC%uB4E0%20%uC791%uC5C5%uBB3C%uC758%20%uCEEC%uB7EC%uB97C%20%uB9CE%uC774%20%uCC38%uACE0%uD558%uB294%20%uD3B8%uC778%uB370%2C%20%22Coolors%22%uB97C%20%uC54C%uAC8C%20%uB418%uC5B4%20%uBCD1%uD589%uD558%uBA74%uC11C%20%uC0AC%uC6A9%uD558%uAC8C%20%uB418%uC5C8%uB2E4.%20%0A%0A%3E%20%5Bcoolors%20%uC0AC%uC774%uD2B8%20%uBC14%uB85C%uAC00%uAE30%5D%28https%3A//coolors.co/%29%0A%3E%20PC%uC758%20%uACBD%uC6B0%20%uBB34%uB8CC%uB85C%20%uC0AC%uC6A9%uD560%20%uC218%20%uC788%uB294%uB370%2C%20%uC544%uC774%uD3F0%uC758%20%uACBD%uC6B0%uB294%20%uC720%uB8CC%uC774%uB2E4.%20%uC548%uB4DC%uB85C%uC774%uB4DC%uB294%20%uD655%uC778%uC744%20%uBABB%20%uD574%uBD24%uB2E4.%0A%3E%20*%20Adobe%20Add-ons%20%uC5D0%uC11C%20%uC5B4%uB3C4%uBE44%20%uD3EC%uD1A0%uC0F5%uACFC%20%uC77C%uB7EC%uC2A4%uD2B8%uC5D0%uB3C4%20%20%uC0AC%uC6A9%uAC00%uB2A5%uD558%uC9C0%uB9CC%20%uC720%uB8CC%uC774%uB2E4.%20%20%0A%3E%20*%20%uD06C%uB86C%20%uD655%uC7A5%uD504%uB85C%uADF8%uB7A8%uB3C4%20%uC788%uB2E4.%20%0A%0A%21%5BAlt%20text%5D%28./coolors1.gif%29%0A%0A---%0A%0A%23%23%20Coolors%uC758%20%uC0AC%uC6A9%uBC95.%0A%0A%uCC98%uC74C%20%uC2DC%uC791%20%uC2DC%20%uB79C%uB364%uC73C%uB85C%205%uAC1C%uC758%20%uCEEC%uB7EC%uAC00%20%uC870%uD569%uB418%uC5B4%20%uB098%uC628%uB2E4.%0A%uC0C1%uB2E8%uC758%20%uC124%uBA85%uC740%20%uC67C%uCABD%uBD80%uD130%20%uB098%uC5F4%uD574%20%uBCF4%uACA0%uB2E4.%20%0A%0A%23%23%23%20Coolors%uC758%20%uB9E8%20%uC704%20%uC0C1%uB2E8%206%uAC1C%20%uC124%uBA85.%0A%21%5BAlt%20text%5D%28./20170410155729001coolors.jpg%29%0A%0A1.%20Generate%20-%20Generate%uB97C%20%uD074%uB9AD%uD558%uBA74%20%uB79C%uB364%20%uCEEC%uB7EC%uB97C%20%uC7A1%uC544%uC900%uB2E4.%20%0A2.%20Explore%20-%20%uC0AC%uB78C%uB4E4%uC774%20%uCEEC%uB7EC%uC870%uD569%uC744%20%uD55C%20%uAC83%uB4E4%uC744%20%uD655%uC778%uD560%20%uC218%20%uC788%uB2E4.%20%0A3.%20iOS%20App%20-%20%uC544%uC774%uD3F0%20%uC571%uC744%20%uB2E4%uC6B4%uBC1B%uB294%20%uB9C1%uD06C%uB85C%20%uB4E4%uC5B4%uAC00%20%uC9C4%uB2E4.%20%0A4.%20Add-on%20-%20%uC5B4%uB3C4%uBE44%20Add-on%uC73C%uB85C%20%uB2E4%uC6B4%uBC1B%uB294%20%uB9C1%uD06C%uB85C%20%uB4E4%uC5B4%uAC00%uC9C4%uB2E4.%0A5.%20Chrome%20Extension%20-%20%uD06C%uB86C%20%uD655%uC7A5%uD504%uB85C%uADF8%uB7A8%uC744%20%uB2E4%uC6B4%uBC1B%uB294%20%uB9C1%uD06C%uB85C%20%uB4E4%uC5B4%uAC00%uC9C4%uB2E4.%0A6.%20More%20-%20%uAE30%uD0C0%20%uB0B4%uC6A9%uC774%20%uC788%uC73C%uB2C8%20%uD655%uC778%uD574%uBCF4%uBA74%20%uB41C%uB2E4.%20%0A%0A%3E%20%uC0C9%uC0C1%20%uBC11%uC5D0%20%uC0C9%uC0C1%20%uBA85%uACFC%206%uC790%uB9AC%uC758%20%uC6F9%20%uC0C9%uC0C1%20%uCF54%uB4DC%uAC00%20%uB098%uC640%20%uC788%uB2E4.%0A%0A%23%23%23%20Coolors%uC758%20%uC911%uAC04%20%uC0C1%uB2E8%203%uAC1C%20%uBC84%uD2BC%20%uC124%uBA85.%0A%0A%21%5BAlt%20text%5D%28./Honeycam%202017-04-10%2016-08-25%20coolors.gif%29%0A%0A3%uAC00%uC9C0%20%uBAA8%uB450%20%uCEEC%uB7EC%uC758%20%uBCC0%uD654%uB97C%20%uC904%20%uC218%20%uC788%uB2E4.%20%uD558%uB098%uD558%uB098%20%uD074%uB9AD%uD574%uBCF4%uBA74%20%uC27D%uAC8C%20%uC0AC%uC6A9%uD560%20%uC218%20%uC788%uB2E4.%0A%3E%20*%20Hue%uB294%20%uC0C9%uC0C1%2C%20Saturation%uC740%20%uCC44%uB3C4%2C%20Brightness%uB294%20%uBA85%uB3C4%2C%20Temperature%uB294%20%uC628%uB3C4%uC774%uB2E4.%20%0A%0A%0A%23%23%23%20Coolors%uC758%20%uCEEC%uB7EC%uC0C9%204%uAC1C%20%uBC84%uD2BC%20%uC124%uBA85.%0A%21%5BAlt%20text%5D%28./20170410155933001coolors.jpg%29%0A%20%uC704%uC758%20%uC774%uBBF8%uC9C0%uC5D0%uC11C%204%uAC00%uC9C0%20%uBC84%uD2BC%204%uAC1C%20%uBC84%uD2BC%uC5D0%20%uB300%uD574%uC11C%20%uC124%uBA85%uD558%uACA0%uB2E4.%0A%0A1.%20Alternative%20Shades%20-%20%uB300%uCCB4%20%uC74C%uC601%uC744%20%uD655%uC778%20%uD560%20%uC218%20%uC788%uB2E4.%20%0A2.%20Drag%20-%20%uD074%uB9AD%uC744%20%uD558%uACE0%20%uB4DC%uB808%uADF8%uD558%uBA74%20%uC0C9%uB4E4%uC758%20%uC704%uCE58%uB97C%20%uBCC0%uACBD%uD560%20%uC218%20%uC788%uB2E4.%0A3.%20Adiust%20-%20%uC0C9%uC0C1%uC744%20%uB2E4%uC591%uD558%uAC8C%20%uBCC0%uACBD%uD560%20%uC218%20%uC788%uB2E4.%20%0A4.%20Lock%20-%20%uC0C9%uC744%20%uC790%uBB3C%uC1E0%uB97C%20%uAC78%uC5B4%20%uBCC0%uACBD%uC774%20%uC548%20%uB418%uB3C4%uB85D%20%uD55C%uB2E4.%20%0A%0A---%0A%0A%uAD11%uACE01111%0A%0A---%0A%23%20%uB9C8%uBB34%uB9AC%0A%uD544%uC790%uC758%20%uACBD%uC6B0%20%uC0C9%20%uC870%uD569%uC744%20%uC798%uBABB%uD558%uB294%20%uD3B8%uC774%uB2E4.%20%uC5B4%uB290%20%uC0C9%uC744%20%uAC19%uC774%20%uC0AC%uC6A9%uD574%uC57C%20%uD560%uC9C0%20%uBAB0%uB77C%uC11C%20%uB2E4%uB978%20%uC0AC%uB78C%uB4E4%uC758%20%uCE7C%uB77C%uB97C%20%uCC38%uACE0%uD558%uC5EC%20%uC791%uC5C5%uC744%20%uB9CE%uC774%20%uD558%uB294%20%uD3B8%uC774%uB2E4.%20%uD558%uC9C0%uB9CC%20Coolors%uB97C%20%uC54C%uAC8C%20%uB418%uC5B4%20%uC870%uAE08%20%uB354%20%uC27D%uAC8C%20%uCE7C%uB77C%uC870%uD569%uC744%20%uD560%20%uC218%20%uC788%uAC8C%20%uB418%uC5C8%uB2E4.%20%uB2E4%uB978%20%uC0AC%uB78C%uB4E4%uC774%20%uC62C%uB9B0%20%uCEEC%uB7EC%20%uAC12%uB3C4%20%uD655%uC778%uC774%20%uAC00%uB2A5%uD558%uAE30%20%uB54C%uBB38%uC5D0%20%uCEEC%uB7EC%uB97C%20%uD655%uC778%20%uD560%uB54C%20%uCC38%uACE0%uD558%uBA74%20%uC88B%uC744%uB4EF%uD558%uB2E4.%20%0A%0A%uADF8%uB9AC%uACE0%20%uC790%uC2E0%uC774%20%uB9CC%uB4E0%20%uCEEC%uB7EC%uAC12%uB3C4%20%uC800%uC7A5%uC774%20%uB418%uB2C8%20%uB2E4%uB978%20%uACF3%uC5D0%uC11C%uB3C4%20%uD655%uC778%uC774%20%uAC00%uB2A5%uD558%uB2E4.%20%uC0AC%uC6A9%uBC29%uBC95%uC740%20%uC5EC%uB7EC%20%uAC00%uC9C0%20%uC788%uC744%uB4EF%uD558%uB2E4.