색상 표, 색상 코드, 색상 조합 사이트 추천 BEST TOP 10 (2020년)
색상표 색상조합을 찾고 계십니까? 디자이너, 프론트엔드 개발자 또는 풀스텍 개발자라면 내가 만드는 어플리케이션의 UI 색감에 대해 고민해 보셨을꺼에요. 색감 천재가 아니라면 어떤 색깔이 이쁜지, 두가지+ 색상 조합이 잘 어울리는지, 글씨 색깔이 잘 보이는지.. 참 어렵습니다. 그래서 준비 해봤습니다. 우리의 수고를 덜어줄 색상 표 색상 조합 사이트 추천해 드립니다.
좋아하실만한 연관 글
1. Paletton
단색 색상 표 또는 2~4 가지의 색상 조합을 선택할 수 있습니다. 마우스로 바깥 원형 색상 팔렛 위를 드레그해서 원하는 색상톤을 고르면 그 색에 맞는 컬러 조합을 알려줍니다. 안쪽 원형 팔렛으로 선택된 색감에 그림자를 넣어 색상 조합에 다른 밝기와 어둠기를 조정할 수 있습니다.
“Randomize” 라는 버튼을 누르면, 4가지 랜덤 패턴을 통해 랜덤 색상을 조합할 수 있습니다.
| 링크 | http://paletton.com |
2. Colllor
기본 베이스 컬러를 선택하면 그 색에 맞은 그림자, 틴트, 톤들, 믹스, 유사 컬러를 색상을 추천해 제공해 줍니다. 사용 용도는 색감에 변화를 줘야할때 사용하면 좋을듯 싶네요. 버튼 클릭 전/후의 색감 변화라든지 또는 translate color등.
| 링크 | http://colllor.com |
3. Color Hunt
Color Hunt는 색상 툴이란 개념보다, 색상을 남들과 collaborate하는 그런 사이트 입니다. 개인 유저가 색상 조합을 만들어 올리면 다른 유저들로부터 LIKE를 받는 시스템입니다. 이곳에서 인기있는 색상 조합을 한눈에 볼수 있는 장점이 있습니다. New, trendy, popular, random으로 필터해서 보실수 있습니다.
| 링크 | https://colorhunt.co/ |
4. Color Hex
심플은 단색 색상표 입니다. 색상에 대한 구체적인 정보를 알려주는 사이트입니다. 색상의 Hex(16진수), RGB, HSL, HSV, CMYK, etc 또는 여러가지의 틴트 컬러, 그림자 컬러, Analogous, Triadic 컬러를 제공하고 있습니다.
| 링크 | https://www.color-hex.com/ |
5. Adobe Color
색상 표를 통해 원하는 색감에 드레그하면, 그 베이스 색깔과 잘 어울리는 조합 컬러를 계산해 줍니다. 사용하기 아주 간단해서 좋습니다. 계산된 조합 컬러중 하나를 따로 수정하면 따라서 모든 조합이 수정된 컬러에 맞춤 계산된 조합을 제공해줍니다. 다양한 색상 조합 패턴을 고를수 있습니다. Analogous, Monochromatic, Triad, Complementary, Compound, Shades, Custom 등
| 링크 | https://color.adobe.com |
6. Color Calculator
디자인 학교가 제공하는 색상 조합기! 정말 심플한 UI로 빠르게 조합을 얻어갈 수 있습니다. 베이스 컬러를 색상 표에서 고른후, 하모니 패턴을 고르면, 조합이 제공되는 아주 간단한 사이트!
| 링크 | https://www.sessions.edu/color-calculator/ |
7. Html Color Codes
심플한 UI! 색상 표 위에 마우스로 간편히 드레그로 베이스 컬러 선택! 색상 조합 패턴을 선택하면, 조합 제공!
| 링크 | https://htmlcolorcodes.com/color-picker/ |
8. Degraeve
온라인 이미지 링크를 부여하면, 이미지를 분석해 이미지에 맞는 색상 조합을 얻을 수 있습니다. 좀 아쉬운 부분이 있다면, 온라인상에 있는 이미지밖에 안된다는거! 다른 특별한 기능은 없는 아주 심플한 사이트.
| 링크 | https://www.degraeve.com/color-palette |
9. Coolors
색상 조합 랜덤 Generator! 웹 디자인 색감을 어떤 계열로 갈지 고민이라면, 한번 써보세요! Spacebar를 누르면 새로 조합해 줍니다. 색깔 조합이 다 좋은데 하나가 맘에 안든다면, 나머지 4가지 색깔에 자물쇠로 잠궈두면, 잠기지 않은 컬러가 랜덤으로 선택됩니다.
| 링크 | https://coolors.co |
10. Cssdrive
이미지를 올리면, 이미지를 분석해 이미지에 맞는 컬러 조합을 헥스 색상 코드로 얻을수있습니다. 조합된 색상 표를 .css 또는 .aco 파일로 다운로드 할 수 있습니다.
| 링크 | http://www.cssdrive.com/imagepalette/index.php |
11. Palette Generator
이미지를 K-mean알고리즘으로 분석해 지배적인 색상들을 파이 그래프로 보여줍니다.
| 링크 | https://palettegenerator.com/ |
12. Material Palette
색상 조합을 본인이 맞춰보고 오른쪽에 선택한 색감의 조합이 실제 어플리케이션에 사용됬을때는 모습을 샘플로 보여줍니다. 백그라운드 색상과 글씨 컬러가 어떻게 보여질지 항상 고민되는데요, 이걸 사용하므로써 한번에 볼수 있어 좋습니다.
| 링크 | https://www.materialpalette.com |
12. Colordot
스크린이 색상표인듯 마우스를 움직이면 컬러가 변하는걸 알수있습니다. 클릭을 하시면 왼쪽 정렬로 하나하나씩 저장됩니다. 마우스로 색상 조합을 하는 그런 시스템입니다.
| 링크 | https://color.hailpixel.com |
좋아하실만한 연관 글
About The Author
비레인쉐어
Knowledge is Power.