디자이너로 약 8년 정도 일하면서 드는 생각은 타이포그래피, 레이아웃, 사이즈에 대한 감각 등은 많은 벤치마킹과 노력을 통해서 어느 정도 감각을 익히는 것이 그나마 쉽다는 것이다. 하지만 색상은 정말 많은 아주 많은 노력이 필요하다.
예를 들어 벤치마킹할 컬러를 가져왔을 때도 이미지에 스포이드로 컬러를 추출하면 끝인 것 같지만 이상하게 벤치마킹할 이미지와 컬러가 미묘하게 달라보일 때가 있다. 스포이드가 모든 컬러를 정확하게 짚지는 못하기 때문이다. 따라서 나의 눈 감각으로 보정을 해주어야 하는데 이것이 쉽지가 않다.
그래서 이번에는 🌈색채 감각을 키우기 좋은 사이트 4개, 색채 조합하기 좋은 레퍼런스 사이트 4개를 공유하고자 한다.
색채감각 키우기 좋은 사이트들
Adobe Color 어도비 컬러 - 실제 업계에서 사용되는 컬러 테마
실제 사용빈도(5) - ⭐⭐⭐⭐⭐
가장 전문적으로 컬러 트렌드를 알 수 있는 곳이라고 생각한다. 매년 나오는 디자인 트렌드는 사실상 업계에서 바로 적용이 되는 경우는 드물다고 생각한다. 나도 회사의 디자인 가이드에 따라 요소 몇부분만 트렌드에 따르거나 혹은 그저 비슷한 디자인을 할 뿐!(약간의 변명이라면 회사의 디자인 가이드를 따라야 하는 이유는 그 회사의 브랜드이기 때문에 어디서든 누가 디자인을 했든 이건 딱 OOO회사라는 인지를 할 수 있어야하기 때문이다.)
Coolors 쿨러스 - 앱과 Figma 플러그인까지 출시!
실제 사용빈도(3) - ⭐⭐⭐
사실 지금 사이트는 좀 복잡한 감이 있어서 사이트를 이용하지는 않는다. 하지만 현재는 앱도 출시하였고, Figma(피그마)에서 플러그인으로도 사용이 가능하다. 추후에 Figma 강의도 올릴 예정인데, 그 때 이 Coolors 플러그인을 사용해볼 예정이다.
p.s. 근데 쿨러스라고 읽는 게 맞나? 컬러스는 아닌데?🤔
Color Hunt 컬러 헌트 - 시즌별, 컨셉별로 컬러 아이디어를 얻기 좋은 곳!
실제 사용빈도(5) - ⭐⭐⭐⭐⭐
컬러헌트에서는 주로 색상에 대한 아이디어를 얻는 편이다. 왼쪽 메뉴를 보면 각종 테마들로 카테고라이징 되어있는 부분이 있는데, 이 메뉴를 활용하여 시즌별 프로모션 페이지 혹은 배너 작업을 할 때 대략의 컬러톤을 잡곤 한다.
Gradient Hunt 그라디언트 헌트 - 그라디언트의 코드값 추출으로 디자인 작업, 개발 작업 모두 원활!
실제 사용빈도(5) - ⭐⭐⭐⭐⭐
내가 정말 많이 사용하고, 그라디언트에 대한 아이디어를 얻는 사이트! 나는 플랫 디자인도 좋아하지만, 플랫하더라도 배경에 살짝 그라디언트를 주어서 정말 살짝 입체감을 주는 것을 좋아한다. 폰트나 장식요소에 힘을 빼거나 미니멀한 디자인을 해서 플랫 디자인을 완성시키기도 한다. 그리고 정말 좋은 점은 구체적인 그라디언트 값을 알려주기 때문에 개발자에게 넘겨주기 쉽다는 점! 한가지 아쉬운 점은 RGB모드만 있다는 것이다.
컬러 코드값 예시:
background-image: radial-gradient( circle farthest-corner at 12.3% 19.3%, rgba(85,88,218,1) 0%, rgba(95,209,249,1) 100.2% );
가끔 회사의 디자인 가이드를 따라서 메인 색상 같은 경우가 정해진 경우가 있는데, 이럴 경우 메인 색상과 조합을 이룰 수 있는 색을 뽑아주는 아주 좋은 사이트들이 있다. 위의 색채조합 사이트와 중복되는 사이트도 있음!
메인 색상을 바탕으로 색조합을 추출해주는 사이트
Adobe Color 어도비 컬러 - 나만의 컬러 라이브러리를 저장하여 작업물에 적용까지!
실제 사용빈도(5) - ⭐⭐⭐⭐⭐
컬러 휠을 사용하여 간편하게 색상들을 입력할 수가 있고, 무려 기본으로 제공되는 9가지 조합 + 커스텀 조합으로 색상을 추출해낼 수가 있다. Adobe 프로그램을 사용하는 사람들이라면 여기서 추출한 컬러 테마를 라이브러리에 적용하여 어느 프로그램에서든지 사용이 가능하다!
Paletton 팔레톤 - 직관적인 UI와 색상 추출에 최적화된 심플한 사이트
실제 사용빈도(5) - ⭐⭐⭐⭐⭐
색상 추출에만 확실하게 포지셔닝을 한 사이트. 직관적이라서 처음에 어도비컬러에서 색상 관련 내용이 나오지 않았을 때 주로 이용했던 사이트이다. 그리고 사실 어도비의 흰 배경보다 팔레톤의 검은 배경에서 컬러휠에 더욱 집중이 되는 느낌이다. 나의 경우는 사용감은 팔레톤이 훨씬 편함.
Coolor 쿨러스 - 요약글
실제 사용빈도(?) - 사용해볼 예정
현재는 앱도 출시하였고, Figma(피그마)에서 플러그인으로도 사용이 가능하다.
애플 스토어에서 다운받기
Coolors
Coolors is the most loved color palettes app and website that inspires 2M+ creatives every day! • Create your color schemes with the super-fast generator. • Organize them in handy projects and collections. • Export as image or PDF, or just copy an
apps.apple.com
구글 스토어에서 다운받기
Coolors - Apps on Google Play
Create & browse color palettes
play.google.com
Pantone Connect 팬톤 커넥트 - 편집물, 인쇄물 등 출력물의 색상 코드 보기 좋은 곳
실제 사용빈도(2) - ⭐⭐
매년 <올해의 컬러>를 선정하는 대표적인 컬러 회사 팬톤에서 만든 사이트. 정말 내가 쓰고자 하는 기능들인 추출, 변환, 컬러 조화 등은 유료기능이긴 하지만 인쇄물이나 그래픽 디자인을 하는 사람들에게는 정확한 컬러값을 전달할 수 있어서 좋을 듯하다. 그리고 팬톤칩 별로 색상 구분과 색상 코드를 알 수 있으니 이것만으로도 많은 활용도가 있을 것으로 예상된다.
p.s. 하지만 난 팬톤 별로 안 좋아함! 컬러를 유료로 돌리다니! 너무 괘씸함!😠 한달에 무려 $14.99💸 아니 이럴거면 자연이 색상을 제공해주는데 자연한테 수수료를 줘야하는 거 아니냣!!!
p.s.s. 영국 조각가 아니쉬 카푸어(Anish Kapoor)의 <반타블랙(Vanta Black)> 독점과 그에 대한 보복으로 현대미술가 스튜어트 셈플(Stuart Semple)이 만들어낸 <핑키스트 핑크(Pinkest Pink)>가 생각이 난다! 색상을 인질로 삼다니!
p.s.s.s. 2019년 MIT 연구진이 발명한 반타블랙보다 7배 흡수율이 높은 검은색인 <리뎀션 오브 베니티(Redemption of Vanity)>를 발명🤭
실제로 내가 디자인 작업을 하면서 색상사용에 대해서 굉장히 애를 먹고 힘들었던 적이 있었기 때문에 나름대로 <컬러 레퍼런스 사이트 모음>이라고 포스팅을 하게되었다. 혹시나 이 글을 보는 디자이너분들에게 많은 도움이 될 수 있으면 좋겠다!
'💜 s h a r e 💜 > 💻 디자인팁 💻' 카테고리의 다른 글
| 디자이너 꿀팁🍯; 국문 폰트 추천 - 여기어때 잘난체, 타이틀 폰트로 제격👍 (0) | 2023.07.27 |
|---|---|
| 디자이너 꿀팁🍯; 디자인 레퍼런스 사이트 모음 - 🧑🏻💻UI/UX 디자이너편 1 (0) | 2023.07.25 |
| 디자이너 꿀팁🍯; 국문 폰트 추천 - 아리따 산스, 산셰리프 서체 (0) | 2023.07.22 |
| 디자이너 꿀팁🍯; 국문 폰트 추천 - 아리따 부리 (0) | 2023.07.21 |
| 디자이너 꿀팁🍯; 국문 폰트 추천 - 아리따 돋움, 산셰리프 서체 (0) | 2023.07.20 |
댓글