디자이너를 위한 색조합 사이트 9개
아티클
2023.08.01

디자이너를 위한 색조합 사이트 9개

✔ Color Hunt

전세계에 있는 사람들이 올려주는 조합을 한 곳에서 확인할 수 있는 곳이에요.



사이트가 깔끔해서 보기 편했고, 새로 올라오는 것도 많아서 트렌디한 색조합을 찾아볼 수 있더라고요.

image



또 인기, 랜덤 필터도 있고 ‘네온, 골드, 크리스마스, 차가운’ 등 분위기에 맞는 색 조합도 추출해서 볼 수 있어요. 아래는 ‘light’에 해당하는 조합들이에요.

image


색상표를 클릭하면 크게 볼 수 있어요. 원하는 색상에 마우스를 올리면 RGB 색상 값이 나오는데 클릭하면 복사가 돼요!

image


이렇게 구체적인 색상표도 확인할 수 있어요.

image

Colorhunt 바로가기



✔ Adobe Color

전문적이고 섬세하게 여러 색 조합을 찾거나 만들 수 있는 사이트에요! 할 수 있는 기능이 다양한데요. 우선 ‘색상환’을 이용해서 색상 구성표를 만들 수 있어요. 색상환은 가시광선의 스펙트럼을 고리형태로 연결하여 색을 배열한 것을 말해요.

image


이곳에서는 ‘색상 하모니’ 규칙을 적용해서 여러 색상 팔레트를 직접 만들 수 있는데요. 색상 하모니 규칙은 조화가 잘 되는 색상 밸런스 규칙을 의미해요.



유사, 단색, 삼각형, 보색, 음영 등의 규칙을 설정할 수 있어요.

image


유사 규칙을 설정한 모습

image


이중분할보색 규칙을 설정한 모습



또 RGB, CMYK 등 원하는 색상 모드에 맞게 색상 코드도 확인할 수 있어요.

image


로그인 후에는 Creative Cloud에 저장할 수 있어요. 그러면 Adobe 제품(Photoshop, Illustrator, Fresco 등)에서 저장된 색상 테마를 사용할 수 있어요.



어도비 서비스를 이용하고 계시는 분에게는 특히 좋은 기능인 것 같아요

image

또 색맹이 있는 사용자들을 혼란스럽게 하는 색상 충돌도 검토할 수도 있어요.

image


이미지를 올리면 그 이미지에 속한 색상을 단색이나 그레디언트로 추출도 할 수 있어요.

image


단색 추출 결과

image

그라데이션 추출 결과

image


해당 색상표를 클릭하면 색상코드 복사도 되고 CMYK, RGB 등 다양한 색상 모드의 값들도 볼 수 있어요!

image


다른 분이 만든 색상 팔레트를 구경해볼 수도 있어요!

image



또 최근 트렌드 색상을 살펴볼 수도 있어요. 패션, 그래픽 디자인, 일러스트. UIUX 등 여러 주제가 있어요.

image


Adobe Color 바로가기



✔ Color Space

이곳은 특정 색에 어울리는 조합이 무엇일지 찾기에 좋아요! 예를 들어 연보라색을 쓰고 싶은데, 어떤 색과 같이 써야 할 지 모를 때 좋은데요.



첫 페이지에서 특정 색상을 설정할 수 있어요.

image



스크롤을 내리면 여러 버전의 색 조합들을 추천해줘요! 해당 색상 코드를 클릭하면 쉽게 복사도 할 수 있어요.

image


Color Space 바로가기



✔ Hailpixel

이곳은 조금 특이한 사이트였어요. 마우스를 움직이거나 방향키와 스크롤을 사용해서 색상 값을 선택할 수 있는데요!


마음에 드는 색을 발견하면 클릭해서 그 색을 고정할 수 있어요. 색상 값도 함께 확인할 수 있어요.

image

image


Hailpixel 바로가기



✔ Coolors

스페이스바를 누르면 랜덤으로 여러 색 구성을 확인할 수 있는 사이트에요! 세세하게 색상을 수정할 수도 있어요.

image


이미지를 올리면 그 이미지에 사용된 색상도 추출할 수 있어요.

image


여러 색 조합표도 구경할 수도 있어요.

image


마우스를 올리면 색상 코드값도 바로 볼 수 있어요.

image


Coolors 바로가기




✔ design-seeds

동물이나 자연의 색상들을 팔레트로 만든 사이트에요!


자연적인 색이나 따뜻한 느낌을 찾을 때 유용하더라고요. 또 동식물의 색상들을 이용했다는 점이 특이해서 좋았어요


image


design-seeds 바로가기



✔ uiGradients

그라디언트 색 조합들을 키보드 좌우키나 화살표 아이콘 클릭을 통해 살펴볼 수 있어요.

image



‘Show all gradients’를 누르면 한 번에 여러 색 조합을 볼 수 있어요.

image


또 붉은 계열 노란 계열 등 원하는 계열의 조합들만 추려서도 볼 수 있어요. 아래는 파랑 계열을 선택했을 때의 결과에요!

image


CSS code도 복사가 된다는 것이 신기했어요!

image



uiGradients 바로가기




✔ Gradienthunt

그라데이션 컬러들을 볼 수 있는 사이트에요! 신규, 인기, 랜덤 형식으로 구경할 수 있어요.

image


Gradienthunt 바로가기




✔ WEB Gradients

동그라미 모양으로 그라데이션 컬러들을 확인할 수 있는 곳이에요.‘Peach, Lady Lips’ 등 색의 느낌을 단어로 표현해서 좋았어요. 주로 유사 색이나 보색 계열의 조합이 많아요.

image

WEB Gradients 바로가기



디자이너를 위한 색조합 사이트 9개 | 오즈의 제작소