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

어색한 표기의 콘셉트,  가장 일반적인 컨셉(Concept)은 구상, 개념을 잡는 것을 말한다.  오늘 옷장에서 어떤 컬러의 옷을 입고 갈 것인가 처럼 색상을  제일 중요한 컨셉 중하나이다. 무드보드, 컬러스타일 관련 디자인 작업을 하다보면 컬러컨셉을 고민할 때가 있다. 

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

 

---

 

컬러트랜드를 볼 수 Colors

Trending Color Palettes - Coolors

 

 

Illustrator Swatches - PANTONE

어도비 일러스트레이터의 색상견본인 스와치스 라이브러리에는 팬톤컬러의 색상정보가 그대로 추가되어 있다.  Color Books이라는 실제  세계적인 표준색상으로 구매하는 색상견본집 책자의 컬러리스트 중에서 단색-유광 코팅종이/ 무광 일반종이를 구분해서 색정보가 들어간 라이브러리를 띄우고 필요한 경우 패널에 삽입해 정확한 색값을 반영한 디자인 결과물을 얻을 수 있다.

PANTONE 팬톤코리아

---

 

Photoshop Filter - Pixelate - Mosaic

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

 

 

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

 

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

 

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

 

 

---

 

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

포토샵에 모자이크와 유사한 일정범위내에서 대표색을  랜덤하게 뽑아주는 제너레이터도 추천한다. #FF0000 와 같은 표기의 HEX 헥사코드 컬러값은 웹디자인 작업에 필요한 배색이 되는 컬러리스트를 상징적인 이미지에서 컬러컨셉을 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

 

어도비에서도 다양한 컬러를 뽑는 방법으로 아래와 같은 홈페이지를 통해서도 색상 컨셉을 얻을 수 있습니다. 동그라미에서 겉도는 느낌이지만 개인취향으로 대표색 6개를 선택할 수 있다.

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

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