블로그 스킨을 바꾸거나 누리집에서 글자 색이라도 바꾸고 싶어 질 때가 많다. 요즘은 시에스에스(CSS:Cascading Style Sheet)가 대세다. 시에스에스로 색을 불러들이는 여러 가지 방법을 하나씩 알아보자. 영어 잘하는 사람은 여기를 보면 되지만 귀찮은 사람들을 위해 몇가지 뽑아내 옮겨 적어 본다. 컴퓨터에서 보이는 색들은 물감을 섞는 것이 아니라 빛을 섞는 것이라고 생각하면 조금 더 쉽다. 잘 모르면 포토샵과 같은 프로그램을 쓰면 쉽게 알 수 있지만 조금만 연습하면 그냥 느낌으로 알 수도 있을 것이다.
1. 색 이름
HTML4에 있는 색이름 : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. 몇 가지는 이름이 느낌과 다르죠. 아래와 같이 쓰면 된다.
h1 { color: maroon }
h2 { color: olive }
| aqua | black | blue | fuchsia |
| gray | green | lime | maroon |
| navy | olive | purple | red |
| silver | teal | white | yellow |
2. 아르지비(RGB) 숫자
빨간빛, 풀빛, 파란빛(RGB) 수로 색을 나타낼 때는 # 바로 뒤에 셋(#369)이나 여섯(#353535) 숫자를 쓴다. 셋으로 쓴 것은 같은 것을 두 번씩 적은 것과 같은 색이다. #369와 #336699는 같은 색이다. 빛의 기본이 되는 세 가지는 아래와 같다. #뒤에 쓰는 수들은 각각의 자라마다 16개의 수를 적을 수 있다. 0-9와 a-f까지로 모두 셋이면 `16^3`이나 여섯이면 `16^6`이나 되지만 그래픽 카드나 모니터 해상도 또는 프린터의 성능이 따라주지 않으면 구별이 되지 않는다.
그래서 프로그램들은 웹에서 안전한 색만 골라서 따로 보여주기도 한다. 대체로 3의 배수(0,3,6,9,c,f)들로만 이루어진 색들이 안전하다. 쓰인 수들은 차례대로 빨강, 풀, 파랑 빛이 들어간 양을 나타내는데 0은 가장 어둡고 f가 가장 밝다. 빛은 섞을수록 더 밝아진다는 생각을 하면서 각 자리의 수를 바꾸어 보면 느낌이 올 것이다. #fff는 흰색이고 #000은 검은색이다.
| #300 | #900 | #f00 |
| #000 | #888 | #fff |
| #f60 | #f96 | #fcc |
아래와 같이 조금 다르게 rgb(255,0,0),rgb(100%, 0%, 0%) 써도 되는데 눈치챘겠지만 직접 각각 빛의 양을 적는 것이다. 0-255인 정수를 쓰거나 퍼센트로 나타내는 것이다. 아래는 모두 빨간색을 불러온다.
em { color: #ff0000 } /* #rrggbb */
em { color: rgb(255,0,0) } /* integer range 0 - 255 */
em { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
3. 아르지비에이(RGBA)
16진수로 쓰지는 못하지만 아래와 같이 불투명도(alpha)를 하나 더 적어서 색을 넓게 쓸 수 있다.
em { color: rgba(255,0,0,1) /* the same, with explicit opacity of 1 */
em { color: rgb(100%,0%,0%) } /* float range 0.0% - 100.0% */
em { color: rgba(100%,0%,0%,1) } /* the same, with explicit opacity of 1 */
4. 에이치에스엘(HSL)
빛깔-진함-밝기(hue-saturation-lightness (HSL))로도 색을 부를 수 있다. 빛깔(hue)은 무지개에서 보이는 빨간색에서 보라색 빛을 원으로 둘러놓고 0-359까지 정수를 붙인 것과 같다. 0이나 359는 빨간색이고 120은 풀빛이다. 진함(saturation)이나 밝기(lightness)는 퍼센트로 나타내는데 (#***,0%,0%)은 검은빛 (#***, 0%, 100%), (#***,100%, 100%)는 하얀빛이고 (#***, 100%,50%) 정해진 색조(#***)에서 가장 깨끗한 색이다.
* { color: hsl(120, 100%, 50%) } /* green */
* { color: hsl(120, 100%, 25%) } /* light green */
* { color: hsl(120, 100%, 75%) } /* dark green */
* { color: hsl(120, 50%, 50%) } /* pastel green, and so on */
5. 빛깔표(x11colortable)
| Named | Numeric | Color name | Hex rgb | Decimal |
|---|---|---|---|---|
| aliceblue | #f0f8ff | 240,248,255 | ||
| antiquewhite | #faebd7 | 250,235,215 | ||
| aqua | #00ffff | 0,255,255 | ||
| aquamarine | #7fffd4 | 127,255,212 | ||
| azure | #f0ffff | 240,255,255 | ||
| beige | #f5f5dc | 245,245,220 | ||
| bisque | #ffe4c4 | 255,228,196 | ||
| black | #000000 | 0,0,0 | ||
| blanchedalmond | #ffebcd | 255,235,205 | ||
| blue | #0000ff | 0,0,255 | ||
| blueviolet | #8a2be2 | 138,43,226 | ||
| brown | #a52a2a | 165,42,42 | ||
| burlywood | #deb887 | 222,184,135 | ||
| cadetblue | #5f9ea0 | 95,158,160 | ||
| chartreuse | #7fff00 | 127,255,0 | ||
| chocolate | #d2691e | 210,105,30 | ||
| coral | #ff7f50 | 255,127,80 | ||
| cornflowerblue | #6495ed | 100,149,237 | ||
| cornsilk | #fff8dc | 255,248,220 | ||
| crimson | #dc143c | 220,20,60 | ||
| cyan | #00ffff | 0,255,255 | ||
| darkblue | #00008b | 0,0,139 | ||
| darkcyan | #008b8b | 0,139,139 | ||
| darkgoldenrod | #b8860b | 184,134,11 | ||
| darkgray | #a9a9a9 | 169,169,169 | ||
| darkgreen | #006400 | 0,100,0 | ||
| darkgrey | #a9a9a9 | 169,169,169 | ||
| darkkhaki | #bdb76b | 189,183,107 | ||
| darkmagenta | #8b008b | 139,0,139 | ||
| darkolivegreen | #556b2f | 85,107,47 | ||
| darkorange | #ff8c00 | 255,140,0 | ||
| darkorchid | #9932cc | 153,50,204 | ||
| darkred | #8b0000 | 139,0,0 | ||
| darksalmon | #e9967a | 233,150,122 | ||
| darkseagreen | #8fbc8f | 143,188,143 | ||
| darkslateblue | #483d8b | 72,61,139 | ||
| darkslategray | #2f4f4f | 47,79,79 | ||
| darkslategrey | #2f4f4f | 47,79,79 | ||
| darkturquoise | #00ced1 | 0,206,209 | ||
| darkviolet | #9400d3 | 148,0,211 | ||
| deeppink | #ff1493 | 255,20,147 | ||
| deepskyblue | #00bfff | 0,191,255 | ||
| dimgray | #696969 | 105,105,105 | ||
| dimgrey | #696969 | 105,105,105 | ||
| dodgerblue | #1e90ff | 30,144,255 | ||
| firebrick | #b22222 | 178,34,34 | ||
| floralwhite | #fffaf0 | 255,250,240 | ||
| forestgreen | #228b22 | 34,139,34 | ||
| fuchsia | #ff00ff | 255,0,255 | ||
| gainsboro | #dcdcdc | 220,220,220 | ||
| ghostwhite | #f8f8ff | 248,248,255 | ||
| gold | #ffd700 | 255,215,0 | ||
| goldenrod | #daa520 | 218,165,32 | ||
| gray | #808080 | 128,128,128 | ||
| green | #008000 | 0,128,0 | ||
| greenyellow | #adff2f | 173,255,47 | ||
| grey | #808080 | 128,128,128 | ||
| honeydew | #f0fff0 | 240,255,240 | ||
| hotpink | #ff69b4 | 255,105,180 | ||
| indianred | #cd5c5c | 205,92,92 | ||
| indigo | #4b0082 | 75,0,130 | ||
| ivory | #fffff0 | 255,255,240 | ||
| khaki | #f0e68c | 240,230,140 | ||
| lavender | #e6e6fa | 230,230,250 | ||
| lavenderblush | #fff0f5 | 255,240,245 | ||
| lawngreen | #7cfc00 | 124,252,0 | ||
| lemonchiffon | #fffacd | 255,250,205 | ||
| lightblue | #add8e6 | 173,216,230 | ||
| lightcoral | #f08080 | 240,128,128 | ||
| lightcyan | #e0ffff | 224,255,255 | ||
| lightgoldenrodyellow | #fafad2 | 250,250,210 | ||
| lightgray | #d3d3d3 | 211,211,211 | ||
| lightgreen | #90ee90 | 144,238,144 | ||
| lightgrey | #d3d3d3 | 211,211,211 | ||
| lightpink | #ffb6c1 | 255,182,193 | ||
| lightsalmon | #ffa07a | 255,160,122 | ||
| lightseagreen | #20b2aa | 32,178,170 | ||
| lightskyblue | #87cefa | 135,206,250 | ||
| lightslategray | #778899 | 119,136,153 | ||
| lightslategrey | #778899 | 119,136,153 | ||
| lightsteelblue | #b0c4de | 176,196,222 | ||
| lightyellow | #ffffe0 | 255,255,224 | ||
| lime | #00ff00 | 0,255,0 | ||
| limegreen | #32cd32 | 50,205,50 | ||
| linen | #faf0e6 | 250,240,230 | ||
| magenta | #ff00ff | 255,0,255 | ||
| maroon | #800000 | 128,0,0 | ||
| mediumaquamarine | #66cdaa | 102,205,170 | ||
| mediumblue | #0000cd | 0,0,205 | ||
| mediumorchid | #ba55d3 | 186,85,211 | ||
| mediumpurple | #9370db | 147,112,219 | ||
| mediumseagreen | #3cb371 | 60,179,113 | ||
| mediumslateblue | #7b68ee | 123,104,238 | ||
| mediumspringgreen | #00fa9a | 0,250,154 | ||
| mediumturquoise | #48d1cc | 72,209,204 | ||
| mediumvioletred | #c71585 | 199,21,133 | ||
| midnightblue | #191970 | 25,25,112 | ||
| mintcream | #f5fffa | 245,255,250 | ||
| mistyrose | #ffe4e1 | 255,228,225 | ||
| moccasin | #ffe4b5 | 255,228,181 | ||
| navajowhite | #ffdead | 255,222,173 | ||
| navy | #000080 | 0,0,128 | ||
| oldlace | #fdf5e6 | 253,245,230 | ||
| olive | #808000 | 128,128,0 | ||
| olivedrab | #6b8e23 | 107,142,35 | ||
| orange | #ffa500 | 255,165,0 | ||
| orangered | #ff4500 | 255,69,0 | ||
| orchid | #da70d6 | 218,112,214 | ||
| palegoldenrod | #eee8aa | 238,232,170 | ||
| palegreen | #98fb98 | 152,251,152 | ||
| paleturquoise | #afeeee | 175,238,238 | ||
| palevioletred | #db7093 | 219,112,147 | ||
| papayawhip | #ffefd5 | 255,239,213 | ||
| peachpuff | #ffdab9 | 255,218,185 | ||
| peru | #cd853f | 205,133,63 | ||
| pink | #ffc0cb | 255,192,203 | ||
| plum | #dda0dd | 221,160,221 | ||
| powderblue | #b0e0e6 | 176,224,230 | ||
| purple | #800080 | 128,0,128 | ||
| red | #ff0000 | 255,0,0 | ||
| rosybrown | #bc8f8f | 188,143,143 | ||
| royalblue | #4169e1 | 65,105,225 | ||
| saddlebrown | #8b4513 | 139,69,19 | ||
| salmon | #fa8072 | 250,128,114 | ||
| sandybrown | #f4a460 | 244,164,96 | ||
| seagreen | #2e8b57 | 46,139,87 | ||
| seashell | #fff5ee | 255,245,238 | ||
| sienna | #a0522d | 160,82,45 | ||
| silver | #c0c0c0 | 192,192,192 | ||
| skyblue | #87ceeb | 135,206,235 | ||
| slateblue | #6a5acd | 106,90,205 | ||
| slategray | #708090 | 112,128,144 | ||
| slategrey | #708090 | 112,128,144 | ||
| snow | #fffafa | 255,250,250 | ||
| springgreen | #00ff7f | 0,255,127 | ||
| steelblue | #4682b4 | 70,130,180 | ||
| tan | #d2b48c | 210,180,140 | ||
| teal | #008080 | 0,128,128 | ||
| thistle | #d8bfd8 | 216,191,216 | ||
| tomato | #ff6347 | 255,99,71 | ||
| turquoise | #40e0d0 | 64,224,208 | ||
| violet | #ee82ee | 238,130,238 | ||
| wheat | #f5deb3 | 245,222,179 | ||
| white | #ffffff | 255,255,255 | ||
| whitesmoke | #f5f5f5 | 245,245,245 | ||
| yellow | #ffff00 | 255,255,0 | ||
| yellowgreen | #9acd32 | 154,205,50 |
