[컬러] 그라디언트 색추천 사이트 그라디언트 헌트

---

오늘은 그라디언트 색 조합을 추천해드릴게요.

---

1. 그라디언트 헌트

https://gradienthunt.com/

Gradient Hunt - Beautiful Color Gradients

① 그라디언트 색조합 사이트

  - 제가 뽑을건 아니고 사이트를 추천해드릴게요.

  - 그라디언트 헌트라는 사이트 입니다.

  - 컬러 헌트 사이트를 알고 계시다면 익숙할 이름이네요.

 

---

320x100

---

2. 그라디언트 색상 고르기

popular

 ① Popular

  - 마음에 드는 그라디언트 색을 고르면 됩니다.

  - 팁을 드리자면 메뉴 중 Popular, 즉, 인기 있는 카테고리에서 선택하시면 예쁜 게 많이 나와요.

 

---

② 선택

  - 원하는 색상을 선택하면 이렇게 크게 볼 수 있습니다.

  - 여기서 PNG 파일로 다운로드 받아서 사용하실 수 있어요.

  - 아니면 저처럼 캡처해서 사용하셔도 좋습니다.

 

---

---

3. 그라디언트 컬러 코드 사용하기

① COPY GRADIENT CODE

  - 그라디언트 화면에 마우스를 올리면 왼쪽 아래 코드를 카피할 수 있게 버튼이 나타납니다.

  - 클릭해서 그라디언트 코드를 복사해주세요.

 

---

 

background-image: linear-gradient( 109.6deg,  rgba(218,185,252,1) 11.2%, rgba(125,89,252,1) 91.1% );

② 코드 확인

  - 코드라 코드 블록을 활용해봤습니다.

  - 이렇게 엄청 긴 컬러 코드가 나올 거예요.

  - 당황하지 마시고 CSS에서 내가 넣고 싶은 곳에 그냥 붙여넣기만 해 주시면 그대로 적용이 가능합니다.

 

*css에 적용하는 방법이 궁금하시다면 댓글 남겨주세요~! 계시다면 포스팅으로 자세하게 만들어보겠습니다!

 

---

---

4. 활용

① 그라디언트 활용

  - 그라디언트를 활용해서 간단하게 타이포를 꾸며봤어요.

  - 캡처로 가져와서 사용해봤습니다.

  - 색상만 그라디언트를 넣어줬을 뿐인데 있어 보이죠?

 

 

---

 

---

 

contact

 

:: www.instagram.com/draw_wool/

:: www.pinterest.co.kr/draw_wool/_created/

:: notefolio.net/draw_wool

:: www.behance.net/draw_wool

:: grafolio.naver.com/draw_wool

 

 

 

---

 

 

[같이 보면 좋은 글]

 

[tip/디자인 팁] - [꿀정보] 컬러조합 사이트 컬러헌트

[꿀정보] 컬러조합 사이트 컬러헌트

 

[program/Adobe] - [꿀정보] 어도비 컬러로 색상 고민 해결

[꿀정보] 어도비 컬러로 색상 고민 해결

---

그럼 이만.

총총.