그라데이션 색상 조합 참고 사이트 모음! (색상코드, CSS 제공)

안녕하세요, 그라데이션(Gradation)이란 어떤 색조나 명암이 단계적으로 매끄럽게 변화하는 예술 기법을 의미하는데요!

 

약간의 변화로 단색보다 입체감과 생동감을 줄 수 있어 Apple, Spotify, Instagram 등 우리 일상 속에서도 그라데이션을 활용한 로고나 디자인들을 접할 수 있습니다.

 

하지만 막상 그라데이션을 적용하려면 무슨 색을 써야 할지 고민에 빠지게 되는데요... 오늘은 이런 고민을 덜어줄 수 있는 그라데이션 색상을 참고할 수 있는 사이트 5곳을 소개해 드리려고 합니다! :)

 

그라데이션 색상 참고 사이트

 

01. uiGradients

uiGradients - Beautiful colored gradients

 

uiGradients는 사이트에 들어가면 랜덤으로 하나의 그라데이션을 보여주는데요. 요건 신경 쓰지 마시고 다른 색을 보고 싶으면 좌우로 넘기거나 Show all gradients 를 클릭하면 색상별로 다양한 그라데이션 목록을 볼 수 있습니다!

  

상단의 코드를 누르면 자동으로 색상 값이 복사되며 CSS는 우측 상단의 <> 모양을 클릭하면 복사됩니다. 

 

 

02. WebGradients

Free Gradients Collection by itmeo.com

 

두번째는 WebGradient 입니다. 색상이 전반적으로 밝고 파스텔톤이 많아 제가 자주 이용했었는데요!

  

단점은 색상 코드가 클릭만으로 복사가 되지 않아 직접 드래그하여 복사해야하는 번거로움이 있지만 CSS는 클릭 한번으로 복사가 가능합니다. 그리고 상단에 PNG로도 다운받을수 있으니 참고하시길 바랍니다.

 

 

03. Gradienty

Gradienty

 

Gradienty 사이트는 메인화면에서 원하는 그라데이션 이미지를 누르면 하단에서 색상 코드와 CSS 코드를 클릭하여 복사가 가능합니다. 특별히 원하는 색상 종류가 있으시다면 검색창에서 색상을 입력해 보시면 관련된 그라데이션이 쫙 나온답니다.

 

 

04. Gradihunt

Gradihunt: Automated Gradient Generator

 

Gradihunt는 오늘 소개하는 사이트 중 옵션이 가장 다양한 사이트입니다. Customize 버튼으로 원하는 명도, 채도 등을 조절하여 원하는 색상을 고를 수 있으며 색상 값을 확인하려면 그라데이션의 우측 상단부근을 눌러주세요!

 

 

그러면 이렇게 화면이 뜨는데요. 값을 복사하고 싶으면 우측 상단부근을 눌러서 한번에 복사하실 수 있어요! 그라데이션 밑의 색상 값은 복사하는 게 아니라 누르면 그 색상을 활용한 다른 그라데이션들을 보여줍니다. 좌측 상단의 동그라미를 누르면 직접 색을 변경할 수도 있습니다.

  

그리고 아래에는 그라데이션 위의 글자를 올렸을 때, 그라데이션이 적용된 글씨를 볼 수 있도록 해줍니다. 빈칸에 직접 타이핑하여 원하는 텍스트를 입력할 수도 있으며 마찬가지로 흰색과 검정색 동그라미를 누르면 글자색 배경색을 변경할 수 있습니다!

 

앞으로 자주 사용하게 될 사이트가 될 것 같아요...! ٩( *˙0˙*)۶

 

 

05. Gradient by ShapeFactory

Gradient by ShapeFactory | Chromatic Gradient Generator

 

마지막은 Gradient by ShapeFactory 입니다. 색상 아래에 클릭하면 값을 복사할 수 있도록 되어있으며 가운데는 그라데이션 각도를 조절할 수 있도록 되어있습니다.

  

좌측에는 Pigment와 Lighting으로 화면에 나와있는 그라데이션의 채도와 명도를 한번에 조정할 수 있습니다. 아래의 팔레트 모양을 누르면 원하는 색상 계열의 그라데이션만 볼 수도 있습니다.

 

---

 

지금까지 다섯 곳의 그라디언트 색상 조합 레퍼런스 사이트들을 소개 드렸는데요!

  

오늘 알려드린 사이트들은 색상 코드와 CSS 코드 모두 제공하기 때문에 디자인이나 PPT 등 다양한 곳에 다양하게 활용하실 수 있으니 많은 분들께 도움이 되셨길 바랍니다!