여전히 나에겐 어려운 컬러(v1.5)
컬러를 쉽게 정해주는 웹 도구 활용하기
'컬러'에 대한 기본 개념을 이해한다고 하더라도 사실 디자인에서 '컬러'라는 영역이 너무나 광범위하기 때문에 모든 것을 다 이해하는 것은 힘들고, 실제로 자신의 것으로 만들기 위해서는 많이 보고 실제로 디자인에 적용해보며 몸소 익히는 것이 가장 좋습니다.
요즘은 따로 다운로드하지 않더라도 웹브라우저에서 바로바로 분위기에 맞는 컬러를 추천받거나, 사용된 그라디언트 이미지를 무료로 다운로드하여 슬라이드 디자인에 활용할 수 있는 웹 도구들이 많이 존재합니다. 여전히 슬라이드 디자인을 위한 컬러 선정이 어렵다면 이 웹 도구들을 보조수단으로 활용해보면 좋습니다.
웹 도구들을 4가지 타입으로 나누어 살펴보겠습니다.
*그라디언트 사이트가 추가되었습니다. [v1.5]
'슬라이드 분위기를 찾으면 컬러가 보인다' - 맥락 이해를 통한 컬러 추천 Type
어떤 컬러를 메인으로 사용해야 할지 모르겠다면 내가 지금 디자인 중이 슬라이드의 분위기를 생각해보면 아이데이션 하기가 쉽습니다. 내 프레젠테이션의 주제에서 키워드를 생각해보거나, 그 키워드가 갖는 분위기 등을 생각하여 검색을 통해 내 슬라이드 주제와 잘 어울리는 컬러 팔레트를 얻을 수 있습니다. 슬라이드에 삽입되는 이미지에서도 컬러의 힌트를 얻을 수 있는 웹 도구들도 많이 있습니다.
Color Hunt https://colorhunt.co/
Color헌트는 키워드에 맞춰진 컬러 팔레트를 제공합니다. 하나의 컬러 팔레트는 4가지 컬러로 조합되어있습니다. 슬라이드 디자인의 분위기를 키워드로 검색해보거나 좌측 메뉴의 임의로 분류된 키워드를 통해 컬러를 추천받을 수 있습니다.
팔레트를 들어가면, 해당 컬러를 프레젠테이션 디자인 툴에서 같은 컬러로 구현하기 위한 고유의 Hex Code와 rgb 값이 표시되어 있습니다. 또한 image로 다운로드를 통해서 추천된 컬러 값을 활용할 수 있습니다.
적용 예시
이미지를 다운로드한 후, 키노트에 이미지를 불러와 컬러 창의 스포이드를 이용해 컬러를 쉽게 바꿀 수 있습니다.
before
Adobe Color https://color.adobe.com/ko/
포토샵으로 유명한 Adobe사에서 서비스하는 Adobe Color는 [생성] [탐색] [트렌드]등의 서비스를 제공합니다. [탐색]과 [트렌드]를 통해 유행하는 컬러를 탐색해볼 수 있습니다.
[생성]의 [테마 추출하기]를 통해 내가 가진 이미지의 컬러도 뽑아낼 수 있습니다.
이미지에서 추출한 컬러ㅓ
추출된 컬러로 디자인한 슬라이드Color Drop https://colordrop.io/
4가지의 컬러를 하나로 묶은 팔레트를 랜덤으로 추천해 줍니다. 계속해서 업데이트가 되고 좌상단 필터를 통해 가장 많이 다운로드된 컬러 순으로 정렬할 수 있습니다.
'그라디언트는 컬러 조합이 어렵지? 그래서 내가 쓸 수 있는 컬러들만 준비했어' - 그라디언트 컬러 Type
여러 가지 컬러가 조합되는 그라디언트 컬러는 조합되는 컬러를 구성하기가 여간 어려운 일이 아닙니다. 이런 조합을 쉽게 풀어줄 수 있는 몇 가지 웹 도구들을 소개합니다.
2가지 이상 컬러 조합형 (이미지로만 다운로드)
Mesh Gradient Collection https://products.ls.graphics/mesh-gradients/
다양한 컬러가 조합된 아름답고 멋진 그라디언트를 무려 100가지를 무료로 제공하고 있습니다. 마음에 드는 그라디언트를 개별 혹은 한꺼번에 다운로드(Ai, eps, jpg, png) 형태로 받을 수 있습니다.
Unicorn Vector Gradients https://amritpaldesign.com/unicorn-vector-gradients
트렌디한 그라디언트 이미지 25가지를 Ai, jpg형태로 다운로드할 수 있습니다.
Free Stylish Gradient Pack
400x5000px의 300dpi는 고화질 JPEG 파일 15개 그라디언트
Abstract Fluid Gradients
인쇄도 충분한 6000x5000px의 그라디언트
HOLOGRAPHIC TEXTURES
실제 호일을 이용하여 만들어낸 그라디언트 이미지
Vibrant Gradient Shapes (접속이 원할하지 않음)
Gradient Palettes
파스텔톤의 그라디언트
2가지 컬러 조합형 (컬러코드 + 이미지 다운로드형)
UI Gradients https://uigradients.com/
무드별 그러데이션을 랜덤으로 보여줍니다. 좌우 화살표를 통해 컬러를 탐색할 수 있고, 상단의 로테이션 버튼을 통해 이미지를 회전, 다운로드할 수도 있습니다.
itmeo https://webgradients.com/
180여 가지의 그라디언트에 대한 컬러코드 정보 확인이 가능합니다. PNG로 다운로드하여 바로 활용할 수 있습니다.
Cool Hue 2.0 https://webkul.github.io/coolhue/
60가지의 자연스러운 그라디언트에 대한 컬러코드 정보 확인이 가능합니다.
'이 컬러엔 이 컬러를 써야지! - 그대로 쓰기만 하면 되는 '답정너' Type
슬라이 드위에서 사용하면 좋을 명도 대비가 높은 컬러들을 그냥 정해주는 웹 도구도 존재합니다.
Color Claim https://vanschneider.com/colors
컬러 배합이 좋고 명도 대비까지 뛰어난 120가지의 컬러 조합을 소개하고 있습니다.
Hello Color https://jxnblk.github.io/hello-color/? c=a96394
명도 대비가 뛰어난 2가지 컬러를 랜덤으로 추천합니다. 컬러코드를 복사하여 바로 활용할 수 있습니다. 클릭할 때마다 컬러를 추천해주고, 배경과 텍스트의 명도 대비를 표시해 줍니다.
"네가 원하는 컬러가 이거구나?' - 친절형 컬러 추천 type
사용자가 선호하는 컬러를 파악하여 친절하게 컬러 코드를 추천해주는 웹 도구들도 있습니다.
Palettable https://www.palettable.io/E7EAD9
제시된 컬러의 선호 유무를 좋아요, 싫어요를 통해 총 5가지의 컬러코드를 추천합니다. 5가지가 모두 완성되면 PNG형태로 내려받을 수 있습니다.
Color Space https://mycolor.space
한 가지 컬러코드를 넣으면 그 코드와 어울리는 컬러 리스트를 자동으로 뽑아줍니다.
지난 2년간의 글들을 모아 <프레젠테이션 디자인, 이렇게 하면 되나요?>(출판사: 제이펍)라는 책으로 출간하게 되었습니다! 더 다듬어진 글들과 더 풍성해진 예제들은 아래 책을 통해 만나 볼 수 있습니다! 많은 관심 부탁드립니다!