"색상표"의 두 판 사이의 차이
DB CAFE
(새 문서: == 웹 안전 색상 == {{색 깊이}} * 호환성을 위해 16,777,216가지나 되는 색의 가짓수를 대폭 줄여서 표준으로 설정한 색을 말한다. 웹 안전 색상...) |
(→웹 안전 색상) |
||
1번째 줄: | 1번째 줄: | ||
+ | {{HTML}} | ||
+ | {{색}} | ||
+ | [[월드 와이드 웹|웹 사이트]]를 만들 때, 여러 방법으로 [[색]]을 지정할 수 있다. | ||
+ | |||
+ | == 십육진법 표기 == | ||
+ | 웹에서 십육진수쌍으로 [[색]]을 표현하는 방법은 [[RGB 가산혼합]]에 의한 것이다. 적(red), 녹(green), 청(blue)에 해당하는 두 자리 [[십육진법|십육진수]] 세 쌍으로 색깔을 나타낼 수 있다. 한 채널에 1[[바이트]]가 할당되므로 모두 3바이트의 정보로 색을 표현한다. 웹에서 색을 지정할 때에는 특수기호 <code>#</code>과 3쌍의 두자리 십육진수를 연속하여 사용한다. | ||
+ | |||
+ | ; 표기형식 | ||
+ | {|class="wikitable" width="35%" | ||
+ | !nowrap|특수기호 | ||
+ | !nowrap|Red 채널 | ||
+ | !nowrap|Green 채널 | ||
+ | !nowrap|Blue 채널 | ||
+ | |- | ||
+ | |style="text-align:center;" lang=en|<code>#</code> | ||
+ | |style="text-align:center;" lang=en|00~FF | ||
+ | |style="text-align:center;" lang=en|00~FF | ||
+ | |style="text-align:center;" lang=en|00~FF | ||
+ | |} | ||
+ | |||
+ | ; 표기 예 | ||
+ | {|class="wikitable" width="30%" | ||
+ | !표기 | ||
+ | !색상 | ||
+ | |- | ||
+ | | style="text-align:center; font-family:monospace;" lang=en|#000000 | ||
+ | | style="background:#000000;"| | ||
+ | |- | ||
+ | | style="text-align:center; font-family:monospace;" lang=en|#ff0000 | ||
+ | | style="background:#FF0000;"| | ||
+ | |- | ||
+ | | style="text-align:center; font-family:monospace;" lang=en|#00ff00 | ||
+ | | style="background:#00FF00;"| | ||
+ | |- | ||
+ | | style="text-align:center; font-family:monospace;" lang=en|#0000ff | ||
+ | | style="background:#0000FF;"| | ||
+ | |} | ||
+ | |||
+ | ; 표현 범위 | ||
+ | : 두자리의 십육진수가 표현할 수 있는 범위는 00부터 FF까지(십진수 0에서 255까지)이다. ([[십육진법]] 참조) 즉, 하나의 채널은 256 가지의 색을 표현할 수 있다. | ||
+ | : 웹 색상의 십육진법 표기는 각 채널 당 256개의 색을 표현하므로 3채널 모두를 사용하여 나타낼 수 있는 색상은 16,777,216가지(256<sup>3</sup>)가 된다. | ||
+ | |||
+ | ; 이름 참조 | ||
+ | : 십육진법에 의한 웹 색상표기 중에서 자주 쓰이는 것은 특별히 이름을 붙여 두었다. 아래의 설명과 같이 이름이 있는 색은 십육진법에 의한 표현 대신 이름으로 표현할 수 있다. | ||
+ | |||
== 웹 안전 색상 == | == 웹 안전 색상 == | ||
{{색 깊이}} | {{색 깊이}} | ||
259번째 줄: | 304번째 줄: | ||
| style="background: #FFF;" | <u>*FFF*</u> | | style="background: #FFF;" | <u>*FFF*</u> | ||
|}</div> | |}</div> | ||
+ | |||
+ | == HTML 색 이름 == | ||
+ | |||
+ | [[HTML]] 4.01 표준에는 16가지 색깔 이름이 정의되어 있다. | ||
+ | |||
+ | {| class="wikitable" | ||
+ | !색상 | ||
+ | !16진수 | ||
+ | !색상 | ||
+ | !16진수 | ||
+ | !색상 | ||
+ | !16진수 | ||
+ | !색상 | ||
+ | !16진수 | ||
+ | |- | ||
+ | |[[검정|black]] (검정) | ||
+ | |style="background:#000000; color:#ffffff; font-family:monospace;" lang=en|#000000 | ||
+ | |[[은색|silver]] (은색) | ||
+ | |style="background:#c0c0c0; color:#000000; font-family:monospace;" lang=en|#c0c0c0 | ||
+ | |[[밤색|maroon]] (밤색) | ||
+ | |style="background:#800000; color:#ffffff; font-family:monospace;" lang=en|#800000 | ||
+ | |[[빨강|red]] (빨강) | ||
+ | |style="background:#ff0000; color:#ffffff; font-family:monospace;" lang=en|#ff0000 | ||
+ | |- | ||
+ | |[[네이비|navy]] (남색) | ||
+ | |style="background:#000080; color:#ffffff; font-family:monospace;" lang=en|#000080 | ||
+ | |[[파랑|blue]] (파랑) | ||
+ | |style="background:#0000ff; color:#ffffff; font-family:monospace;" lang=en|#0000ff | ||
+ | |[[보라|purple]] (보라) | ||
+ | |style="background:#800080; color:#ffffff; font-family:monospace;" lang=en|#800080 | ||
+ | |[[밝은 자주|fuchsia]] (밝은 자주) | ||
+ | |style="background:#ff77ff; color:#000000; font-family:monospace;" lang=en|#ff00ff | ||
+ | |- | ||
+ | |[[초록|green]] (초록) | ||
+ | |style="background:#008000; color:#ffffff; font-family:monospace;" lang=en|#008000 | ||
+ | |[[라임색|lime]] (라임) | ||
+ | |style="background:#00ff00; color:#000000; font-family:monospace;" lang=en|#00ff00 | ||
+ | |[[올리브색|olive]] (올리브색) | ||
+ | |style="background:#808000; color:#ffffff; font-family:monospace;" lang=en|#808000 | ||
+ | |[[노랑|yellow]] (노랑) | ||
+ | |style="background:#ffff00; color:#000000; font-family:monospace;" lang=en|#ffff00 | ||
+ | |- | ||
+ | |[[틸|teal]] (틸) | ||
+ | |style="background:#008080; color:#ffffff; font-family:monospace;" lang=en|#008080 | ||
+ | |[[물색|aqua]] (물색) | ||
+ | |style="background:#00ffff; color:#000000; font-family:monospace;" lang=en|#00ffff | ||
+ | |[[회색|gray]] (회색) | ||
+ | |style="background:#808080; color:#ffffff; font-family:monospace;" lang=en|#808080 | ||
+ | |[[하양|white]] (하양) | ||
+ | |style="background:#ffffff; color:#000000; font-family:monospace;" lang=en|#ffffff | ||
+ | |} | ||
+ | |||
+ | == X11 색 이름 == | ||
+ | {{본문|X11 색 이름}} | ||
+ | [[넷스케이프 네비게이터|넷스케이프]]나 [[인터넷 익스플로러]] 같은 브라우저에는 별도로 여러 색상들이 정의되었으며, 특정한 브라우저에서는 이런 색상을 인식하지 못할 수도 있다. 이들 색상 중 다수가 [[X 윈도 시스템]]에서 분류된 X11 색 이름에서 가져온 것이다. CSS를 지원하는 대부분의 HTML 사용자 에이전트가 이 색상들을 지원한다. | ||
+ | |||
+ | 아래는 X11 색 이름과 각각에 해당하는 16진수 코드의 목록이다. | ||
+ | |||
+ | {| class="wikitable" | ||
+ | |- | ||
+ | !색상 | ||
+ | !16진수 | ||
+ | !색상 | ||
+ | !16진수 | ||
+ | |- | ||
+ | |indianred | ||
+ | |style="background:#cd5c5c; color:#ffffff; font-family:monospace;" lang=en|#cd5c5c | ||
+ | |darksalmon | ||
+ | |style="background:#e9967a; color:#ffffff; font-family:monospace;" lang=en|#e9967a | ||
+ | |- | ||
+ | |lightcoral | ||
+ | |style="background:#f08080; color:#ffffff; font-family:monospace;" lang=en|#f08080 | ||
+ | |salmon | ||
+ | |style="background:#fa8072; color:#ffffff; font-family:monospace;" lang=en|#fa8072 | ||
+ | |- | ||
+ | |orangered | ||
+ | |style="background:#ff4500; color:#ffffff; font-family:monospace;" lang=en|#ff4500 | ||
+ | |[[빨강|red]] | ||
+ | |style="background:#ff0000; color:#ffffff; font-family:monospace;" lang=en|#ff0000 | ||
+ | |- | ||
+ | |crimson | ||
+ | |style="background:#dc143c; color:#ffffff; font-family:monospace;" lang=en|#dc143c | ||
+ | |firebrick | ||
+ | |style="background:#b22222; color:#ffffff; font-family:monospace;" lang=en|#b22222 | ||
+ | |- | ||
+ | |darkred | ||
+ | |style="background:#8b0000; color:#ffffff; font-family:monospace;" lang=en|#8b0000 | ||
+ | |mediumvioletred | ||
+ | |style="background:#c71585; color:#ffffff; font-family:monospace;" lang=en|#c71585 | ||
+ | |- | ||
+ | |pink | ||
+ | |style="background:#ffc0cb; font-family:monospace;" lang=en|#ffc0cb | ||
+ | |lightpink | ||
+ | |style="background:#ffb6c1; font-family:monospace;" lang=en|#ffb6c1 | ||
+ | |- | ||
+ | |hotpink | ||
+ | |style="background:#ff69b4; font-family:monospace;" lang=en|#ff69b4 | ||
+ | |deeppink | ||
+ | |style="background:#ff1493; font-family:monospace;" lang=en|#ff1493 | ||
+ | |- | ||
+ | |palevioletred | ||
+ | |style="background:#db7093; font-family:monospace;" lang=en|#db7093 | ||
+ | |darkkhaki | ||
+ | |style="background:#bdb76b; font-family:monospace;" lang=en|#bdb76b | ||
+ | |- | ||
+ | |khaki | ||
+ | |style="background:#f0e68c; font-family:monospace;" lang=en|#f0e68c | ||
+ | |palegoldenrod | ||
+ | |style="background:#eee8aa; font-family:monospace;" lang=en|#eee8aa | ||
+ | |- | ||
+ | |lightgoldenrodyellow | ||
+ | |style="background:#fafad2; font-family:monospace;" lang=en|#fafad2 | ||
+ | |lightyellow | ||
+ | |style="background:#ffffe0; font-family:monospace;" lang=en|#ffffe0 | ||
+ | |- | ||
+ | |lemonchiffon | ||
+ | |style="background:#fffacd; font-family:monospace;" lang=en|#fffacd | ||
+ | |[[노랑|yellow]] | ||
+ | |style="background:#ffff00; font-family:monospace;" lang=en|#ffff00 | ||
+ | |- | ||
+ | |[[금색|gold]] | ||
+ | |style="background:#ffd700; font-family:monospace;" lang=en|#ffd700 | ||
+ | |papayawhip | ||
+ | |style="background:#ffefd5; font-family:monospace;" lang=en|#ffefd5 | ||
+ | |- | ||
+ | |moccasin | ||
+ | |style="background:#ffe4b5; font-family:monospace;" lang=en|#ffe4b5 | ||
+ | |peachpuff | ||
+ | |style="background:#ffdab9; font-family:monospace;" lang=en|#ffdab9 | ||
+ | |- | ||
+ | |cyan | ||
+ | |style="background:#00ffff; font-family:monospace;" lang=en|#00ffff | ||
+ | |aqua | ||
+ | |style="background:#00ffff; font-family:monospace;" lang=en|#00ffff | ||
+ | |- | ||
+ | |aquamarine | ||
+ | |style="background:#7fffd4; font-family:monospace;" lang=en|#7fffd4 | ||
+ | |turquoise | ||
+ | |style="background:#40e0d0; font-family:monospace;" lang=en|#40e0d0 | ||
+ | |- | ||
+ | |mediumturquoise | ||
+ | |style="background:#48d1cc; font-family:monospace;" lang=en|#48d1cc | ||
+ | |darkturquoise | ||
+ | |style="background:#00ced1; font-family:monospace;" lang=en|#00ced1 | ||
+ | |- | ||
+ | |cadetblue | ||
+ | |style="background:#5f9ea0; color:#ffffff; font-family:monospace;" lang=en|#5f9ea0 | ||
+ | |slategray | ||
+ | |style="background:#708090; color:#ffffff; font-family:monospace;" lang=en|#708090 | ||
+ | |- | ||
+ | |lightcyan | ||
+ | |style="background:#e0ffff; font-family:monospace;" lang=en|#e0ffff | ||
+ | |paleturquoise | ||
+ | |style="background:#afeeee; font-family:monospace;" lang=en|#afeeee | ||
+ | |- | ||
+ | |powderblue | ||
+ | |style="background:#b0e0e6; font-family:monospace;" lang=en|#b0e0e6 | ||
+ | |lightsteelblue | ||
+ | |style="background:#b0c4de; font-family:monospace;" lang=en|#b0c4de | ||
+ | |- | ||
+ | |steelblue | ||
+ | |style="background:#4682b4; color:#ffffff; font-family:monospace;" lang=en|#4682b4 | ||
+ | |lightblue | ||
+ | |style="background:#add8e6; font-family:monospace;" lang=en|#add8e6 | ||
+ | |- | ||
+ | |skyblue | ||
+ | |style="background:#87ceeb; font-family:monospace;" lang=en|#87ceeb | ||
+ | |lightskyblue | ||
+ | |style="background:#87cefa; font-family:monospace;" lang=en|#87cefa | ||
+ | |- | ||
+ | |deepskyblue | ||
+ | |style="background:#00bfff; font-family:monospace;" lang=en|#00bfff | ||
+ | |cornflowerblue | ||
+ | |style="background:#6495ed; font-family:monospace;" lang=en|#6495ed | ||
+ | |- | ||
+ | |royalblue | ||
+ | |style="background:#4169e1; font-family:monospace;" lang=en|#4169e1 | ||
+ | |mediumslateblue | ||
+ | |style="background:#7b68ee; font-family:monospace;" lang=en|#7b68ee | ||
+ | |- | ||
+ | |dodgerblue | ||
+ | |style="background:#1e90ff; font-family:monospace;" lang=en|#1e90ff | ||
+ | |blue | ||
+ | |style="background:#0000ff; color:#ffffff; font-family:monospace;" lang=en|#0000ff | ||
+ | |- | ||
+ | |mediumblue | ||
+ | |style="background:#0000cd; color:#ffffff; font-family:monospace;" lang=en|#0000cd | ||
+ | |darkblue | ||
+ | |style="background:#00008b; color:#ffffff; font-family:monospace;" lang=en|#00008b | ||
+ | |- | ||
+ | |navy | ||
+ | |style="background:#000080; color:#ffffff; font-family:monospace;" lang=en|#000080 | ||
+ | |midnightblue | ||
+ | |style="background:#191970; color:#ffffff; font-family:monospace;" lang=en|#191970 | ||
+ | |- | ||
+ | |lightsalmon | ||
+ | |style="background:#ffa07a; font-family:monospace;" lang=en|#ffa07a | ||
+ | |orange | ||
+ | |style="background:#ffa500; font-family:monospace;" lang=en|#ffa500 | ||
+ | |- | ||
+ | |darkorange | ||
+ | |style="background:#ff8c00; font-family:monospace;" lang=en|#ff8c00 | ||
+ | |coral | ||
+ | |style="background:#ff7f50; font-family:monospace;" lang=en|#ff7f50 | ||
+ | |- | ||
+ | |tomato | ||
+ | |style="background:#ff6347; font-family:monospace;" lang=en|#ff6347 | ||
+ | |orangered | ||
+ | |style="background:#ff4500; font-family:monospace;" lang=en|#ff4500 | ||
+ | |- | ||
+ | |aquamarine | ||
+ | |style="background:#7fffd4; font-family:monospace;" lang=en|#7fffd4 | ||
+ | |mediumspringgreen | ||
+ | |style="background:#00fa9a; font-family:monospace;" lang=en|#00fa9a | ||
+ | |- | ||
+ | |springgreen | ||
+ | |style="background:#00ff7f; font-family:monospace;" lang=en|#00ff7f | ||
+ | |palegreen | ||
+ | |style="background:#98fb98; font-family:monospace;" lang=en|#98fb98 | ||
+ | |- | ||
+ | |greenyellow | ||
+ | |style="background:#adff2f; font-family:monospace;" lang=en|#adff2f | ||
+ | |chartreuse | ||
+ | |style="background:#7fff00; font-family:monospace;" lang=en|#7fff00 | ||
+ | |- | ||
+ | |lawngreen | ||
+ | |style="background:#7cfc00; font-family:monospace;" lang=en|#7cfc00 | ||
+ | |lime | ||
+ | |style="background:#00ff00; font-family:monospace;" lang=en|#00ff00 | ||
+ | |- | ||
+ | |lightgreen | ||
+ | |style="background:#90ee90; font-family:monospace;" lang=en|#90ee90 | ||
+ | |yellowgreen | ||
+ | |style="background:#9acd32; font-family:monospace;" lang=en|#9acd32 | ||
+ | |- | ||
+ | |limegreen | ||
+ | |style="background:#32cd32; font-family:monospace;" lang=en|#32cd32 | ||
+ | |mediumseagreen | ||
+ | |style="background:#3cb371; font-family:monospace;" lang=en|#3cb371 | ||
+ | |- | ||
+ | |darkseagreen | ||
+ | |style="background:#8fbc8f; font-family:monospace;" lang=en|#8fbc8f | ||
+ | |forestgreen | ||
+ | |style="background:#228b22; color:#ffffff; font-family:monospace;" lang=en|#228b22 | ||
+ | |- | ||
+ | |seagreen | ||
+ | |style="background:#2e8b57; color:#ffffff; font-family:monospace;" lang=en|#2e8b57 | ||
+ | |green | ||
+ | |style="background:#008000; color:#ffffff; font-family:monospace;" lang=en|#008000 | ||
+ | |- | ||
+ | |olivedrab | ||
+ | |style="background:#6b8e23; color:#ffffff; font-family:monospace;" lang=en|#6b8e23 | ||
+ | |olive | ||
+ | |style="background:#808000; color:#ffffff; font-family:monospace;" lang=en|#808000 | ||
+ | |- | ||
+ | |darkolivegreen | ||
+ | |style="background:#556b2f; color:#ffffff; font-family:monospace;" lang=en|#556b2f | ||
+ | |darkgreen | ||
+ | |style="background:#006400; color:#ffffff; font-family:monospace;" lang=en|#006400 | ||
+ | |- | ||
+ | |mediumaquamarine | ||
+ | |style="background:#66cdaa; font-family:monospace;" lang=en|#66cdaa | ||
+ | |turquoise | ||
+ | |style="background:#40e0d0; font-family:monospace;" lang=en|#40e0d0 | ||
+ | |- | ||
+ | |lightseagreen | ||
+ | |style="background:#20b2aa; font-family:monospace;" lang=en|#20b2aa | ||
+ | |darkcyan | ||
+ | |style="background:#008b8b; color:#ffffff; font-family:monospace;" lang=en|#008b8b | ||
+ | |- | ||
+ | |teal | ||
+ | |style="background:#008080; color:#ffffff; font-family:monospace;" lang=en|#008080 | ||
+ | |lavender | ||
+ | |style="background:#e6e6fa; font-family:monospace;" lang=en|#e6e6fa | ||
+ | |- | ||
+ | |thistle | ||
+ | |style="background:#d8bfd8; font-family:monospace;" lang=en|#d8bfd8 | ||
+ | |plum | ||
+ | |style="background:#dda0dd; font-family:monospace;" lang=en|#dda0dd | ||
+ | |- | ||
+ | |violet | ||
+ | |style="background:#ee82ee; font-family:monospace;" lang=en|#ee82ee | ||
+ | |fuchsia | ||
+ | |style="background:#ff77ff; font-family:monospace;" lang=en|#ff77ff | ||
+ | |- | ||
+ | |magenta | ||
+ | |style="background:#ff00ff; font-family:monospace;" lang=en|#ff00ff | ||
+ | |orchid | ||
+ | |style="background:#da70d6; font-family:monospace;" lang=en|#da70d6 | ||
+ | |- | ||
+ | |mediumorchid | ||
+ | |style="background:#ba55d3; font-family:monospace;" lang=en|#ba55d3 | ||
+ | |darkorchid | ||
+ | |style="background:#9932cc; color:#ffffff; font-family:monospace;" lang=en|#9932cc | ||
+ | |- | ||
+ | |blueviolet | ||
+ | |style="background:#8a2be2; color:#ffffff; font-family:monospace;" lang=en|#8a2be2 | ||
+ | |darkviolet | ||
+ | |style="background:#9400d3; color:#ffffff; font-family:monospace;" lang=en|#9400d3 | ||
+ | |- | ||
+ | |mediumpurple | ||
+ | |style="background:#9370db; color:#ffffff; font-family:monospace;" lang=en|#9370db | ||
+ | |slateblue | ||
+ | |style="background:#6a5acd; color:#ffffff; font-family:monospace;" lang=en|#6a5acd | ||
+ | |- | ||
+ | |purple | ||
+ | |style="background:#800080; color:#ffffff; font-family:monospace;" lang=en|#800080 | ||
+ | |darkmagenta | ||
+ | |style="background:#8b008b; color:#ffffff; font-family:monospace;" lang=en|#8b008b | ||
+ | |- | ||
+ | |darkslateblue | ||
+ | |style="background:#483d8b; color:#ffffff; font-family:monospace;" lang=en|#483d8b | ||
+ | |indigo | ||
+ | |style="background:#4b0082; color:#ffffff; font-family:monospace;" lang=en|#4b0082 | ||
+ | |- | ||
+ | |honeydew | ||
+ | |style="background:#f0fff0; font-family:monospace;" lang=en|#f0fff0 | ||
+ | |mintcream | ||
+ | |style="background:#f5fffa; font-family:monospace;" lang=en|#f5fffa | ||
+ | |- | ||
+ | |azure | ||
+ | |style="background:#f0ffff; font-family:monospace;" lang=en|#f0ffff | ||
+ | |aliceblue | ||
+ | |style="background:#f0f8ff; font-family:monospace;" lang=en|#f0f8ff | ||
+ | |- | ||
+ | |ghostwhite | ||
+ | |style="background:#f8f8ff; font-family:monospace;" lang=en|#f8f8ff | ||
+ | |whitesmoke | ||
+ | |style="background:#f5f5f5; font-family:monospace;" lang=en|#f5f5f5 | ||
+ | |- | ||
+ | |lavenderblush | ||
+ | |style="background:#fff0f5; font-family:monospace;" lang=en|#fff0f5 | ||
+ | |mistyrose | ||
+ | |style="background:#ffe4e1; font-family:monospace;" lang=en|#ffe4e1 | ||
+ | |- | ||
+ | |antiquewhite | ||
+ | |style="background:#faebd7; font-family:monospace;" lang=en|#faebd7 | ||
+ | |seashell | ||
+ | |style="background:#fff5ee; font-family:monospace;" lang=en|#fff5ee | ||
+ | |- | ||
+ | |snow | ||
+ | |style="background:#fffafa; font-family:monospace;" lang=en|#fffafa | ||
+ | |white | ||
+ | |style="background:#ffffff; font-family:monospace;" lang=en|#ffffff | ||
+ | |- | ||
+ | |beige | ||
+ | |style="background:#f5f5dc; font-family:monospace;" lang=en|#f5f5dc | ||
+ | |linen | ||
+ | |style="background:#faf0e6; font-family:monospace;" lang=en|#faf0e6 | ||
+ | |- | ||
+ | |oldlace | ||
+ | |style="background:#fdf5e6; font-family:monospace;" lang=en|#fdf5e6 | ||
+ | |floralwhite | ||
+ | |style="background:#fffaf0; font-family:monospace;" lang=en|#fffaf0 | ||
+ | |- | ||
+ | |ivory | ||
+ | |style="background:#fffff0; font-family:monospace;" lang=en|#fffff0 | ||
+ | |gainsboro | ||
+ | |style="background:#dcdcdc; font-family:monospace;" lang=en|#dcdcdc | ||
+ | |- | ||
+ | |lightgrey | ||
+ | |style="background:#d3d3d3; font-family:monospace;" lang=en|#d3d3d3 | ||
+ | |silver | ||
+ | |style="background:#c0c0c0; font-family:monospace;" lang=en|#c0c0c0 | ||
+ | |- | ||
+ | |darkgray | ||
+ | |style="background:#a9a9a9; font-family:monospace;" lang=en|#a9a9a9 | ||
+ | |gray | ||
+ | |style="background:#808080; color:#ffffff; font-family:monospace;" lang=en|#808080 | ||
+ | |- | ||
+ | |dimgray | ||
+ | |style="background:#696969; color:#ffffff; font-family:monospace;" lang=en|#696969 | ||
+ | |darkslategray | ||
+ | |style="background:#2f4f4f; color:#ffffff; font-family:monospace;" lang=en|#2f4f4f | ||
+ | |- | ||
+ | |lightslategray | ||
+ | |style="background:#778899; color:#ffffff; font-family:monospace;" lang=en|#778899 | ||
+ | |slategray | ||
+ | |style="background:#708090; color:#ffffff; font-family:monospace;" lang=en|#708090 | ||
+ | |- | ||
+ | |cornsilk | ||
+ | |style="background:#fff8dc; font-family:monospace;" lang=en|#fff8dc | ||
+ | |blanchedalmond | ||
+ | |style="background:#ffebcd; font-family:monospace;" lang=en|#ffebcd | ||
+ | |- | ||
+ | |bisque | ||
+ | |style="background:#ffe4c4; font-family:monospace;" lang=en|#ffe4c4 | ||
+ | |navajowhite | ||
+ | |style="background:#ffdead; font-family:monospace;" lang=en|#ffdead | ||
+ | |- | ||
+ | |wheat | ||
+ | |style="background:#f5deb3; font-family:monospace;" lang=en|#f5deb3 | ||
+ | |sandybrown | ||
+ | |style="background:#f4a460; font-family:monospace;" lang=en|#f4a460 | ||
+ | |- | ||
+ | |goldenrod | ||
+ | |style="background:#daa520; font-family:monospace;" lang=en|#daa520 | ||
+ | |darkgoldenrod | ||
+ | |style="background:#b8860b; font-family:monospace;" lang=en|#b8860b | ||
+ | |- | ||
+ | |peru | ||
+ | |style="background:#cd853f; font-family:monospace;" lang=en|#cd853f | ||
+ | |chocolate | ||
+ | |style="background:#d2691e; font-family:monospace;" lang=en|#d2691e | ||
+ | |- | ||
+ | |maroon | ||
+ | |style="background:#800000; color:#ffffff; font-family:monospace;" lang=en|#800000 | ||
+ | |saddlebrown | ||
+ | |style="background:#8b4513; color:#ffffff; font-family:monospace;" lang=en|#8b4513 | ||
+ | |- | ||
+ | |brown | ||
+ | |style="background:#a52a2a; color:#ffffff; font-family:monospace;" lang=en|#a52a2a | ||
+ | |sienna | ||
+ | |style="background:#a0522d; color:#ffffff; font-family:monospace;" lang=en|#a0522d | ||
+ | |- | ||
+ | |darkred | ||
+ | |style="background:#8b0000; color:#ffffff; font-family:monospace;" lang=en|#8b0000 | ||
+ | |burlywood | ||
+ | |style="background:#deb887; font-family:monospace;" lang=en|#deb887 | ||
+ | |- | ||
+ | |tan | ||
+ | |style="background:#d2b48c; font-family:monospace;" lang=en|#d2b48c | ||
+ | |rosybrown | ||
+ | |style="background:#bc8f8f; font-family:monospace;" lang=en|#bc8f8f | ||
+ | |- | ||
+ | |black | ||
+ | |style="background:#000000; color:#ffffff; font-family:monospace;" lang=en|#000000 | ||
+ | | | ||
+ | | | ||
+ | |} | ||
+ | |||
+ | == CSS 색상 == | ||
+ | [[CSS]] 언어에서는 HTML 4.01에 정의된 색상 이름을 다시 정의하고 있다. CSS 2.1에서는 여기에 "오렌지 색"을 추가로 정의했다. | ||
+ | |||
+ | {| class="wikitable" | ||
+ | !색상 | ||
+ | !16진수 | ||
+ | |- | ||
+ | |[[주황색|orange]] | ||
+ | |style="background:#ffa500; color:#000000; font-family:monospace;" lang=en|#ffa500 | ||
+ | |} | ||
+ | |||
+ | {{웹 색상}} | ||
+ | {{색 주제}} | ||
+ | |||
+ | [[분류:색]] |
2019년 12월 24일 (화) 14:05 기준 최신판
thumb_up 추천메뉴 바로가기
- DBA { Oracle DBA 명령어 > DBA 초급 과정 > DBA 고급 과정 }
- 튜닝 { 오라클 튜닝 목록 }
- 모델링 { 데이터 모델링 가이드 }
틀:HTML 틀:색 웹 사이트를 만들 때, 여러 방법으로 색을 지정할 수 있다.
1 십육진법 표기[편집]
웹에서 십육진수쌍으로 색을 표현하는 방법은 RGB 가산혼합에 의한 것이다. 적(red), 녹(green), 청(blue)에 해당하는 두 자리 십육진수 세 쌍으로 색깔을 나타낼 수 있다. 한 채널에 1바이트가 할당되므로 모두 3바이트의 정보로 색을 표현한다. 웹에서 색을 지정할 때에는 특수기호 #
과 3쌍의 두자리 십육진수를 연속하여 사용한다.
- 표기형식
특수기호 | Red 채널 | Green 채널 | Blue 채널 |
---|---|---|---|
#
|
00~FF | 00~FF | 00~FF |
- 표기 예
표기 | 색상 |
---|---|
#000000 | |
#ff0000 | |
#00ff00 | |
#0000ff |
- 표현 범위
- 두자리의 십육진수가 표현할 수 있는 범위는 00부터 FF까지(십진수 0에서 255까지)이다. (십육진법 참조) 즉, 하나의 채널은 256 가지의 색을 표현할 수 있다.
- 웹 색상의 십육진법 표기는 각 채널 당 256개의 색을 표현하므로 3채널 모두를 사용하여 나타낼 수 있는 색상은 16,777,216가지(2563)가 된다.
- 이름 참조
- 십육진법에 의한 웹 색상표기 중에서 자주 쓰이는 것은 특별히 이름을 붙여 두었다. 아래의 설명과 같이 이름이 있는 색은 십육진법에 의한 표현 대신 이름으로 표현할 수 있다.
2 웹 안전 색상[편집]
- 호환성을 위해 16,777,216가지나 되는 색의 가짓수를 대폭 줄여서 표준으로 설정한 색을 말한다. 웹 안전 색상의 색 값은 모두 51의 배수로 이루어져 있다. (이는 최댓값인 255를 5로 나눈 것이다.) 각각 0, 51, 102, 153, 204, 255의 6단계로 이루어져 있으며 (00, 33, 66, 99, CC, FF) 표현 가능한 가짓수는 모두 216가지(63)이다.
밑의 색상표는 기존 RGB의 긴 코드대신 3글자로 줄인 것이다. 예로, 609번은 RGB코드의 660099번과 일치한다. 또한, 22개의 "가장 안전한" 웹 색상은 밑줄 표시가 되어 있다.
*000* | 300 | 600 | 900 | C00 | *F00* |
*003* | 303 | 603 | 903 | C03 | *F03* |
006 | 306 | 606 | 906 | C06 | F06 |
009 | 309 | 609 | 909 | C09 | F09 |
00C | 30C | 60C | 90C | C0C | F0C |
*00F* | 30F | 60F | 90F | C0F | *F0F* |
030 | 330 | 630 | 930 | C30 | F30 |
033 | 333 | 633 | 933 | C33 | F33 |
036 | 336 | 636 | 936 | C36 | F36 |
039 | 339 | 639 | 939 | C39 | F39 |
03C | 33C | 63C | 93C | C3C | F3C |
03F | 33F | 63F | 93F | C3F | F3F |
060 | 360 | 660 | 960 | C60 | F60 |
063 | 363 | 663 | 963 | C63 | F63 |
066 | 366 | 666 | 966 | C66 | F66 |
069 | 369 | 669 | 969 | C69 | F69 |
06C | 36C | 66C | 96C | C6C | F6C |
06F | 36F | 66F | 96F | C6F | F6F |
090 | 390 | 690 | 990 | C90 | F90 |
093 | 393 | 693 | 993 | C93 | F93 |
096 | 396 | 696 | 996 | C96 | F96 |
099 | 399 | 699 | 999 | C99 | F99 |
09C | 39C | 69C | 99C | C9C | F9C |
09F | 39F | 69F | 99F | C9F | F9F |
0C0 | 3C0 | 6C0 | 9C0 | CC0 | FC0 |
0C3 | 3C3 | 6C3 | 9C3 | CC3 | FC3 |
0C6 | 3C6 | 6C6 | 9C6 | CC6 | FC6 |
0C9 | 3C9 | 6C9 | 9C9 | CC9 | FC9 |
0CC | 3CC | 6CC | 9CC | CCC | FCC |
0CF | 3CF | 6CF | 9CF | CCF | FCF |
*0F0* | 3F0 | *6F0* | 9F0 | CF0 | *FF0* |
0F3 | *3F3* | *6F3* | 9F3 | CF3 | *FF3* |
*0F6* | *3F6* | 6F6 | 9F6 | *CF6* | *FF6* |
0F9 | 3F9 | 6F9 | 9F9 | CF9 | FF9 |
*0FC* | *3FC* | 6FC | 9FC | CFC | FFC |
*0FF* | *3FF* | *6FF* | 9FF | CFF | *FFF* |
3 HTML 색 이름[편집]
HTML 4.01 표준에는 16가지 색깔 이름이 정의되어 있다.
색상 | 16진수 | 색상 | 16진수 | 색상 | 16진수 | 색상 | 16진수 |
---|---|---|---|---|---|---|---|
black (검정) | #000000 | silver (은색) | #c0c0c0 | maroon (밤색) | #800000 | red (빨강) | #ff0000 |
navy (남색) | #000080 | blue (파랑) | #0000ff | purple (보라) | #800080 | fuchsia (밝은 자주) | #ff00ff |
green (초록) | #008000 | lime (라임) | #00ff00 | olive (올리브색) | #808000 | yellow (노랑) | #ffff00 |
teal (틸) | #008080 | aqua (물색) | #00ffff | gray (회색) | #808080 | white (하양) | #ffffff |
4 X11 색 이름[편집]
틀:본문 넷스케이프나 인터넷 익스플로러 같은 브라우저에는 별도로 여러 색상들이 정의되었으며, 특정한 브라우저에서는 이런 색상을 인식하지 못할 수도 있다. 이들 색상 중 다수가 X 윈도 시스템에서 분류된 X11 색 이름에서 가져온 것이다. CSS를 지원하는 대부분의 HTML 사용자 에이전트가 이 색상들을 지원한다.
아래는 X11 색 이름과 각각에 해당하는 16진수 코드의 목록이다.
색상 | 16진수 | 색상 | 16진수 |
---|---|---|---|
indianred | #cd5c5c | darksalmon | #e9967a |
lightcoral | #f08080 | salmon | #fa8072 |
orangered | #ff4500 | red | #ff0000 |
crimson | #dc143c | firebrick | #b22222 |
darkred | #8b0000 | mediumvioletred | #c71585 |
pink | #ffc0cb | lightpink | #ffb6c1 |
hotpink | #ff69b4 | deeppink | #ff1493 |
palevioletred | #db7093 | darkkhaki | #bdb76b |
khaki | #f0e68c | palegoldenrod | #eee8aa |
lightgoldenrodyellow | #fafad2 | lightyellow | #ffffe0 |
lemonchiffon | #fffacd | yellow | #ffff00 |
gold | #ffd700 | papayawhip | #ffefd5 |
moccasin | #ffe4b5 | peachpuff | #ffdab9 |
cyan | #00ffff | aqua | #00ffff |
aquamarine | #7fffd4 | turquoise | #40e0d0 |
mediumturquoise | #48d1cc | darkturquoise | #00ced1 |
cadetblue | #5f9ea0 | slategray | #708090 |
lightcyan | #e0ffff | paleturquoise | #afeeee |
powderblue | #b0e0e6 | lightsteelblue | #b0c4de |
steelblue | #4682b4 | lightblue | #add8e6 |
skyblue | #87ceeb | lightskyblue | #87cefa |
deepskyblue | #00bfff | cornflowerblue | #6495ed |
royalblue | #4169e1 | mediumslateblue | #7b68ee |
dodgerblue | #1e90ff | blue | #0000ff |
mediumblue | #0000cd | darkblue | #00008b |
navy | #000080 | midnightblue | #191970 |
lightsalmon | #ffa07a | orange | #ffa500 |
darkorange | #ff8c00 | coral | #ff7f50 |
tomato | #ff6347 | orangered | #ff4500 |
aquamarine | #7fffd4 | mediumspringgreen | #00fa9a |
springgreen | #00ff7f | palegreen | #98fb98 |
greenyellow | #adff2f | chartreuse | #7fff00 |
lawngreen | #7cfc00 | lime | #00ff00 |
lightgreen | #90ee90 | yellowgreen | #9acd32 |
limegreen | #32cd32 | mediumseagreen | #3cb371 |
darkseagreen | #8fbc8f | forestgreen | #228b22 |
seagreen | #2e8b57 | green | #008000 |
olivedrab | #6b8e23 | olive | #808000 |
darkolivegreen | #556b2f | darkgreen | #006400 |
mediumaquamarine | #66cdaa | turquoise | #40e0d0 |
lightseagreen | #20b2aa | darkcyan | #008b8b |
teal | #008080 | lavender | #e6e6fa |
thistle | #d8bfd8 | plum | #dda0dd |
violet | #ee82ee | fuchsia | #ff77ff |
magenta | #ff00ff | orchid | #da70d6 |
mediumorchid | #ba55d3 | darkorchid | #9932cc |
blueviolet | #8a2be2 | darkviolet | #9400d3 |
mediumpurple | #9370db | slateblue | #6a5acd |
purple | #800080 | darkmagenta | #8b008b |
darkslateblue | #483d8b | indigo | #4b0082 |
honeydew | #f0fff0 | mintcream | #f5fffa |
azure | #f0ffff | aliceblue | #f0f8ff |
ghostwhite | #f8f8ff | whitesmoke | #f5f5f5 |
lavenderblush | #fff0f5 | mistyrose | #ffe4e1 |
antiquewhite | #faebd7 | seashell | #fff5ee |
snow | #fffafa | white | #ffffff |
beige | #f5f5dc | linen | #faf0e6 |
oldlace | #fdf5e6 | floralwhite | #fffaf0 |
ivory | #fffff0 | gainsboro | #dcdcdc |
lightgrey | #d3d3d3 | silver | #c0c0c0 |
darkgray | #a9a9a9 | gray | #808080 |
dimgray | #696969 | darkslategray | #2f4f4f |
lightslategray | #778899 | slategray | #708090 |
cornsilk | #fff8dc | blanchedalmond | #ffebcd |
bisque | #ffe4c4 | navajowhite | #ffdead |
wheat | #f5deb3 | sandybrown | #f4a460 |
goldenrod | #daa520 | darkgoldenrod | #b8860b |
peru | #cd853f | chocolate | #d2691e |
maroon | #800000 | saddlebrown | #8b4513 |
brown | #a52a2a | sienna | #a0522d |
darkred | #8b0000 | burlywood | #deb887 |
tan | #d2b48c | rosybrown | #bc8f8f |
black | #000000 |