색상 코드: 두 판 사이의 차이

 
(사용자 13명의 중간 판 30개는 보이지 않습니다)
1번째 줄: 1번째 줄:
== 개요 ==
'''색상 코드'''(Color code)는 개체의 [[색깔]]을 표기하기 위해 만들어진 디지털 코드다. [[컴퓨터 프로그래밍]] 및 [[HTML]] 등에서 사용되며, 표기하는 방식에는 크게 세 가지가 있다. 인쇄물에는 [[CMYK]]나 [[팬톤]]을 사용한다.
 
색상 코드란 개체의 색상을 표기하기 위해 만들어진 코드이다. 표기하는 방식에는 크게 세 가지가 있다.


== 기본 : RGB 색상 코드 ==
== 기본 : RGB 색상 코드 ==
 
빨강(Red), 초록(Green), 파랑(Blue)의 3색, 즉 빛의 3원색을 서로 더하는(+) 방식으로 섞어서 색상을 표기하는 방식을 [[RGB]] 가산혼합<ref>색이 진하게 섞이면 섞일수록 하얀색에 가까워진다.</ref>이라고 한다. 이러한 방식으로 색상 코드를 표기할 때는
빨강(Red), 초록(Green), 파랑(Blue)의 3색, 즉 빛의 3원색을 서로 더하는(+) 방식으로 섞어서 색상을 표기하는 방식을 [[RGB 가산혼합]]<ref>색이 진하게 섞이면 섞일 수록 하얀색에 가까워진다.</ref>이라고 한다. 이러한 방식으로 색상 코드를 표기할 때는
다음과 같은 표기 방식을 사용한다.
다음과 같은 표기 방식을 사용한다.


[[파일:색상코드 01.png | 400 px]]
{|style="text-align:center;"
! !!colspan=2 style="text-align:left;"|{{색|#FF0000|빨간색의 정도(00~FF)}}!!colspan=2 style="text-align:right;"|{{색|#0000FF|파란색의 정도(00~FF)}}
|-
|<big><big><big><big><big><big>{{색|#33759f|#}}</big></big></big></big></big></big>||<big><big><big><big><big><big>{{색|#FF0000|33}}</big></big></big></big></big></big>||colspan=2|<big><big><big><big><big><big>{{색|#00FF00|75}}</big></big></big></big></big></big>||<big><big><big><big><big><big>{{색|#0000FF|9F}}</big></big></big></big></big></big>
|-
! !!colspan=4 style="text-align:center;"|{{색|#00FF00|초록색의 정도(00~FF)}}
|}


'#'문자 뒤에 [[16진수]]세 번 나열하여 첫 번째 구간에는 {{색상|#FF0000|빨강}}, 두 번째 구간에는 {{색상|#00FF00|초록}}, 세 번째 구간에는 {{색상|#0000FF|파랑}}의 정도를 표기한다. 그 범위는 00~FF이며, 숫자가 커질 수록(알파벳이 진행될 수록) 더욱 밝아진다.
'#'문자 뒤에 [[16진수]] 두 자리를 세 번 나열하여 첫 번째 구간에는 {{|#FF0000|빨강}}, 두 번째 구간에는 {{|#00FF00|초록}}, 세 번째 구간에는 {{|#0000FF|파랑}}의 정도를 표기한다. 그 범위는 00~FF이며, 숫자가 커질수록(알파벳이 진행될수록) 더욱 밝아진다.


따라서 #000000은 검정색, #FFFFFF는 하얀색이다.
따라서 #000000은 검은색, #FFFFFF는 하얀색이다.
 
{|class="wikitable" style="text-align:center;"
빨강의 밝기 비교
|-
 
|빨강의 밝기 비교||{{|#000000|#000000}}, {{|#450000|#450000}}, {{|#770000|#770000}}, {{|#9B0000|#9B0000}}, {{|#FF0000|#FF0000}}
{{색상|#000000|#000000}}, {{색상|#450000|#450000}}, {{색상|#770000|#770000}}, {{색상|#9B0000|#9B0000}}, {{색상|#FF0000|#FF0000}}
|-
 
|초록의 밝기 비교||{{|#000000|#000000}}, {{|#004500|#004500}}, {{|#007700|#007700}}, {{|#009B00|#009B00}}, {{|#00FF00|#00FF00}}
초록의 밝기 비교
|-
 
|파랑의 밝기 비교||{{|#000000|#000000}}, {{|#000045|#000045}}, {{|#000077|#000077}}, {{|#00009B|#00009B}}, {{|#0000FF|#0000FF}}
{{색상|#000000|#000000}}, {{색상|#004500|#004500}}, {{색상|#007700|#007700}}, {{색상|#009B00|#009B00}}, {{색상|#00FF00|#00FF00}}
|}
 
위 예시를 볼 때, 숫자가 45까지 진행되어도 자세히 보지 않으면 구분이 어려울 정도로 거의 검은색에 가까운 명도를 보인다는 것을 알 수 있을 것이다.
파랑의 밝기 비교
 
{{색상|#000000|#000000}}, {{색상|#000045|#000045}}, {{색상|#000077|#000077}}, {{색상|#00009B|#00009B}}, {{색상|#0000FF|#0000FF}}
 
위 예시를 볼 때, 숫자가 45까지 진행되어도 자세히 보지 않으면 구분이 어려울 정도로 거의 검정색에 가까운 명도를 보인다는 것을 알 수 있을 것이다.
<ref>표기되는 환경에 따라 다소 차이가 있다.</ref>  
<ref>표기되는 환경에 따라 다소 차이가 있다.</ref>  


2자리의 [[16진수]]가 표현할 수 있는 범위가 0~255이므로, 위와 같은 방법을 사용한 색상 코드로는 총 16,777,216가지의 색을 표현할 수 있다.  
2자리의 [[16진수]]가 표현할 수 있는 범위가 0~255이므로, 위와 같은 방법을 사용한 색상 코드로는 총 16,777,216가지(16<sup>6</sup>=2<sup>24</sup>)의 색을 표현할 수 있다.


== 색상 코드표 ==
== 색상 코드표 ==


각 색상에는 따로 정해진 이름이 있는데, [[색상 이름]] 항목에서 자세히 다루도록 한다. 편의를 위해  [[X11|X11 표준]], [[HTML|HTML 4.01]]을 함께 나열하였다.
각 색상에는 따로 정해진 이름이 있는데, [[색상 이름]] 항목에서 자세히 다루도록 한다. 편의를 위해  [[X11|X11 표준]], [[HTML|HTML 4.01]]을 함께 나열하였다.<ref>모바일에서 원활하게 표기가 되지 않아 X11 표준을 먼저, HTML 4.01을 나중에 나열하였다.</ref>
여기서는 초록의 정도가 가장 강한 색을 lime(#00FF00)이라 표기한다. green은 #000800.
여기서는 초록의 정도가 가장 강한 색을 lime(#00FF00)이라 표기한다. green은 #008000.


{|width="100%"
|width="50%"|
{|class="wikitable"  
{|class="wikitable"  
|+X11 표준
|+X11 표준
293번째 줄: 289번째 줄:
| style="background:#f5f5f5; color:#000000" | #F5F5F5  
| style="background:#f5f5f5; color:#000000" | #F5F5F5  
| darkslategray
| darkslategray
| style="background:#2f4f4f; color:#ffffff" | #2f4f4f
| style="background:#2f4f4f; color:#ffffff" | #2F4F4F
|-
|-


433번째 줄: 429번째 줄:


|}
|}
|width="50%"|
 
{|class="wikitable" align="center"
{|class="wikitable" align="center"
|+HTML 4.01
|+HTML 4.01
491번째 줄: 487번째 줄:
|   
|   
|-
|-
|}


|}
|}


== 웹 안전 색상 ==
== 웹 안전 색상 ==
웹 안전 색상이란 호환성을 위해, 즉 '여기서는 구분되던 색상이 저기서는 구분되지 않는 경우'를 피하기 위해 위의 색의 가짓수를 대폭 요약해서 표준으로 설정한 색을 말한다. 각 색에서 256가지 단계를 다 세는 것이 아닌, 255를 5로 나눈 숫자인 51을 기준으로 0에서부터 뛰어세기하여 0, 51, 102, 153, 204, 255의 여섯 번만을 세는 방식이다.


웹 안전 색상이란 호환성을 위해, 즉 '여기서는 구분되던 색상이 저기서는 구분되지 않는 경우'를 피하기 위해 위의 색의 가짓수를 대폭 요약해서 표준으로 설정한 색을 말한다.
웹 안전 색상은 모두 216가지<ref>각 색상당 여섯 번을 세게 되므로 6x6x6=216이다.</ref>이며 그 중 '가장 안전한 색상' 22가지가 존재한다.
각 색에서 256가지 단계를 다 세는 것이 아닌, 255를 5로 나눈 숫자인 51을 기준으로 0에서부터 뛰어세기하여 0, 51, 102, 153, 204, 255의 여섯 번만을 세는 방식이다.
 
웹 안전 색상은 모두 216가지<ref>각 색상당 여섯 번을 세게 되므로 6x6x6=216이다.</ref>이며 그 중 '가장 안전한 색상' 22가지가 존재한다.  
 


== 그 외 ==
== 그 외 ==
[[ASS코드|ASS파일에서 쓰이는 색상코드]]가 따로 있으며, [[CMYK]]라는 미술 시간에 배우던 감산혼합 방식도 있다.


[[ASS코드|ASS파일에서 쓰이는 색상코드]]가 따로 있다. 관련 항목 참조.
=== 쉘, 커맨드 ===
 
쉘, 명령 프롬프트에도 색상 지정이 가능하다.
 
 
 


== 외부 참조 ==
* <small>'''(한국어)'''</small> [http://html-color-codes.info/Korean/ HTML 컬러 코드] (색상표 제공)


----
{{각주}}
<references/>
{{틀:색 둘러보기}}
[[분류:인터넷]]
[[분류:색]]
[[분류:식별자]]
[[분류:컴퓨터 프로그래밍]]

2022년 4월 22일 (금) 16:59 기준 최신판

색상 코드(Color code)는 개체의 색깔을 표기하기 위해 만들어진 디지털 코드다. 컴퓨터 프로그래밍HTML 등에서 사용되며, 표기하는 방식에는 크게 세 가지가 있다. 인쇄물에는 CMYK팬톤을 사용한다.

기본 : RGB 색상 코드[편집 | 원본 편집]

빨강(Red), 초록(Green), 파랑(Blue)의 3색, 즉 빛의 3원색을 서로 더하는(+) 방식으로 섞어서 색상을 표기하는 방식을 RGB 가산혼합[1]이라고 한다. 이러한 방식으로 색상 코드를 표기할 때는 다음과 같은 표기 방식을 사용한다.

빨간색의 정도(00~FF) 파란색의 정도(00~FF)
# 33 75 9F
초록색의 정도(00~FF)

'#'문자 뒤에 16진수 두 자리를 세 번 나열하여 첫 번째 구간에는 빨강, 두 번째 구간에는 초록, 세 번째 구간에는 파랑의 정도를 표기한다. 그 범위는 00~FF이며, 숫자가 커질수록(알파벳이 진행될수록) 더욱 밝아진다.

따라서 #000000은 검은색, #FFFFFF는 하얀색이다.

빨강의 밝기 비교 #000000, #450000, #770000, #9B0000, #FF0000
초록의 밝기 비교 #000000, #004500, #007700, #009B00, #00FF00
파랑의 밝기 비교 #000000, #000045, #000077, #00009B, #0000FF

위 예시를 볼 때, 숫자가 45까지 진행되어도 자세히 보지 않으면 구분이 어려울 정도로 거의 검은색에 가까운 명도를 보인다는 것을 알 수 있을 것이다. [2]

2자리의 16진수가 표현할 수 있는 범위가 0~255이므로, 위와 같은 방법을 사용한 색상 코드로는 총 16,777,216가지(166=224)의 색을 표현할 수 있다.

색상 코드표[편집 | 원본 편집]

각 색상에는 따로 정해진 이름이 있는데, 색상 이름 항목에서 자세히 다루도록 한다. 편의를 위해 X11 표준, HTML 4.01을 함께 나열하였다.[3] 여기서는 초록의 정도가 가장 강한 색을 lime(#00FF00)이라 표기한다. green은 #008000.

X11 표준
이름 색상
코드
이름 색상
코드
이름 색상
코드
red #FF0000 lime #00FF00 blue #0000FF
indianred #CD5C5C aquamarine #7FFFD4 cyan(=aqua) #00FFFF
darksalmon #E9967A mediumspringgreen #00FA9A aqua(=cyan) #00FFFF
lightcoral #F08080 springgreen #00FF7F mediumturquoise #48D1CC
salmon #FA8072 palegreen #98FB98 darkturquoise #00CED1
orangered #FF4500 greenyellow #ADFF2F cadetblue #5F9EA0
crimson #DC143C chartreuse #7FFF00 slategray #708090
firebrick #B22222 lawngreen #7CFC00 lightcyan #E0FFFF
darkred #8B0000 green #008000 paleturquoise #AFEEEE
mediumvioletred #C71585 lightgreen #90EE90 powderblue #B0E0E6
pink #FFC0CB yellowgreen #9ACD32 lightsteelblue #B0C4DE
lightpink #FFB6C1 limegreen #32CD32 steelblue #4682B4
hotpink #FF69B4 mediumseagreen #3CB371 lightblue #ADD8E6
deeppink #FF1493 darkseagreen #8FBC8F skyblue #87CEEB
paleviolentred #DB7093 forestgreen #228B22 lightskyblue #87CEFA
darkkhaki #BDB76B seagreen #2E8B57 deepskyblue #00BFFF
khaki #F0E68C olivedrab #6B8E23 cornflowerblue #6495ED
palegoldenrod #EEE8AA olive #808000 royalblue #4169E1
lightgoldenrodyellow #FAFAD2 darkolivegreen #556B2F mediumslateblue #7B68EE
lightyellow #FFFFE0 darkgreen #006400 dodgerblue #1E90FF
lemonchiffon #FFFACD mediumaquamarine #66CDAA mediumblue #0000CD
yellow #FFFF00 turquoise #40E0D0 darkblue #00008B
gold #FFD700 lightseagreen #20B2AA navy #000080
papayawhip #FFEFD5 darkcyan #008B8B midnightblue #191970
moccasin #FFE4B5 teal #008080 gainsboro #DCDCDC
peachpuff #FFDAB9 honeydew #F0FFF0 lightgrey #D3D3D3
lightsalmon #FFA07A mintcream #F5FFFA silver #C0C0C0
orange #FFA500 azure #F0FFFF darkgray #A9A9A9
darkorange #FF8C00 aliceblue #F0F8FF gray(grey) #808080
coral #FF7F50 ghostwhite #F8F8FF dimgray #696969
tomato #FF6347 whitesmoke #F5F5F5 darkslategray #2F4F4F
orangered #FF4500 lavenderblush #FFF0F5 lightslategray #778899
lavender #E6E6FA mistyrose #FFE4E1 peru #CD853F
thistle #D8BFD8 antiquewhite #FAEBD7 chocolate #D2691E
plum #DDA0DD seashell #FFF5EE maroon #800000
violet #EE82EE snow #FFFAFA saddlebrown #8B4513
fuchsia(=magenta) #FF00FF beige #F5F5DC brown #A52A2A
magenta(=fuchsia) #FF00FF linen #FAF0E6 sienna #A0522D
orchid #DA70D6 oldlace #FDF5E6 darkred #8B0000
cornsilk #FFF8DC floralwhite #FFFAF0 burlywood #DEB887
blanchedalmond #FFEBCD ivory #FFFFF0 tan #D2B48C
bisque #FFE4E4 mediumorchid #BA55D3 rosybrown #BC8F8F
navajowhite #FFDEAD darkorchid #9932CC mediumpurple #9370DB
blueviolet #8A2BE2 darkviolet #9400D3 darkmagenta #8B008B
slateblue #6A5ACD purple #800080 wheat #F5DEB3
darkslateblue #483D8B indigo #4B0082 darkgoldenrod #B8860B
sandybrown #F4A460 goldenrod #DAA520
black #000000 white #FFFFFF
HTML 4.01
이름 색상 코드 이름 색상 코드 이름 색상 코드
red #FF0000 lime #00FF00 blue #0000FF
white #FFFFFF black #000000 gray(grey) #808080
teal #008080 green #008000 aqua #00FFFF
silver #C0C0C0 maroon #800000 purple #800080
olive #808000 navy #000080 fuchsia #FF00FF
yellow #FFFF00

웹 안전 색상[편집 | 원본 편집]

웹 안전 색상이란 호환성을 위해, 즉 '여기서는 구분되던 색상이 저기서는 구분되지 않는 경우'를 피하기 위해 위의 색의 가짓수를 대폭 요약해서 표준으로 설정한 색을 말한다. 각 색에서 256가지 단계를 다 세는 것이 아닌, 255를 5로 나눈 숫자인 51을 기준으로 0에서부터 뛰어세기하여 0, 51, 102, 153, 204, 255의 여섯 번만을 세는 방식이다.

웹 안전 색상은 모두 216가지[4]이며 그 중 '가장 안전한 색상' 22가지가 존재한다.

그 외[편집 | 원본 편집]

ASS파일에서 쓰이는 색상코드가 따로 있으며, CMYK라는 미술 시간에 배우던 감산혼합 방식도 있다.

쉘, 커맨드[편집 | 원본 편집]

쉘, 명령 프롬프트에도 색상 지정이 가능하다.

외부 참조[편집 | 원본 편집]

각주

  1. 색이 진하게 섞이면 섞일수록 하얀색에 가까워진다.
  2. 표기되는 환경에 따라 다소 차이가 있다.
  3. 모바일에서 원활하게 표기가 되지 않아 X11 표준을 먼저, HTML 4.01을 나중에 나열하였다.
  4. 각 색상당 여섯 번을 세게 되므로 6x6x6=216이다.