그라데이션 조합 사이트 모음

그라데이션 사이트

디자인을 할 때 단색으로 많은 톤을 잡지만 두 가지 이상 사용할 때 어색하게 조합을 한다면 전체 느낌이 죽을 수 있습니다. 하지만 조합이 잘된 그라데이션(Gradation) (=그라디언트(Gradient))을 사용한다면 포인트 강조 및 백그라운드를 더 멋있게 살릴 수 있습니다. 은은한톤부터 대비톤까지 잘 조합된 그라데이션 사이트를 살펴보겠습니다.

 

※ CSS Copy 표기는 웹사이트를 포함한 모든 그래픽 툴에서 사용할 수 있는 컬러 코드입니다.

 

01 ui Gradients

특징: 테마별 (2색, 3색 톤) 그라데이션 제공 / 컬러 카테고리 분류

자료: CSS Copy

좌측 상단 메뉴의 Show all gradients를 클릭하면 다양한 컬러 카테고리가 나옵니다.

 

02 Egg gradients

특징: 달걀 모양의 귀여운 프리뷰 / 컬러 카테고리 분류

자료: CSS Copy

 

03 Khroma

특징: 테마별 컬러 제공, 단색 투톤, 이미지 그라데이션 팔레트로 컬러 추출, Ai 기능으로 맞춤형 컬러 추천

자료: CSS Copy

메인 홈페이지에서 Generate를 클릭하면 다양한 팔레트를 선택할 수 있습니다.

 

04 Free Mesh

특징: 3색톤 그라이데이션 조합 제공

자료: Ai, EPS, JPG, PNG 파일 제공 (이메일 입력 필요)

 

05 Color Space

특징: 지정 컬러에 어울리는 톤 추천, 2색, 3색 컬러 제공

자료: CSS Copy

 

06 Web Gradients

특징: 약 180가지 그라데이션 추천, 원형 배열로 클릭시 확대

자료: CSS Copy, PNG, PSD, Sketch

 

07 Cool Hue 2.0

특징: 60가지 그라데이션 추천

자료: CSS Copy, PNG, Photoshop Palette(*.grd)

 

08 CSS Gear

특징: 23가지 그라데이션 추천 웹상에서 톤 범주 조절 가능

자료: CSS Copy, XD

 

09 Abstract Gradients

특징: 비비드톤 5가지 그라데이션

자료: Ai, PNG

그 외 FDR 사이트 내 PSD, 목업, HTML, CSS, XD, Vector, Icons, UI Kits 등다양한 그래픽 정보 제공

 

10 Pale Gradients Freebie

특징: 파스텔톤 5가지 그라데이션

자료: Ai, PNG

그 외 FDR 사이트 내 PSD, 목업, HTML, CSS, XD, Vector, Icons, UI Kits 등다양한 그래픽 정보 제공

 

 

11 Unicorn Vector Gradients

특징: 유니콘에서 영감을 받은 25가지 그라데이션

자료: Ai, JPG

 

 

12 Gradient Hunt

특징: 인기있는 그라데이션 세트 구성

자료: PS(유료), PNG

 

 

다른 정보 참고하기

색상조합 사이트 모음

 

 

// 그 외 유용한 사이트가 있다면 댓글로 남겨주시면 추가하겠습니다~!