본문 바로가기
WEB/즐겨찾는 사이트

색 이름을 알려주는 컬러 사이트 - Colblindor, Html Css Color, ColorHexa

by 12th_moon 2020. 9. 26.

 

 

 

 

 

 

 

 

사이트를 만들면서 브랜딩을 같이 하다보니 작업 시작 단계에서 꼭 해야하는 일 중 하나는 바로 컬러 선정.

어떤 컬러를 메인으로 해서 서브는 뭘 넣고, 포인트는 이걸로 하고 글씨는 또 저걸로 하고...

 

이렇게 고심해서 고른 컬러에 대해 설명할 때 색상명이 그럴싸하면

내가 왜 이 콘셉트에 굳이 이 컬러를 골랐는지 종종 설명이 되기도 하고,

남들이 이 색상을 보지 않고 이름만 들었을 때에도 어떤 색인지 대충 유추할 수 있게 된다.

 

한복을 할 때에는 때때로 담황색이나 북청색 등의 고풍스런 느낌 팍팍 나는 단어를 사용하곤 했는데

웹사이트를 만들고 마지막에 ppt작업을 하다보니 좀 더 글로벌한 단어의 필요성을 느꼈다.

 

그래서 찾은 색상명을 알려주는 사이트 세 곳~

 

 

 

 

 

www.color-blindness.com/color-name-hue/

 

 

 

먼저 <Colblindor>

 

왼쪽 색상표에서 마우스로 클릭하거나, 오른쪽에 직접 숫자 or 코드를 입력하면

내가 입력한 색상의 색상명과 이 색상이 어느 색조에 속하는지를 알려준다.

 

 

 

 

 

 

지금 사용하고 있는 컬러인 #e62851을 한번 입력해보니

색상명은 Amaranth이고 Red계열이라 알려준다.

 

(Amaranth라는 이름은 생소해서 찾아보니 찾아보니 남아메리가 원산지의 한해살이 풀이란다.

설명이 부족해 사진을 봤더니 꽃이 딱 이 색과, 조금 더 보랏빛을 넘나든다.)

 

단순하게 색상명만 알고자 할 때에 이용하기엔 간단하니 좋긴 한데

그 이외의 정보까지 얻기엔 아무래도 다른 사이트에 비해서는 조금 아쉬운 편이랄까.

 

 

 

 

 

 

그래서 찾아본 다른 사이트는 <ColorHexa>

 

 

https://www.colorhexa.com/

 

 

 

 

 

 

 

 

사용법은 Colblindor와 매한가지~

+버튼을 눌러 색을 클릭해 고르거나, 검색창에 코드를 입력하면 되는데

이번에도 마찬가지로 한번 #e62851을 검색해봤다.

 

 

 

 

 

 

 

 

ColorHexa에서는 내가 검색한 색이 어떤 색깔들의 조합, 비율로 이루어져 있는지,

web safe color인지, 안전색이 아니라면 아니면 가장 가까운 색상 중 안전색은 어떤 색인지 등등...

내가 검색한 색에 대해 조금 더 상세한 정보가 나오는데

 

 

 

 

 

 

 

 

또 그 밑으로는 내가 고른 색과의 배색, 대체색, border나 background로는 어떤지 이 색의 shades등

진짜 어마어마하게 방대한 정보를 제공해준다.

 

어떤 색상은 그냥 스와치로 볼 땐 예뻤어도 실제로 적용해보면

내가 생각했던 느낌이 아닐 때가 종종 있기 때문인지

특히나 이 결과들 중에서 글자색, 테두리 색, 바탕색을 미리보여주는 정보가 꽤 유용하다.

웹에 적용하려는 이들이라면 배색과 더불어 이 정보가 가장 중요할듯!

 

 

 

 

 

 

https://www.htmlcsscolor.com/

 

 

 

 

그리고 마지막으로 ColorHex와 비슷한 정보량을 자랑하는 HtmlCssColor!

이 역시 동일한 방법으로 상단의 검색창에서 검색을 해본다.

 

 

 

 

 

 

 

 

포함하고 있는 내용 또한 두번째 사이트와 상당히 유사하다.

 

색상명, 쉐이드, 배경색이나 보더로 쓰였을 때, 복사해서 약간만 수정해서 쓰면 되는 코드 등등.

굳이 비슷한 기능의 사이트를 왜 또 즐겨찾기에 추가했냐 하면

가끔씩 같은 코드로 다른 색상명이 검색되기도 하기 때문에 일단 두개 다 추가해놓고 봤다.

 

여기에 두가지 특징이 또 있는데,

우선 첫번째.

 

위의 사진처럼 코드를 검색하면 해당 코드의 색상으로 배경색이 싹~ 바뀌는데

사이트를 꾸미면서 배경색을 쓸 일이 많을 때 이 기능이 은근 유용하다!

 

예를들어 두번째 사이트를 만들면서 사용했던 컬러인 #000113

조그만 스와치로만 봤을 땐 완전 검정인 #000000 큰 차이가 없어 보이는데

이 색을 크게 놓고보면 #000과 은근 차이가 난달까.

 

 

   
#000000 #000113

 

생각보다 차이가 큰 두 컬러. 게다가 모니터에 따라서는 더 큰 차이가 나는데

이 사이트에서 검색을 하다보면 이런 부분을 캐치하기가 쉽다.

 

 

 

 

 

 

그리고 마지막으로 랜덤할 컬러도 뽑아준다는 것!

 

아직까진 여기에 얻어 걸렸던 적은 없지만

"이거다!"싶은 컬러가 없을 땐 이런 랜덤이 도움이 될 때도 있으니까⭐️

조만간 또 이용하게 될텐데 그때 한번 이 랜덤을 사용해봐야겠다.

 

 

 

 

 

 

 

 

 

 

 

댓글