이미지에서 컬러컨셉을 구하는 방법(CSS, Swatch)

무드보드, 컬러스타일 관련 디자인 작업을 하다보면 컬러컨셉을 고민할 때가 있다.  포토샵의 모자이크 Mosaic Filter를 이용하는 방법과  간편하게  로그인 없이 이미지를 업로드하면 쉽게 색상을 변환시켜주는 Colors Palette Generator를 이용하기, Adobe Color를 온라인으로 이용하여 Color Concept을 구하는 다양한 방법을 통해서 색상고민을 해결해 보겠습니다.

 

https://pantone.kr/

PANTONE 팬톤코리아

---

포토샵에서 관련 이미지를 1개의 레이어에 준비하고 복제한 후에 Filter-Pixelate-Mosaic 효과를 실행하고 옵션에서 타일모양의 셀 Square(Block)을 Cell Size 85px 정도 주면 레이어이미지를 기반으로한 모자이크 타일에서 원하는 색상값을 찾아 낼 수 있습니다.

 

 

16진수라 부르는 색상은 헥사색상코드 (Hex color codes)라고하는데  스포이드 모양의 Eye Dropper 도구로 일정한 픽셀범위를 콕 찝어내면 #FF0000과 같은 Red컬러를 표기하는 방법이다. 

 

모니터 환경 등 웹의 환경을 고려한 Only Web Color는 색상의 제한은 있지만, 안정적인 웹용 컬러를 제안한다.

 

포토샵의 제한된 스와치스(색상견본)도 있습니다

 

 

---

 

웹개발자를 위한 컬러 변환기 Colors Palette Generator

 

포토샵에도 그대로 사용되는 헥사코드 컬러값은 웹디자인 작업에 필요한 배색이 되는 컬러리스트를 상징적인 이미지에서 컬러컨셉을 CSS, Swatch로 추출해주는 사이트 컬러 팔렛 제너레이터 입니다.

 

 

 

http://www.cssdrive.com/imagepalette/index.php

CSS Drive: Image to Colors Palette Generator

 

아래 출처 픽사베이의 이미지에서 저장한 이미지를 통해서 컬러컨셉을 정해보세요

 

 

W3School에서도 웹디자이너를 위한 컬러픽커도 색상값에 명암을 부여한 값을 구할 수 있습니다.

https://www.w3schools.com/colors/colors_picker.asp

HTML Color Picker

---

 

어도비 색상테마 Adobe Color Theme

정식으로 구글계정을 통해 이용할 수 있는 어도비의 색상 테마(띰이 원래 발음)는 Adobe Color 커뮤니티에서 인기 있는 색상 팔레트를 찾아보고 색상 검색 기능을 사용하여 이름, 분위기 또는 키워드로 테마를 검색하세요. 색상 테마를 한 번 클릭하면 색상 휠에서 바로 편집할 수 있습니다.

 

https://color.adobe.com/ko/explore

https://color.adobe.com/ko/explore

 

 

어도비에서도 다양한 컬러를 뽑는 방법으로 아래와 같은 홈페이지를 통해서도 색상 컨셉을 얻을 수 있습니다.

https://color.adobe.com/ko/create/color-wheel

https://color.adobe.com/ko/create/color-wheel