세련된 디자인으로 그라데이션 색상을 많이 이용하게 됩니다. 다만, 조합이 다양해 자주 사용하지 않는 이상 배합을 조정해 사용하는 것이 어려운데요. 그래서 오늘은 그라데이션 색 조합 추천 사이트를 알아보고 예쁘고 멋진 그라데이션 색 조합과 색상코드, CSS 코드를 찾아보겠습니다.
[ 목차 ]
uiGradients
uiGradients 사이트는 그라데이션 조합을 확인할 때 제가 즐겨 찾는 사이트입니다. 전체화면으로 색상 변화를 보고 있다면 그 자체로 힐링이 되는 사이트 디자인이 무척 마음에 듭니다. 추천하는 색 조합을 선택해 방향을 바꿔가며 그라데이션 색상을 확인해 볼 수 있으며 색상 값과 CSS 코드를 복사할 수 있습니다.
Gradient by ShapeFactory
https://gradient.shapefactory.co/
Gradient by ShapeFactory는 물감(색상) 농도와 밝기를 조절하여 다양한 그라데이션 색상을 한 번에 확인할 수 있습니다. 좀 칙칙한 색상에 실망감이 들 수 있지만 밝기를 최대로 하면 더 화사한 색상 값을 얻을 수 있습니다.
스크롤을 내리면 계속하여 새로운 그라데이션 색상을 보여주는 것도 재미있습니다.
Gradienty
Gradienty는 6만 개의 그라데이션 색 조합을 게시하였고 앞으로 다양한 2단계 그라데이션을 이용해 2181조 개의 색조합을 카탈로그화 하였다는 목표를 세운 서비스 입니다.
너무 많은 색상과 기준 없는 그라데이션 색 조합을 마구잡이로 표시해 주기 때문에 원하는 색상을 화면을 보면서 찾기는 어렵습니다. 대신 검색 기능이 좋은 것이 장점입니다. 원하는 기준 색상을 찾거나 필터를 통해 원하는 그라데이션 색상을 골라볼 수 있다.
물론 원하는 색이 없다면 그라데이션 색상을 직접 만드는 기능도 훌륭합니다.
Gradihunt
Gradihunt는 수백만 개의 그라데이션 색상을 자동 생성하는 사이트 입니다. ‘Generate’ 버튼으로 바로바로 새로운 그라데이션 색상을 만들어내고 사용자 정의값으로 ‘파스텔색’, ‘시원한색’, ‘밝은색’, ‘하드한색’, ‘알파색’을 대표적으로 선택해 색상을 만듭니다.
사용자가 색조, 포화도, 농도, 알파 값을 조정해 그라데이션 색상 생성 값을 통제할 수 있는 것이 강점입니다.
WebGradients
WebGradients는 웹사이트의 모든 부분에서 콘텐츠 배경 으로 사용할 수 있는 180개의 선형 그라데이션 무료 컬렉션입니다. CSS3 크로스 브라우저 코드를 쉽게 복사할 수 있으며 각 그라데이션의 PNG 버전도 준비되어 있습니다. 추가로 Sketch & Photoshop 용 팩도 있습니다.
마음에 드는 그라데이션 색상을 선택하면 브라우저 가득 그라데이션이 채워지면 색상 자체가 같은 느낌을 온전히 전달받을 수 있습니다.
CSS Gears
https://gradients.cssgears.com/
CSS Gears는 수많은 그라데이션 색상을 스크롤을 내릴 때마다 자동 생성되는 사이트입니다. 각 그라디언트 값을 조절하여 생성된 그라데이션 색을 즉각적으로 변경할 수 있습니다.
컬렉션 카테고리에서는 멋진 그라데이션 색상을 모아 볼 수도 있습니다.
Coolhue Gradient
https://webkul.github.io/coolhue/
Coolhue Gradient는 깃허브로 서비스되고 있는 사이트입니다. 엄선된 그라데이션 색상 및 견본 60개를 통해 개인별로 조절을 통하여 CoolHue 팔레트를 개인화할 수 있습니다.
CoolHue 그라디언트 팔레트는 JSON으로 렌더링 되므로 언제든지 미세 조정을 할 수 있습니다. 다만 CoolHue 사이트 안에서는 타사이트에 비해 협소한 색상 값만 알 수 있으며 그라데이션 색상을 조절하기 위해서 별도의 프로그램 혹은 플러그인을 설치해야 하는 점이 타 사이트와 다른 점입니다.
ColorSpace gradient
https://mycolor.space/gradient3
ColorSpace는 제시된 팔레트를 통해 만들어지는 그라데이션 색상 만들기와 그라이언트 조절을 통해 다채로운 그라데이션 색상 만들기 그리고 3가지 색과 그라이언트 모두를 사용해 독창적인 그라데이션을 만드는 서비스를 제공합니다.
물론 만들어진 그라데이션 색상은 CSS 코드를 바로 확인하고 복사할 수 있습니다. 사이트 자체도 다른 곳과 차별화된 디자인과 기능으로 신선한 느낌을 받았습니다. ColorSpace를 사용해 보시기를 추천드립니다.
이상입니다.
[더 읽어볼거리]
