온라인 컬러 코드 색상표 - 컬러 피커, 색상 코드 변환기 (HTML HEX, RGB, CMYK 변환 등) > 웹제작/운영

컬러 코드 색상표 변환기

HTML HEX, RGB, CMYK 변환

온라인 페이지에서 바로 색상 코드를 알수 있는 방법을 제공하는 imagecolorpicker.com을 소개한다.

뿐만 아니라 컬러 코드 색상 변환기도 제공하고 있다. 이를 통해서 HTML 컬러 색상을 CMYK나 RGB 색상 코드로 변환하는 등의 기능도 제공한다.

온라인 컬러 코드 색상표 - 컬러 피커, 색상 코드 변환기 (HTML HEX, RGB, CMYK 변환 등)

이미지컬러피커닷컴의 컬러 피커 기능

물론 컬러 색상표를 제공하는 사이트는 많다. 그런데 이 사이트는 직관적으로 사용할만한 두 가지 장점을 가지고 있다.

아래 링크로 들어가면 컬러 피커를 바로 볼 수 있다. (이동한 후 페이지 맨 위로 올라가자)

https://imagecolorpicker.com/color-code/

페이지 가장 위에는 HEX과 HUE 선택기가 있다. 여기서 색상을 선택하면 된다.

그러면 그 아래에 있는 Color-Conversion를 통해서 색상 코드를 확인할 수 있다. HEX코드뿐 아니라 RGB코드, CMYK코드, LAB코드, HSL코드, XYZ코드, LUV코드, HWB코드까지 한 눈에 볼 수 있다. 

그 아래로 내려가면 더욱 좋은 기능이 나온다. 바로 Variations 기능이다. 

여기에서 색상의 톤을 비교해서 선택할 수 있다. 컬러를 클릭하면 코드 복사도 바로 할 수 있다.

고급스러운 디자인 색상은 이런 톤들을 응용할 때 생기니 특히 주의해 보자.

그리고 그 아래에 가면 Color Combinations 기능이 있다.

여기서는 보색대비 색 코드나 유사 색 대비 코드 등의 추천 색상표를 볼 수 있으니 잘 이용해 보면 멋진 디자인을 만들 수 있다. 

이미지컬러피커닷컴의 이미지 픽컬러 기능

이 부분은 같은 사이트의 기능이지만 위의 컬러 피커 코드 색상표보다는 초보에게 더 어울리는 방식이다. 

아래 링크로 가면 초보용 컬러 색상표를 이용할 수 있다.

https://imagecolorpicker.com

화면 위쪽을 보면 하나의 사진이 보이고, 그 위에 마우스를 갖다가 대면 확대 색상을 볼 수 있다.

이때 마우스로 그곳을 클릭하면 아래쪽에 컬러 코드가 표시된다. 

기본으로 HEX와 RGB가 표시된다. 바로 복사해서 디자인에 사용하면 된다. 

홈페이지 제작 등에 사용할 때는 CSS에 코드로 넣으면 된다. 

예를 들어, HEX HTML 색상 코드로 사용할 때는 아래처럼 하고

[code]

<style type="text/css">

   background-color:#f2af68; 

</style>

[/code]

 

또 예를 들어, RGB 컬러 코드로 사용할 때는 아래처럼 하면 되는 것이다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)

[code]

<style type="text/css">

   background-color: rgba( 0, 0, 0, 0.3 );

</style>

[/code]

이때 RGB 색상 코드의 구조는 rgba(색,색,색,투명도)이다. 예를 들어, rgba( 255, 255, 255, 0.6 )라고 쓰면 흰색에 0.6의 투명도를 가진 색을 사용할 수 있는 것이다.