색상코드표 (RGB, html, CMYK)

색상코드표에 대해 알아보겠습니다. 코딩이나 디자인을 하시는 분이라면 색상코드표가 자주 필요할 것입니다. 우리가 사용하는 포토샵이나 일러스트레이트, html 편집기 등에는 색상을 표현하는 다양한 코드가 사용됩니다. 대표적으로는 RGB, HEX, CMYK, Pantone 이 있으며 각 코드에 따라 다양한 용도로 활용할 수 있습니다.

 

그중에서도 HEX코드는 RGB색상을 16진수로 나타내는 방식으로 주로 웹 디자인에 사용되게 되는데요. 대표적인 예로 우리가 블로그를 글을 작성할 때 글씨의 색상을 변경할 때 주로 사용하게 됩니다. 그렇기 때문에 이 색상코드표를 알고 있으면 html 코드상에서 직접 색상을 변경할 수 있게 되는 것입니다.

 

이렇게 색상 코드를 사용할 수 있게 되면 웹 사이트의 버튼이나 H태그와 같은 디자인에 직접적인 도움이 되기 때문에 알아두는 것이 좋습니다.

 

그래서 오늘은 컴퓨터 디자인이나 웹 디자인에 꼭 필요한 색상코드표에 대해 자세히 알아보도록 하겠습니다.

 

색상코드표 (RGB, html, CMYK)

 

색상코드표 (RGB, html, CMYK) 

색상코드표에 대한 자세한 내용은 아래를 확인하시기 바랍니다.

 

색상코드표 종류

RGB (Red, Green, Blue)

 

RGB는 빛의 삼원색인 빨강(Red), 초록(Green), 파랑(Blue)을 조합하여 색상을 나타내는 방식입니다. 각 색상 채널은 0부터 255까지의 숫자로 표현되며, 이를 조합하여 수백만 가지의 색상을 만들 수 있습니다. 예를 들어, (255, 0, 0)은 빨간색, (0, 255, 0)은 녹색, (0, 0, 255)는 파란색을 나타냅니다.

 

HEX (Hexadecimal)

 

HEX 코드는 RGB 색상을 16진수로 나타내는 방식으로 웹 디자인에서 주로 사용됩니다. HEX 코드는 "#" 기호로 시작하며, 0부터 9까지의 숫자와 A부터 F까지의 문자를 사용하여 표현됩니다. 예: #FF0000은 빨간색을 나타냅니다.

 

CMYK (Cyan, Magenta, Yellow, Key/Black)

 

CMYK는 인쇄와 관련된 작업에서 주로 사용되는 색상 모델입니다. CMYK는 청록(Cyan), 마젠타(Magenta), 노랑(Yellow), 검정(Key/Black) 네 가지 색상의 조합으로 색상을 나타냅니다.

 

Pantone

 

Pantone 색상 코드는 색상의 정확한 매치와 일관성을 유지하기 위해 사용되는 전문적인 색상 시스템입니다. 각 색상은 고유한 숫자나 이름으로 식별되며, Pantone 색상 팬과 같은 도구를 사용하여 정확한 색상을 선택할 수 있으니 한번 확인해 보시기 바랍니다.

 

 

대표적인 색상코드표 

 

RGB, HEX, CMYK에 대한 대표적인 색상코드표는 아래의 표를 확인하시기 바랍니다.

 

 

 

색상 코드표

색상	RGB 코드	HEX 코드	CMYK 코드
빨간색	rgb(255, 0, 0)	#FF0000	cmyk(0%, 100%, 100%, 0%)
녹색	rgb(0, 255, 0)	#00FF00	cmyk(100%, 0%, 100%, 0%)
파란색	rgb(0, 0, 255)	#0000FF	cmyk(100%, 100%, 0%, 0%)
노란색	rgb(255, 255, 0)	#FFFF00	cmyk(0%, 0%, 100%, 0%)
자주색	rgb(128, 0, 128)	#800080	cmyk(0%, 100%, 0%, 50%)

 

 

색상코드표 구현 방법

 

다음은 각각의 색상 코드표를 종류별로 HTML로 작성한 예제입니다. 각 예제에서는 해당 색상 코드는 Style 뒤에 들어가야 합니다.

 

 

RGB (Red, Green, Blue):

 

 

HEX (Hexadecimal):

CMYK (Cyan, Magenta, Yellow, Key/Black):

 

Pantone

 

Pantone 색상은 직접 HTML에서 사용할 수 있는 코드가 아니라, 프린트 디자인 및 컬러 매칭을 위한 것이므로 HTML에서 직접 사용되지 않습니다. Pantone 색상을 사용할 때는 그래픽 디자인 소프트웨어에서 Pantone 색상 팬을 참조하고 해당 색상을 선택하는 것이 일반적입니다.

 

색상코드표 찾는 사이트

 

색상코드표를 찾아주는 사이트는 아래 링크를 통해 이동하시기 바랍니다.

 

Color Chart — HTML Color Codes

 

 

홈페이지에 방문하시면 위와 같은 페이지를 볼 수 있습니다. 원하는 색상에 마우스를 가져가면 상단에 HEX, RGB 색상 코드가 검색됩니다. 

 

 

더 자세한 색상을 확인하시려면 하단 FULL CHART를 클릭합니다. 이 페이지에서는 유사한 느낌이지만 농도가 다른 다양한 색상코드표 확인이 가능합니다.

 

오늘은 색상코드표에 대한 다양한 주제를 다루어 보았습니다. 자신이 좋아하는 색상에 대해서는 코드를  외우고 있는 것도 도움이 된다고 생각합니다. 너무 당연한 이야기이지만 색상은 배경과 다른 오브젝트와의 관계를 통해 좋고 나쁘고 가 결정되기 때문에 자주 사용하는 좋은 조합의 색상은 꼭 메모해 두셔서 편리하게 사용하시기 바랍니다.

 

이 블로그의 인기글

 

일본 지도 크게보기 (Japan Travel 지도 이용법)