맨위로가기

X11 색 이름

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

X11 색 이름은 X 윈도 시스템에서 사용되는 색상 표현 표준으로, HTML 및 CSS를 따르는 웹 브라우저에서도 널리 사용된다. 이 표준은 RGB 색상 모델을 기반으로 하며, 0부터 255까지의 정규화된 값을 사용하여 색상을 표현한다. X11 색상은 웹 색상 체계와 유사하지만, "Gray" 색상 정의 등에서 차이점을 보인다. 이러한 차이점은 초기 웹 브라우저가 X11 색상을 기반으로 했기 때문에 발생했으며, W3C는 이러한 X11 색상 목록을 CSS와 SVG에 채택하면서 일부 변경 사항을 적용했다. X11 색상은 다양한 변형을 제공하며, 색상 선택 도구와 팔레트 생성기를 통해 활용될 수 있다.

2. 색상 표현의 기본 원리

X11 색상은 주로 RGB 색상 모델을 기반으로 표현된다.

HTML에서 "Gray"는 검은색과 흰색을 정확히 1:1 비율로 섞은 (128, 128, 128)로 정의되지만, X11에서의 "Gray"는 HTML에서의 "Silver"(192, 192, 192) 에 가까운 (190, 190, 190)으로 정의된다. HTML에서의 "Gray"는 X11에서의 "LightGray" (211, 211, 211), "DarkGray" (169, 169, 169)보다 더 어둡다.

Gray''n''의 RGB 값은 (255 × ''n''/100, 255 × ''n''/100, 255 × ''n''/100)이다. 이때 ''n''이 가질 수 있는 값은 0, 1, 2, ..., 99, 100이다. n이 0에 가까울수록 검은색에 가깝고, 100에 가까울수록 흰색에 가깝다. 예를 들어 Gray30의 RGB값은 (77, 77, 77) 이고, X11 회색에 가장 가까운 Gray75의 RGB값은 (191,191,191)이다.

Gray 계열이 아닌 기본 색상의 수정된 색상을 정의하려면 기본 색상 이름 뒤에 1, 2, 3, 4를 붙여 'Color1', 'Color2', 'Color3', 'Color4'와 같이 짓는다. 이때, Color1은 기본 색상의 HSV 상 명도(Value)를 100%로 변경한 색이고, Color2, Color3, Color4는 각각 기본 색상의 명도가 93.2%, 80.4%, 54.8%로 변경한 색이다.


  • HSV 색 공간에서는 명도 값을 변경하면 되지만, RGB 색 공간에서는 R, G, B 모두 변경된다.
  • Color1 = Color의 RGB를 구성하는 각 R, G, B 좌표 중 가장 큰 값의 좌표를 ''L''이라고 할 때 R, G, B 좌표에 모두 (255/''L'')을 곱하여 어느 한 쪽을 255로 맞춘다.
  • Color2 = Color1 × 0.932
  • Color3 = Color1 × 0.804
  • Color4 = Color1 × 0.548

2. 1. RGB 색상 모델

RGB 색상 모델은 빛의 삼원색인 빨강, 녹색, 파랑을 사용하여 색상을 표현하는 방식이다. 각 색상의 강도를 0부터 255 사이의 값으로 나타내어 다양한 색상을 조합한다.

HTML에서 "Gray"는 검은색과 흰색을 정확히 1:1 비율로 섞은 (128, 128, 128)로 정의되지만, X11에서의 "Gray"는 (190, 190, 190)으로 정의되어 HTML의 "Silver"(192, 192, 192)에 더 가깝다. HTML의 "Gray"는 X11의 "LightGray" (211, 211, 211)나 "DarkGray" (169, 169, 169)보다 더 어둡다.

기본 색상에서 수정된 색상의 RGB 값을 계산하는 방법은 다음과 같다.

  • Gray''n''의 RGB 값은 (255 × ''n''/100, 255 × ''n''/100, 255 × ''n''/100)이다. ''n''은 0부터 100 사이의 값을 가지며, 0에 가까울수록 검은색, 100에 가까울수록 흰색에 가까워진다.

  • 예시: Gray30은 (77, 77, 77), X11 회색에 가장 가까운 Gray75는 (191, 191, 191)이다.

  • Gray 계열이 아닌 기본 색상의 경우, 색상 이름 뒤에 1, 2, 3, 4를 붙여 명도를 조절한다. (예: Color1, Color2, Color3, Color4)
  • Color1: 기본 색상의 HSV 상 명도(Value)를 100%로 변경. RGB 값 중 가장 큰 값을 ''L''이라 할 때, 각 R, G, B 값에 (255/''L'')을 곱한다.
  • Color2: Color1 값에 0.932를 곱한다.
  • Color3: Color1 값에 0.804를 곱한다.
  • Color4: Color1 값에 0.548을 곱한다.


2. 2. 16진수 (HEX) 코드

RGB 값을 16진수로 표현하는 방식은 #RRGGBB 형태를 가진다. 여기서 RR, GG, BB는 각각 빨강, 초록, 파랑의 세기를 나타내며, 00부터 FF까지의 16진수 값을 가진다. 예를 들어, #FF0000은 빨강색을 나타낸다.

3. X11 색상 체계

X 윈도우 시스템은 색상을 표현하기 위해 특별한 체계를 사용한다. HTML에서 "Gray"는 검은색과 흰색을 1:1로 섞은 (128, 128, 128)로 정의되지만, X11에서는 "Gray"를 HTML의 "Silver"(192, 192, 192)에 가까운 (190, 190, 190)으로 정의한다.[7] HTML의 "Gray"는 X11의 "LightGray"(211, 211, 211)나 "DarkGray"(169, 169, 169)보다 더 어둡다.[8]

기본 색상을 수정하여 새로운 색상을 만들 때는 다음과 같은 규칙을 따른다.


  • Gray''n''의 RGB 값은 (, , )으로 계산한다. ''n''은 0부터 100 사이의 값을 가지며, 0에 가까울수록 검은색, 100에 가까울수록 흰색이 된다.

  • 예를 들어 Gray30은 (77, 77, 77), Gray75는 (191, 191, 191)이다.
  • Gray 계열이 아닌 기본 색상은 이름 뒤에 1, 2, 3, 4를 붙여 수정한다. (예: Color1, Color2, Color3, Color4)
  • Color1은 기본 색상의 HSV 명도(Value)를 100%로 변경한 색이다.
  • Color2, Color3, Color4는 각각 기본 색상 명도의 93.2%, 80.4%, 54.8%로 변경한 색이다.
  • RGB 색 공간에서는 R, G, B 값을 모두 변경해야 한다.
  • Color1: 기본 색상의 RGB 좌표 중 가장 큰 값을 ''L''이라 할 때, R, G, B 좌표에 (255/''L'')을 곱한다.
  • Color2 = Color1 × 0.932
  • Color3 = Color1 × 0.804
  • Color4 = Color1 × 0.548


78가지 색상(회색 제외)에 대해 "''색상''1", "''색상''2", "''색상''3", "''색상''4" 네 가지 변형이 제공된다. "''색상''1"은 때때로 "''색상''"과 같다(예: "Snow1" = "Snow"). 기본 색상(예: `cadet blue`, `CadetBlue`)과 달리 공백 없이 코딩된다(예: `CadetBlue3`). 이러한 변형은 널리 쓰이는 브라우저나 W3C 표준에서는 지원되지 않는다.

"''색상''1"이 "''색상''"과 같지 않으면 기본 색상은 일반적으로 더 어둡다. 즉, HSB 밝기가 100% 미만이다. 기본 색상의 약 30개는 완전히 밝다. 네 가지 변형(1...4)은 각각 100%, 93%, 80%, 55%의 반올림된 밝기 값을 갖는다.

다음은 고정된 밝기 설정에 따른 RGB 값 계산 공식이다.

  • `''색상''1 := ''색상'' × 100%`
  • `''색상''2 := ''색상''1 × 93.2%`
  • `''색상''3 := ''색상''1 × 80.4%`
  • `''색상''4 := ''색상''1 × 54.8%`


예시:

  • "Yellow 2" (238, 238, 0)는 "Yellow" (255, 255, 0)을 기반으로 하며 255 × 0.932 = 237.66이다.
  • "Ivory 3" (205, 205, 193)은 "Ivory" (255, 255, 240)로 설명되며, 여기서 255 × 0.804 = 205.02이고 240 × 0.804 = 192.96이다.
  • "Azure 4" (131, 139, 139)는 "Azure" (240, 255, 255) 값과 255 × 0.548 = 139.74 및 240 × 0.548 = 131.52로 변환된 값과 가깝다.


3. 1. X11 색상 이름

X11은 다양한 색상 이름을 정의하며, 각 색상 이름은 RGB 값으로 표현된다. 이 값들은 컴퓨터 그래픽스에서 색상을 표현하는 데 사용된다. 아래 표는 X11에서 정의된 색상 이름, RGB 좌표, 16진수 코드를 보여준다.

X11 색상 이름, RGB 좌표 및 16진수 코드
색 이름RGB 좌표 (R, G, B)16진수 코드
앨리스 블루(240, 248, 255)#F0F8FF
앤티크 화이트(250, 235, 215)#FAEBD7
아쿠아(0, 255, 255)#00FFFF
아쿠아마린(127, 255, 212)#7FFFD4
아주어(240, 255, 255)#F0FFFF
베이지(245, 245, 220)#F5F5DC
비스크(255, 228, 196)#FFE4C4
검정(0, 0, 0)#000000
블랜치드 아몬드(255, 235, 205)#FFEBCD
파랑(0, 0, 255)#0000FF
블루 바이올렛(138, 43, 226)#8A2BE2
갈색(165, 42, 42)#A52A2A
벌리우드(222, 184, 135)#DEB887
카데트 블루(95, 158, 160)#5F9EA0
샤르트뢰즈(127, 255, 0)#7FFF00
초콜릿(210, 105, 30)#D2691E
산호(255, 127, 80)#FF7F50
옥수수꽃 블루(100, 149, 237)#6495ED
콘실크(255, 248, 220)#FFF8DC
진홍색(220, 20, 60)#DC143C
시안(0, 255, 255)#00FFFF
다크 블루(0, 0, 139)#00008B
다크 시안(0, 139, 139)#008B8B
다크 골든로드(184, 134, 11)#B8860B
다크 그레이(169, 169, 169)#A9A9A9
다크 그린(0, 100, 0)#006400
다크 카키(189, 183, 107)#BDB76B
다크 마젠타(139, 0, 139)#8B008B
다크 올리브 그린(85, 107, 47)#556B2F
다크 오렌지(255, 140, 0)#FF8C00
다크 오키드(153, 50, 204)#9932CC
다크 레드(139, 0, 0)#8B0000
다크 살몬(233, 150, 122)#E9967A
다크 시 그린(143, 188, 143)#8FBC8F
다크 슬레이트 블루(72, 61, 139)#483D8B
다크 슬레이트 그레이(47, 79, 79)#2F4F4F
다크 터콰이즈(0, 206, 209)#00CED1
다크 바이올렛(148, 0, 211)#9400D3
딥 핑크(255, 20, 147)#FF1493
딥 스카이 블루(0, 191, 255)#00BFFF
어두운 회색(105, 105, 105)#696969
도저 블루(30, 144, 255)#1E90FF
파이어 브릭(178, 34, 34)#B22222
플로럴 화이트(255, 250, 240)#FFFAF0
포레스트 그린(34, 139, 34)#228B22
푸시아(255, 0, 255)#FF00FF
게인즈버러(220, 220, 220)#DCDCDC
고스트 화이트(248, 248, 255)#F8F8FF
금색(255, 215, 0)#FFD700
골든로드(218, 165, 32)#DAA520
회색(190, 190, 190)#BEBEBE
녹색(0, 255, 0)#00FF00
녹색 노란색(173, 255, 47)#ADFF2F
허니듀(240, 255, 240)#F0FFF0
핫 핑크(255, 105, 180)#FF69B4
인디언 레드(205, 92, 92)#CD5C5C
남색(75, 0, 130)#4B0082
아이보리(255, 255, 240)#FFFFF0
카키(240, 230, 140)#F0E68C
라벤더(230, 230, 250)#E6E6FA
라벤더 블러쉬(255, 240, 245)#FFF0F5
잔디 녹색(124, 252, 0)#7CFC00
레몬 시폰(255, 250, 205)#FFFACD
라이트 블루(173, 216, 230)#ADD8E6
라이트 코랄(240, 128, 128)#F08080
라이트 시안(224, 255, 255)#E0FFFF
라이트 골든로드(238, 221, 130)#EEDD82
라이트 그레이(211, 211, 211)#D3D3D3
라이트 그린(144, 238, 144)#90EE90
라이트 핑크(255, 182, 193)#FFB6C1
라이트 살몬(255, 160, 122)#FFA07A
라이트 시 그린(32, 178, 170)#20B2AA
라이트 스카이 블루(135, 206, 250)#87CEFA
라이트 슬레이트 그레이(119, 136, 153)#778899
라이트 스틸 블루(176, 196, 222)#B0C4DE
라이트 옐로우(255, 255, 224)#FFFFE0
라임(0, 255, 0)#00FF00
라임 그린(50, 205, 50)#32CD32
린넨(250, 240, 230)#FAF0E6
마젠타(255, 0, 255)#FF00FF
마룬(176, 48, 96)#B03060
미디엄 아쿠아마린(102, 205, 170)#66CDAA
미디엄 블루(0, 0, 205)#0000CD
미디엄 오키드(186, 85, 211)#BA55D3
미디엄 퍼플(147, 112, 219)#9370DB
미디엄 시 그린(60, 179, 113)#3CB371
미디엄 슬레이트 블루(123, 104, 238)#7B68EE
미디엄 스프링 그린(0, 250, 154)#00FA9A
미디엄 터콰이즈(72, 209, 204)#48D1CC
미디엄 바이올렛 레드(199, 21, 133)#C71585
미드나잇 블루(25, 25, 112)#191970
민트 크림(245, 255, 250)#F5FFFA
미스티 로즈(255, 228, 225)#FFE4E1
모카신(255, 228, 181)#FFE4B5
나바호 화이트(255, 222, 173)#FFDEAD
네이비 블루(0, 0, 128)#000080
올드 레이스(253, 245, 230)#FDF5E6
올리브(128, 128, 0)#808000
올리브 드랩(107, 142, 35)#6B8E23
오렌지(255, 165, 0)#FFA500
오렌지 레드(255, 69, 0)#FF4500
오키드(218, 112, 214)#DA70D6
페일 골든로드(238, 232, 170)#EEE8AA
페일 그린(152, 251, 152)#98FB98
페일 터콰이즈(175, 238, 238)#AFEEEE
페일 바이올렛 레드(219, 112, 147)#DB7093
파파야 휩(255, 239, 213)#FFEFD5
피치 퍼프(255, 218, 185)#FFDAB9
페루(205, 133, 63)#CD853F
분홍색(255, 192, 203)#FFC0CB
플럼(221, 160, 221)#DDA0DD
파우더 블루(176, 224, 230)#B0E0E6
보라색(160, 32, 240)#A020F0
빨간색(255, 0, 0)#FF0000
로지 브라운(188, 143, 143)#BC8F8F
로열 블루(65, 105, 225)#4169E1
새들 브라운(139, 69, 19)#8B4513
살몬(250, 128, 114)#FA8072
샌디 브라운(244, 164, 96)#F4A460
시 그린(46, 139, 87)#2E8B57
시셸(255, 245, 238)#FFF5EE
시에나(160, 82, 45)#A0522D
은색(192, 192, 192)#C0C0C0
스카이 블루(135, 206, 235)#87CEEB
슬레이트 블루(106, 90, 205)#6A5ACD
슬레이트 그레이(112, 128, 144)#708090
스노우(255, 250, 250)#FFFAFA
스프링 그린(0, 255, 127)#00FF7F
스틸 블루(70, 130, 180)#4682B4
탄(210, 180, 140)#D2B48C
틸(0, 128, 128)#008080
엉겅퀴(216, 191, 216)#D8BFD8
토마토(255, 99, 71)#FF6347
터키옥(64, 224, 208)#40E0D0
제비꽃색(238, 130, 238)#EE82EE
밀(245, 222, 179)#F5DEB3
흰색(255, 255, 255)#FFFFFF
화이트스모크(245, 245, 245)#F5F5F5
노란색(255, 255, 0)#FFFF00
황록색(154, 205, 50)#9ACD32



X11 색상 이름은 웹 브라우저에서도 사용되지만, 약간의 차이가 있을 수 있다. 예를 들어, HTML/CSS에서 "Gray"는 X11의 "Gray"보다 더 어두운 회색을 나타낸다.

3. 2. X11 색상과 웹 색상의 차이

HTML에서 "Gray"는 검은색과 흰색을 정확히 1:1 비율로 섞은 (128, 128, 128)로 정의되지만, X11에서의 "Gray"는 HTML에서의 "Silver" (192, 192, 192)에 가까운 (190, 190, 190)으로 정의된다.[7] HTML에서의 "Gray"는 X11에서의 "LightGray" (211, 211, 211), "DarkGray" (169, 169, 169)보다 더 어둡다.[8] 이러한 차이로 인해 웹에서 통용되는 결합된 CSS 3.0 색상 목록은 "Gray"보다 "Dark Gray"가 더 밝게 표현된다.

모자이크 및 넷스케이프 내비게이터 초기 버전은 X11 색상을 웹 색상 목록의 기초로 사용했다.[7] W3C의 SVG 및 CSS 레벨 3 모듈 색상 사양은 일부 변경을 거쳐 X11 목록을 채택했다.

2014년 이후 X 릴리스(xorg-rgb 버전 1.0.6)는 W3C 정의도 지원한다.[10] X11에서는 원래 정의가 보존되었으며("Dark Gray"는 "Gray"의 어두운 음영), 모호성을 줄이기 위해 충돌하는 이름 쌍에 "Web" 및 "X11" 접두사가 추가되었다. "X11" 접두사는 접두사가 없는 버전의 별칭이다. ("X11 Gray" = "Gray" ≠ "Web Gray").

충돌하는 정의가 있는 색상 이름
색상 이름X11 색상W3C 색상
16진수빨강녹색파랑샘플샘플16진수빨강녹색파랑
Gray#BEBEBE75%75%75%style="background:#BEBEBE;"|style="background:grey;"|#80808050%50%50%
Green#00FF000%100%0%style="background:#0F0;"|style="background:green;"|#0080000%50%0%
적갈색#B0306069%19%38%style="background:#B03060;"|style="background:#800000;"|#80000050%0%0%
Purple#A020F063%13%94%style="background:#A020F0;"|style="background:#800080;"|#80008050%0%50%



여러 이름이 있는 색상
W3C 이름색상X11 이름
16진수빨강녹색파랑샘플
라임[11]#00FF000%100%0%style="background:#00FF00"|Green
자홍색[11]#FF00FF100%0%100%style="background:#FF00FF;"|Magenta
청록색[11]#00FFFF0%100%100%style="background:#00FFFF"|Cyan


4. 웹 색상 체계 (HTML/CSS)

HTML/CSS 웹 색상 체계는 웹 표준으로 사용되며, 다양한 색상을 표현하기 위해 사용된다. HTML과 CSS에서 사용되는 색상 이름과 그에 대한 RGB 값은 아래 표와 같다. 웹 페이지에서 색상을 표현할 때는 색상 이름, HEX 코드, RGB 값 등을 사용할 수 있다.

색상 이름HEX 코드RGB색상 견본
White#FFFFFF255255255bgcolor="#FFFFFF"|
Snow#FFFAFA255250250bgcolor="#FFFAFA"|
GhostWhite#F8F8FF248248255bgcolor="#F8F8FF"|
WhiteSmoke#F5F5F5245245245bgcolor="#F5F5F5"|
Gainsboro#DCDCDC220220220bgcolor="#DCDCDC"|
FloralWhite#FFFAF0255250240bgcolor="#FFFAF0"|
OldLace#FDF5E6253245230bgcolor="#FDF5E6"|
Linen#FAF0E6250240230bgcolor="#FAF0E6"|
AntiqueWhite#FAEBD7250235215bgcolor="#FAEBD7"|
PapayaWhip#FFEFD5255239213bgcolor="#FFEFD5"|
BlanchedAlmond#FFEBCD255235205bgcolor="#FFEBCD"|
Bisque#FFE4C4255228196bgcolor="#FFE4C4"|
PeachPuff#FFDAB9255218185bgcolor="#FFDAB9"|
NavajoWhite#FFDEAD255222173bgcolor="#FFDEAD"|
Moccasin#FFE4B5255228181bgcolor="#FFE4B5"|
Cornsilk#FFF8DC255248220bgcolor="#FFF8DC"|
Ivory#FFFFF0255255240bgcolor="#FFFFF0"|
LemonChiffon#FFFACD255250205bgcolor="#FFFACD"|
Seashell#FFF5EE255245238bgcolor="#FFF5EE"|
Honeydew#F0FFF0240255240bgcolor="#F0FFF0"|
MintCream#F5FFFA245255250bgcolor="#F5FFFA"|
Azure#F0FFFF240255255bgcolor="#F0FFFF"|
AliceBlue#F0F8FF240248255bgcolor="#F0F8FF"|
lavender#E6E6FA230230250bgcolor="#E6E6FA"|
LavenderBlush#FFF0F5255240245bgcolor="#FFF0F5"|
MistyRose#FFE4E1255228225bgcolor="#FFE4E1"|
Black#000000000bgcolor="#000000"|
DarkSlateGray#2F4F4F477979bgcolor="#2F4F4F"|
DimGray#696969105105105bgcolor="#696969"|
SlateGray#708090112128144bgcolor="#708090"|
LightSlateGray#778899119136153bgcolor="#778899"|
Gray#BEBEBE190190190bgcolor="#BEBEBE"|
LightGray#D3D3D3211211211bgcolor="#D3D3D3"|
MidnightBlue#1919702525112bgcolor="#191970"|
NavyBlue#00008000128bgcolor="#000080"|
CornflowerBlue#6495ED100149237bgcolor="#6495ED"|
DarkSlateBlue#483D8B7261139bgcolor="#483D8B"|
SlateBlue#6A5ACD10690205bgcolor="#6A5ACD"|
MediumSlateBlue#7B68EE123104238bgcolor="#7B68EE"|
LightSlateBlue#8470FF132112255bgcolor="#8470FF"|
MediumBlue#0000CD00205bgcolor="#0000CD"|
RoyalBlue#4169E165105225bgcolor="#4169E1"|
Blue#0000FF00255bgcolor="#0000FF"|
DodgerBlue#1E90FF30144255bgcolor="#1E90FF"|
DeepSkyBlue#00BFFF0191255bgcolor="#00BFFF"|
SkyBlue#87CEEB135206235bgcolor="#87CEEB"|
LightSkyBlue#87CEFA135206250bgcolor="#87CEFA"|
SteelBlue#4682B470130180bgcolor="#4682B4"|
LightSteelBlue#B0C4DE176196222bgcolor="#B0C4DE"|
LightBlue#ADD8E6173216230bgcolor="#ADD8E6"|
PowderBlue#B0E0E6176224230bgcolor="#B0E0E6"|
PaleTurquoise#AFEEEE175238238bgcolor="#AFEEEE"|
DarkTurquoise#00CED10206209bgcolor="#00CED1"|
MediumTurquoise#48D1CC72209204bgcolor="#48D1CC"|
Turquoise#40E0D064224208bgcolor="#40E0D0"|
Cyan#00FFFF0255255bgcolor="#00FFFF"|
LightCyan#E0FFFF224255255bgcolor="#E0FFFF"|
CadetBlue#5F9EA095158160bgcolor="#5F9EA0"|
MediumAquamarine#66CDAA102205170bgcolor="#66CDAA"|
Aquamarine#7FFFD4127255212bgcolor="#7FFFD4"|
DarkGreen#00640001000bgcolor="#006400"|
DarkOliveGreen#556B2F8510747bgcolor="#556B2F"|
DarkSeaGreen#8FBC8F143188143bgcolor="#8FBC8F"|
SeaGreen#2E8B574613987bgcolor="#2E8B57"|
MediumSeaGreen#3CB37160179113bgcolor="#3CB371"|
LightSeaGreen#20B2AA32178170bgcolor="#20B2AA"|
PaleGreen#98FB98152251152bgcolor="#98FB98"|
SpringGreen#00FF7F0255127bgcolor="#00FF7F"|
LawnGreen#7CFC001242520bgcolor="#7CFC00"|
Green#00FF0002550bgcolor="#00FF00"|
Chartreuse#7FFF001272550bgcolor="#7FFF00"|
MedSpringGreen#00FA9A0250154bgcolor="#00FA9A"|
GreenYellow#ADFF2F17325547bgcolor="#ADFF2F"|
LimeGreen#32CD325020550bgcolor="#32CD32"|
YellowGreen#9ACD3215420550bgcolor="#9ACD32"|
ForestGreen#228B223413934bgcolor="#228B22"|
OliveDrab#6B8E2310714235bgcolor="#6B8E23"|
DarkKhaki#BDB76B189183107bgcolor="#BDB76B"|
PaleGoldenrod#EEE8AA238232170bgcolor="#EEE8AA"|
LightGoldenrodYellow#FAFAD2250250210bgcolor="#FAFAD2"|
LightYellow#FFFFE0255255224bgcolor="#FFFFE0"|
Yellow#FFFF002552550bgcolor="#FFFF00"|
Gold#FFD7002552150bgcolor="#FFD700"|
LightGoldenrod#EEDD82238221130bgcolor="#EEDD82"|
goldenrod#DAA52021816532bgcolor="#DAA520"|
DarkGoldenrod#B8860B18413411bgcolor="#B8860B"|
RosyBrown#BC8F8F188143143bgcolor="#BC8F8F"|
IndianRed#CD5C5C2059292bgcolor="#CD5C5C"|
SaddleBrown#8B45131396919bgcolor="#8B4513"|
Sienna#A0522D1608245bgcolor="#A0522D"|
Peru#CD853F20513363bgcolor="#CD853F"|
Burlywood#DEB887222184135bgcolor="#DEB887"|
Beige#F5F5DC245245220bgcolor="#F5F5DC"|
Wheat#F5DEB3245222179bgcolor="#F5DEB3"|
SandyBrown#F4A46024416496bgcolor="#F4A460"|
Tan#D2B48C210180140bgcolor="#D2B48C"|
Chocolate#D2691E21010530bgcolor="#D2691E"|
FireBrick#B222221783434bgcolor="#B22222"|
Brown#A52A2A1654242bgcolor="#A52A2A"|
DarkSalmon#E9967A233150122bgcolor="#E9967A"|
Salmon#FA8072250128114bgcolor="#FA8072"|
LightSalmon#FFA07A255160122bgcolor="#FFA07A"|
Orange#FFA5002551650bgcolor="#FFA500"|
DarkOrange#FF8C002551400bgcolor="#FF8C00"|
Coral#FF7F5025512780bgcolor="#FF7F50"|
LightCoral#F08080240128128bgcolor="#F08080"|
Tomato#FF63472559971bgcolor="#FF6347"|
OrangeRed#FF4500255690bgcolor="#FF4500"|
Red#FF000025500bgcolor="#FF0000"|
HotPink#FF69B4255105180bgcolor="#FF69B4"|
DeepPink#FF149325520147bgcolor="#FF1493"|
Pink#FFC0CB255192203bgcolor="#FFC0CB"|
LightPink#FFB6C1255182193bgcolor="#FFB6C1"|
PaleVioletRed#DB7093219112147bgcolor="#DB7093"|
Maroon#B030601764896bgcolor="#B03060"|
MediumVioletRed#C7158519921133bgcolor="#C71585"|
VioletRed#D0209020832144bgcolor="#D02090"|
Magenta#FF00FF2550255bgcolor="#FF00FF"|
Violet#EE82EE238130238bgcolor="#EE82EE"|
Plum#DDA0DD221160221bgcolor="#DDA0DD"|
Orchid#DA70D6218112214bgcolor="#DA70D6"|
MediumOrchid#BA55D318685211bgcolor="#BA55D3"|
DarkOrchid#9932CC15350204bgcolor="#9932CC"|
DarkViolet#9400D31480211bgcolor="#9400D3"|
BlueViolet#8A2BE213843226bgcolor="#8A2BE2"|
Purple#A020F016032240bgcolor="#A020F0"|
MediumPurple#9370DB147112219bgcolor="#9370DB"|
Thistle#D8BFD8216191216bgcolor="#D8BFD8"|



X.org 소스 코드에서 표준화된 X11 색상 이름[12]과 W3C 표준[13]을 따르는 브라우저에서 허용되는 이름 목록은 약간의 차이가 있다. 예를 들어, 'Gray'와 관련된 표기나 밝기 변형 등에서 차이를 보인다.

HTML에서 "gray"는 128,128,128로 정의되지만, X11에서는 190,190,190으로 정의되어 HTML의 "silver"에 가깝다. X11에는 "LightGrey" (211,211,211)와 "DarkGray" (169,169,169)도 정의되어 있는데, HTML의 "gray"는 X11의 "DarkGray"보다 어둡다.

.NET Framework에서는 거의 동일한 색상 이름이 사용되지만, DarkSeaGreen은 .NET에서 약 -13.3°C,1,880억,80억로 정의되어 X11의 약 -13.3°C,1,880억,약 -13.3°C와 차이가 있다.

4. 1. HTML/CSS 색상 이름

HTML과 CSS에서 사용되는 색상 이름과 그에 대한 RGB 값을 정리한 표이다. 웹 페이지에서 색상을 표현할 때는 색상 이름, HEX 코드, RGB 값 등을 사용할 수 있다.

색상 이름HEX 코드RGB색상 견본
White#FFFFFF255255255bgcolor="#FFFFFF"|
Snow#FFFAFA255250250bgcolor="#FFFAFA"|
GhostWhite#F8F8FF248248255bgcolor="#F8F8FF"|
WhiteSmoke#F5F5F5245245245bgcolor="#F5F5F5"|
Gainsboro#DCDCDC220220220bgcolor="#DCDCDC"|
FloralWhite#FFFAF0255250240bgcolor="#FFFAF0"|
OldLace#FDF5E6253245230bgcolor="#FDF5E6"|
Linen#FAF0E6250240230bgcolor="#FAF0E6"|
AntiqueWhite#FAEBD7250235215bgcolor="#FAEBD7"|
PapayaWhip#FFEFD5255239213bgcolor="#FFEFD5"|
BlanchedAlmond#FFEBCD255235205bgcolor="#FFEBCD"|
Bisque#FFE4C4255228196bgcolor="#FFE4C4"|
PeachPuff#FFDAB9255218185bgcolor="#FFDAB9"|
NavajoWhite#FFDEAD255222173bgcolor="#FFDEAD"|
Moccasin#FFE4B5255228181bgcolor="#FFE4B5"|
Cornsilk#FFF8DC255248220bgcolor="#FFF8DC"|
Ivory#FFFFF0255255240bgcolor="#FFFFF0"|
LemonChiffon#FFFACD255250205bgcolor="#FFFACD"|
Seashell#FFF5EE255245238bgcolor="#FFF5EE"|
Honeydew#F0FFF0240255240bgcolor="#F0FFF0"|
MintCream#F5FFFA245255250bgcolor="#F5FFFA"|
Azure#F0FFFF240255255bgcolor="#F0FFFF"|
AliceBlue#F0F8FF240248255bgcolor="#F0F8FF"|
lavender#E6E6FA230230250bgcolor="#E6E6FA"|
LavenderBlush#FFF0F5255240245bgcolor="#FFF0F5"|
MistyRose#FFE4E1255228225bgcolor="#FFE4E1"|
Black#000000000bgcolor="#000000"|
DarkSlateGray#2F4F4F477979bgcolor="#2F4F4F"|
DimGray#696969105105105bgcolor="#696969"|
SlateGray#708090112128144bgcolor="#708090"|
LightSlateGray#778899119136153bgcolor="#778899"|
Gray#BEBEBE190190190bgcolor="#BEBEBE"|
LightGray#D3D3D3211211211bgcolor="#D3D3D3"|
MidnightBlue#1919702525112bgcolor="#191970"|
NavyBlue#00008000128bgcolor="#000080"|
CornflowerBlue#6495ED100149237bgcolor="#6495ED"|
DarkSlateBlue#483D8B7261139bgcolor="#483D8B"|
SlateBlue#6A5ACD10690205bgcolor="#6A5ACD"|
MediumSlateBlue#7B68EE123104238bgcolor="#7B68EE"|
LightSlateBlue#8470FF132112255bgcolor="#8470FF"|
MediumBlue#0000CD00205bgcolor="#0000CD"|
RoyalBlue#4169E165105225bgcolor="#4169E1"|
Blue#0000FF00255bgcolor="#0000FF"|
DodgerBlue#1E90FF30144255bgcolor="#1E90FF"|
DeepSkyBlue#00BFFF0191255bgcolor="#00BFFF"|
SkyBlue#87CEEB135206235bgcolor="#87CEEB"|
LightSkyBlue#87CEFA135206250bgcolor="#87CEFA"|
SteelBlue#4682B470130180bgcolor="#4682B4"|
LightSteelBlue#B0C4DE176196222bgcolor="#B0C4DE"|
LightBlue#ADD8E6173216230bgcolor="#ADD8E6"|
PowderBlue#B0E0E6176224230bgcolor="#B0E0E6"|
PaleTurquoise#AFEEEE175238238bgcolor="#AFEEEE"|
DarkTurquoise#00CED10206209bgcolor="#00CED1"|
MediumTurquoise#48D1CC72209204bgcolor="#48D1CC"|
Turquoise#40E0D064224208bgcolor="#40E0D0"|
Cyan#00FFFF0255255bgcolor="#00FFFF"|
LightCyan#E0FFFF224255255bgcolor="#E0FFFF"|
CadetBlue#5F9EA095158160bgcolor="#5F9EA0"|
MediumAquamarine#66CDAA102205170bgcolor="#66CDAA"|
Aquamarine#7FFFD4127255212bgcolor="#7FFFD4"|
DarkGreen#00640001000bgcolor="#006400"|
DarkOliveGreen#556B2F8510747bgcolor="#556B2F"|
DarkSeaGreen#8FBC8F143188143bgcolor="#8FBC8F"|
SeaGreen#2E8B574613987bgcolor="#2E8B57"|
MediumSeaGreen#3CB37160179113bgcolor="#3CB371"|
LightSeaGreen#20B2AA32178170bgcolor="#20B2AA"|
PaleGreen#98FB98152251152bgcolor="#98FB98"|
SpringGreen#00FF7F0255127bgcolor="#00FF7F"|
LawnGreen#7CFC001242520bgcolor="#7CFC00"|
Green#00FF0002550bgcolor="#00FF00"|
Chartreuse#7FFF001272550bgcolor="#7FFF00"|
MedSpringGreen#00FA9A0250154bgcolor="#00FA9A"|
GreenYellow#ADFF2F17325547bgcolor="#ADFF2F"|
LimeGreen#32CD325020550bgcolor="#32CD32"|
YellowGreen#9ACD3215420550bgcolor="#9ACD32"|
ForestGreen#228B223413934bgcolor="#228B22"|
OliveDrab#6B8E2310714235bgcolor="#6B8E23"|
DarkKhaki#BDB76B189183107bgcolor="#BDB76B"|
PaleGoldenrod#EEE8AA238232170bgcolor="#EEE8AA"|
LightGoldenrodYellow#FAFAD2250250210bgcolor="#FAFAD2"|
LightYellow#FFFFE0255255224bgcolor="#FFFFE0"|
Yellow#FFFF002552550bgcolor="#FFFF00"|
Gold#FFD7002552150bgcolor="#FFD700"|
LightGoldenrod#EEDD82238221130bgcolor="#EEDD82"|
goldenrod#DAA52021816532bgcolor="#DAA520"|
DarkGoldenrod#B8860B18413411bgcolor="#B8860B"|
RosyBrown#BC8F8F188143143bgcolor="#BC8F8F"|
IndianRed#CD5C5C2059292bgcolor="#CD5C5C"|
SaddleBrown#8B45131396919bgcolor="#8B4513"|
Sienna#A0522D1608245bgcolor="#A0522D"|
Peru#CD853F20513363bgcolor="#CD853F"|
Burlywood#DEB887222184135bgcolor="#DEB887"|
Beige#F5F5DC245245220bgcolor="#F5F5DC"|
Wheat#F5DEB3245222179bgcolor="#F5DEB3"|
SandyBrown#F4A46024416496bgcolor="#F4A460"|
Tan#D2B48C210180140bgcolor="#D2B48C"|
Chocolate#D2691E21010530bgcolor="#D2691E"|
FireBrick#B222221783434bgcolor="#B22222"|
Brown#A52A2A1654242bgcolor="#A52A2A"|
DarkSalmon#E9967A233150122bgcolor="#E9967A"|
Salmon#FA8072250128114bgcolor="#FA8072"|
LightSalmon#FFA07A255160122bgcolor="#FFA07A"|
Orange#FFA5002551650bgcolor="#FFA500"|
DarkOrange#FF8C002551400bgcolor="#FF8C00"|
Coral#FF7F5025512780bgcolor="#FF7F50"|
LightCoral#F08080240128128bgcolor="#F08080"|
Tomato#FF63472559971bgcolor="#FF6347"|
OrangeRed#FF4500255690bgcolor="#FF4500"|
Red#FF000025500bgcolor="#FF0000"|
HotPink#FF69B4255105180bgcolor="#FF69B4"|
DeepPink#FF149325520147bgcolor="#FF1493"|
Pink#FFC0CB255192203bgcolor="#FFC0CB"|
LightPink#FFB6C1255182193bgcolor="#FFB6C1"|
PaleVioletRed#DB7093219112147bgcolor="#DB7093"|
Maroon#B030601764896bgcolor="#B03060"|
MediumVioletRed#C7158519921133bgcolor="#C71585"|
VioletRed#D0209020832144bgcolor="#D02090"|
Magenta#FF00FF2550255bgcolor="#FF00FF"|
Violet#EE82EE238130238bgcolor="#EE82EE"|
Plum#DDA0DD221160221bgcolor="#DDA0DD"|
Orchid#DA70D6218112214bgcolor="#DA70D6"|
MediumOrchid#BA55D318685211bgcolor="#BA55D3"|
DarkOrchid#9932CC15350204bgcolor="#9932CC"|
DarkViolet#9400D31480211bgcolor="#9400D3"|
BlueViolet#8A2BE213843226bgcolor="#8A2BE2"|
Purple#A020F016032240bgcolor="#A020F0"|
MediumPurple#9370DB147112219bgcolor="#9370DB"|
Thistle#D8BFD8216191216bgcolor="#D8BFD8"|



X.org 소스 코드에서 표준화된 X11 색상 이름[12]과 W3C 표준[13]을 따르는 브라우저에서 허용되는 이름 목록은 약간의 차이가 있다. 예를 들어, 'Gray'와 관련된 표기나 밝기 변형 등에서 차이를 보인다.

4. 2. 웹 색상의 종류와 특징

웹 색상은 웹 디자인에 사용되는 다양한 색상을 의미하며, 안전한 웹 색상, 확장 웹 색상 등 여러 종류가 있다.

색상 이름RGB 좌표16진수(HEX) 코드
RGB
Snow255250250#FFFAFA
GhostWhite248248255#F8F8FF
WhiteSmoke245245245#F5F5F5
Gainsboro220220220#DCDCDC
FloralWhite255250240#FFFAF0
OldLace253245230#FDF5E6
Linen250240230#FAF0E6
AntiqueWhite250235215#FAEBD7
PapayaWhip255239213#FFEFD5
BlanchedAlmond255235205#FFEBCD
Bisque255228196#FFE4C4
PeachPuff255218185#FFDAB9
NavajoWhite255222173#FFDEAD
Moccasin255228181#FFE4B5
Cornsilk255248220#FFF8DC
Ivory255255240#FFFFF0
LemonChiffon255250205#FFFACD
Seashell255245238#FFF5EE
Honeydew240255240#F0FFF0
MintCream245255250#F5FFFA
Azure240255255#F0FFFF
AliceBlue240248255#F0F8FF
lavender230230250#E6E6FA
LavenderBlush255240245#FFF0F5
MistyRose255228225#FFE4E1
White255255255#FFFFFF
Black000#000000
DarkSlateGray477979#2F4F4F
DimGray105105105#696969
SlateGray112128144#708090
LightSlateGray119136153#778899
Gray190190190#BEBEBE
LightGray211211211#D3D3D3
MidnightBlue2525112#191970
NavyBlue00128#000080
CornflowerBlue100149237#6495ED
DarkSlateBlue7261139#483D8B
SlateBlue10690205#6A5ACD
MediumSlateBlue123104238#7B68EE
LightSlateBlue132112255#8470FF
MediumBlue00205#0000CD
RoyalBlue65105225#4169E1
Blue00255#0000FF
DodgerBlue30144255#1E90FF
DeepSkyBlue0191255#00BFFF
SkyBlue135206235#87CEEB
LightSkyBlue135206250#87CEFA
SteelBlue70130180#4682B4
LightSteelBlue176196222#B0C4DE
LightBlue173216230#ADD8E6
PowderBlue176224230#B0E0E6
PaleTurquoise175238238#AFEEEE
DarkTurquoise0206209#00CED1
MediumTurquoise72209204#48D1CC
Turquoise64224208#40E0D0
Cyan0255255#00FFFF
LightCyan224255255#E0FFFF
CadetBlue95158160#5F9EA0
MediumAquamarine102205170#66CDAA
Aquamarine127255212#7FFFD4
DarkGreen01000#006400
DarkOliveGreen8510747#556B2F
DarkSeaGreen143188143#8FBC8F
SeaGreen4613987#2E8B57
MediumSeaGreen60179113#3CB371
LightSeaGreen32178170#20B2AA
PaleGreen152251152#98FB98
SpringGreen0255127#00FF7F
LawnGreen1242520#7CFC00
Green02550#00FF00
Chartreuse1272550#7FFF00
MedSpringGreen0250154#00FA9A
GreenYellow17325547#ADFF2F
LimeGreen5020550#32CD32
YellowGreen15420550#9ACD32
ForestGreen3413934#228B22
OliveDrab10714235#6B8E23
DarkKhaki189183107#BDB76B
PaleGoldenrod238232170#EEE8AA
LightGoldenrodYellow250250210#FAFAD2
LightYellow255255224#FFFFE0
Yellow2552550#FFFF00
Gold2552150#FFD700
LightGoldenrod238221130#EEDD82
goldenrod21816532#DAA520
DarkGoldenrod18413411#B8860B
RosyBrown188143143#BC8F8F
IndianRed2059292#CD5C5C
SaddleBrown1396919#8B4513
Sienna1608245#A0522D
Peru20513363#CD853F
Burlywood222184135#DEB887
Beige245245220#F5F5DC
Wheat245222179#F5DEB3
SandyBrown24416496#F4A460
Tan210180140#D2B48C
Chocolate21010530#D2691E
FireBrick1783434#B22222
Brown1654242#A52A2A
DarkSalmon233150122#E9967A
Salmon250128114#FA8072
LightSalmon255160122#FFA07A
Orange2551650#FFA500
DarkOrange2551400#FF8C00
Coral25512780#FF7F50
LightCoral240128128#F08080
Tomato2559971#FF6347
OrangeRed255690#FF4500
Red25500#FF0000
HotPink255105180#FF69B4
DeepPink25520147#FF1493
Pink255192203#FFC0CB
LightPink255182193#FFB6C1
PaleVioletRed219112147#DB7093
Maroon1764896#B03060
MediumVioletRed19921133#C71585
VioletRed20832144#D02090
Magenta2550255#FF00FF
Violet238130238#EE82EE
Plum221160221#DDA0DD
Orchid218112214#DA70D6
MediumOrchid18685211#BA55D3
DarkOrchid15350204#9932CC
DarkViolet1480211#9400D3
BlueViolet13843226#8A2BE2
Purple16032240#A020F0
MediumPurple147112219#9370DB
Thistle216191216#D8BFD8



HTML/CSS 표준을 따르는 웹 브라우저에서 일반화된 "X11 색상"은 위와 같다. RGB 값은 0부터 255 범위로 정규화되어 있다.

.NET Framework에서는 거의 동일한 색상 이름이 사용되지만, DarkSeaGreen은 .NET에서 8F,BC,8B로 정의되어 X11의 8F,BC,8F와 차이가 있다.

HTML에서 "gray"는 128,128,128로 정의되지만, X11에서는 190,190,190으로 정의되어 HTML의 "silver"에 가깝다. X11에는 "LightGrey" (211,211,211)와 "DarkGray" (169,169,169)도 정의되어 있는데, HTML의 "gray"는 X11의 "DarkGray"보다 어둡다.

5. 색상 이름 충돌 및 해결 방안

모자이크 및 넷스케이프 내비게이터와 같은 초기 웹 브라우저들은 X11 색상 시스템을 기반으로 웹 색상 목록을 작성했다. W3C의 SVG 및 CSS 레벨 3 모듈 색상 사양도 X11 목록을 채택하면서 일부 변경 사항이 적용되었다.[7]

X11과 W3C 간에는 몇 가지 주목할 만한 차이점이 있는데, 특히 "Gray"와 그 변형 색상들에서 두드러진다. HTML에서 "Gray"는 50% 회색()으로 예약되어 있지만, X11에서는 "gray"가 74.5% 회색()으로 할당되어 W3C의 "Silver"(75.3%, )와 가깝다. X11의 "Light Gray"는 83%()이고, "Dark Gray"는 66%()이다.

이러한 차이로 인해 오늘날 웹에서 사용되는 CSS 3.0 색상 목록에서는 "Dark Gray"()가 "Gray"()보다 밝게 표현된다.[8] 이는 "Dark Gray"가 X11에서 유래되었고, "Gray"는 HTML에서 유래되었기 때문이다.

최근 X 릴리스(2014년 이후)에서는 W3C 정의도 지원하며, 혼란을 줄이기 위해 충돌하는 이름에는 "Web" 또는 "X11" 접두사를 추가했다. 예를 들어, "X11 Gray" = "Gray" ≠ "Web Gray"이다. W3C는 또한 X11의 "Green"과 같지만 "Lime"이라고 불리는 색상을 정의했는데, X11에서는 이전에 그런 이름이 없었으므로 "Lime"은 "Green"의 별칭으로 사용된다. 즉, "Lime" = "Green" = "X11 Green" ≠ "Web Green"이다.

여러 이름이 있는 색상
W3C 이름색상X11 이름
16진수빨강녹색파랑샘플
라임[11]#00FF000%100%0%style="background:#00FF00"|Green
자홍색[11]#FF00FF100%0%100%style="background:#FF00FF;"|Magenta
청록색[11]#00FFFF0%100%100%style="background:#00FFFF"|Cyan



충돌하는 정의가 있는 색상 이름
색상 이름X11 색상W3C 색상
16진수빨강녹색파랑샘플샘플16진수빨강녹색파랑
Gray#BEBEBE75%75%75%style="background:#BEBEBE;"|style="background:grey;"|#80808050%50%50%
Green#00FF000%100%0%style="background:#00FF00;"|style="background:green;"|#0080000%50%0%
적갈색#B0306069%19%38%style="background:#B03060;"|style="background:#800000;"|#80000050%0%0%
Purple#A020F063%13%94%style="background:#A020F0;"|style="background:#800080;"|#80808050%0%50%


5. 1. Gray 색상 충돌

모자이크 및 넷스케이프 내비게이터 초기 버전은 X11 색상을 웹 색상의 기반으로 사용했다. W3C의 SVG 및 CSS 레벨 3 모듈 색상 사양도 일부 변경을 거쳐 X11 목록을 채택했다.[7]

X11과 W3C 표준 간의 가장 큰 차이점 중 하나는 "Gray" 색상의 정의이다.

  • HTML에서 "Gray"는 50% 회색()으로 정의된다.
  • X11에서 "Gray"는 74.5% 회색()으로 정의되며, 이는 W3C의 "Silver" (75.3%, )와 유사하다.
  • X11의 "Light Gray"는 83%()이고, "Dark Gray"는 66%()이다.


이러한 차이로 인해 웹에서 사용되는 CSS 3.0 색상 목록에서는 "Dark Gray"()가 "Gray"()보다 밝게 표현된다.[8] 이는 "Dark Gray"가 X11에서 유래되었고, "Gray"는 HTML에서 유래되었기 때문이다.

최근 X 릴리스(2014년 이후)에서는 W3C 정의도 지원하며, 혼란을 줄이기 위해 충돌하는 이름에는 "Web" 또는 "X11" 접두사를 추가했다. 예를 들어, "X11 Gray" = "Gray" ≠ "Web Gray"이다.

충돌하는 정의가 있는 색상 이름
색상 이름X11 색상W3C 색상
16진수빨강녹색파랑샘플샘플16진수빨강녹색파랑
Gray#BEBEBE75%75%75%style="background:#BEBEBE;"|style="background:grey;"|#80808050%50%50%
Green#00FF000%100%0%style="background:#00FF00;"|style="background:green;"|#0080000%50%0%
적갈색#B0306069%19%38%style="background:#B03060;"|style="background:#800000;"|#80000050%0%0%
Purple#A020F063%13%94%style="background:#A020F0;"|style="background:#800080;"|#80008050%0%50%


5. 2. 색상 이름 접두사 사용

X11 색상 이름에서 "Dark", "Light"와 같은 접두사는 색상의 명도를 조절하여 더 다양하게 표현하기 위해 사용된다. 예를 들어, DarkSeaGreen은 일반적인 SeaGreen보다 더 어두운 색상을 나타낸다.

하지만 이러한 접두사를 사용할 때 몇 가지 주의할 점이 있다. X11와 HTML/CSS에서 "gray"와 관련된 색상 이름의 정의가 다르다.

  • Gray:
  • X11에서 "gray"는 190, 190, 190 (16진수 #BEBEBE)로 정의되어 HTML의 "silver"에 가깝다.
  • HTML에서 "gray"는 128, 128, 128 (16진수 #808080)로 정의되어 X11의 "DarkGray"보다 어둡다.
  • LightGrey/DarkGray:
  • X11에는 "LightGrey" (211, 211, 211)와 "DarkGray" (169, 169, 169)가 존재한다.


.NET Framework의 KnownColor와 Color에서도 거의 동일한 색상 이름이 사용되지만, "DarkSeaGreen"은 .NET에서 8F, BC, 8B로 정의되어 X11의 8F, BC, 8F와 약간의 차이가 있다.

색상 이름X11 정의HTML/CSS 정의.NET Framework 정의
Gray190, 190, 190 (#BEBEBE)128, 128, 128 (#808080)(정의되지 않음)
DarkGray169, 169, 169(정의되지 않음)(정의되지 않음)
LightGrey211, 211, 211(정의되지 않음)(정의되지 않음)
DarkSeaGreen143, 188, 143 (#8FBC8F)(정의되지 않음)143, 188, 139 (#8FBC8B)



따라서, 일관성 유지를 위해 환경에 따라 색상 이름을 사용할 때 주의가 필요하다.

6. 색상의 다양한 변형

X11 색상에는 기본 색상을 기반으로 다양한 변형 색상이 존재한다. 회색조(Gray Scale)는 검정(`gray0`)부터 흰색(`gray100`)까지 101단계로 정의된다. 기본 색상 이름에 1, 2, 3, 4를 붙여 만든 'Color1', 'Color2', 'Color3', 'Color4' 형태의 변형도 있다. 예를 들어 `yellow`는 `yellow1`, `yellow2`, `yellow3`, `yellow4`로 변형된다. 이러한 색상 변형은 W3C 표준은 아니며, 일부 브라우저에서는 지원되지 않을 수 있다.

6. 1. 회색조 (Gray Scale)

HTML에서 "Gray"는 검은색과 흰색을 정확히 1:1 비율로 섞은 (128, 128, 128)로 정의되지만, X11에서의 "Gray"는 HTML에서의 "Silver"(192, 192, 192)에 가까운 (190, 190, 190)으로 정의된다. HTML에서의 "Gray"는 X11에서의 "LightGray" (211, 211, 211), "DarkGray" (169, 169, 169)보다 더 어둡다.

X11 색 이름에서 회색조(그레이)는 '''gray0'''(검정)부터 '''gray100'''(흰색)까지 101단계로 정의되어 있다. 계조는 `grayN := round(N*255/100)`라는 식으로 정의된다. 예를 들어 '''gray96''' (#F5F5F5영어, 245)는 '''WhiteSmoke'''와 같으며, '''dimgray'''는 '''gray41''' (#696969영어, 105)와 같다.

Gray''n''의 RGB 값은 (255 × ''n'' / 100, 255 × ''n'' / 100, 255 × ''n'' / 100)이다. 이때 ''n''이 가질 수 있는 값은 0, 1, 2, ..., 99, 100이다. n이 0에 가까울수록 검은색에 가깝고, 100에 가까울수록 흰색에 가깝다. 예를 들어 Gray30은 채도가 0%, 명도가 30%이므로 ''k'' = 255 × 30 / 100 = 76.5에서 Gray30의 RGB값은 (77, 77, 77)이고, X11 회색에 가장 가까운 Gray75의 RGB값은 (191, 191, 191)이다.

'''gray''' (#BEBEBE영어, 190)는 '''gray74''' (#BDBDBD영어, 189)와 '''gray75''' (#BFBFBF영어, 191)의 중간에 위치하며, '''darkgray''' (#A9A9A9영어, 169)는 '''gray66''' (#A8A8A8영어, 168)과는 미묘하게 다르며, '''lightgrey''' (#D3D3D3영어, 211)도 '''gray83''' (#D4D4D4영어, 212)와는 미묘하게 다르다.

6. 2. 번호가 매겨진 색상 변형

X11 색상 중 기본 색상 이름 뒤에 1, 2, 3, 4를 붙여 만든 'Color1', 'Color2', 'Color3', 'Color4' 형태의 색상 변형들이 있다. Color1은 기본 색상의 HSV 상 명도(Value)를 100%로 변경한 색이며, Color2, Color3, Color4는 각각 기본 색상의 명도를 93.2%, 80.4%, 54.8%로 변경한 색이다.

RGB 색 공간에서는 R, G, B 값을 모두 변경하여 색상을 조절한다. Color1은 기본 색상의 RGB 값 중 가장 큰 값을 255로 맞추고, Color2, Color3, Color4는 Color1의 RGB 값에 각각 0.932, 0.804, 0.548을 곱하여 계산한다.

계산식은 다음과 같다.

  • Color1 = Color의 RGB를 구성하는 각 R, G, B 좌표 중 가장 큰 값의 좌표를 ''L''이라고 할 때 R, G, B 좌표에 모두 (255/''L'')을 곱하여 어느 한 쪽을 255로 맞춘다.
  • Color2 = Color1 × 0.932
  • Color3 = Color1 × 0.804
  • Color4 = Color1 × 0.548


각 색상의 예시는 다음과 같다.

  • '''ivory''' (ivory|아이보리영어) (255 255 240)의 경우, 255에 0.804를 곱한 205.2와 240에 0.804를 곱한 192.96을 바탕으로 '''ivory3''' (205 205 193)이 만들어진다.
  • '''azure''' (azure|애저영어) (240 255 255)의 경우, 255에 0.548를 곱한 139.74와 240에 0.548를 곱한 131.52를 바탕으로 '''azure4''' (131 139 139)가 만들어진다.
  • '''yellow''' (yellow|옐로영어) (255 255 0)의 경우, 255에 0.932를 곱한 237.66을 바탕으로 '''yellow2''' (238 238 0)이 만들어진다.


이러한 색상 변형은 W3C 표준은 아니며, 일부 브라우저에서는 지원되지 않을 수 있다.

7. 색상 관련 추가 정보

RGB 외에도 HSL과 HSV 같은 색상 모델이 있다. X11 색 이름에서는 기본 색상을 수정하여 새로운 색상을 정의하기도 한다. 예를 들어 Gray''n'' (n은 0부터 100 사이의 정수)은 (255 * n/100, 255 * n/100, 255 * n/100)의 RGB 값을 가진다. Gray30은 RGB 값이 (77, 77, 77)이고, X11 회색에 가장 가까운 Gray75는 RGB 값이 (191, 191, 191)이다.

Gray 계열이 아닌 기본 색상의 경우, 색상 이름 뒤에 1, 2, 3, 4를 붙여 'Color1', 'Color2', 'Color3', 'Color4'와 같이 표현한다.

7. 1. HSL, HSV 색상 모델

RGB 외에 색상을 표현하는 또 다른 방식인 HSL과 HSV 색상 모델이 있다. HSL과 HSV는 각각 색상(Hue), 채도(Saturation), 명도(Lightness/Value)로 구성된다.

  • 색상(Hue): 빨강, 파랑, 초록 등 색의 종류를 나타낸다.
  • 채도(Saturation): 색의 순도를 나타내며, 채도가 높을수록 색이 선명해지고 낮을수록 탁해진다.
  • 명도(Lightness/Value): 색의 밝기를 나타내며, 명도가 높을수록 밝아지고 낮을수록 어두워진다.


RGB 모델이 빨강, 초록, 파랑의 조합으로 색을 표현하는 반면, HSL과 HSV 모델은 색상, 채도, 명도의 조합으로 색을 표현한다.

X11 색 이름에서는 기본 색상을 수정하여 새로운 색상을 정의하기도 한다. 예를 들어, Gray''n'' (n은 0부터 100 사이의 정수)은 RGB 값이 (255 * n/100, 255 * n/100, 255 * n/100)으로 계산된다. n이 0에 가까울수록 검은색, 100에 가까울수록 흰색에 가깝다. Gray30은 RGB 값이 (77, 77, 77)이고, X11 회색에 가장 가까운 Gray75는 RGB 값이 (191, 191, 191)이다.

Gray 계열이 아닌 기본 색상의 경우, 색상 이름 뒤에 1, 2, 3, 4를 붙여 'Color1', 'Color2', 'Color3', 'Color4'와 같이 표현한다. 이때, HSV 색 공간에서는 명도 값을 변경하여 색을 조절하지만, RGB 색 공간에서는 R, G, B 값을 모두 변경해야 한다.

  • Color1은 기본 색상의 HSV 상 명도(Value)를 100%로 변경한 색이다.
  • Color2, Color3, Color4는 각각 기본 색상의 명도를 93.2%, 80.4%, 54.8%로 변경한 색이다.

참조

[1] 뉴스 "Tomato" versus "#FF6347"—the tragicomic history of CSS color names https://arstechnica.[...] 2015-10-11
[2] 서적 Xlib programming manual : for version 11 of the X Window System https://archive.org/[...] O'Reilly & Associates
[3] 웹사이트 ModuleVersions http://xorg.freedesk[...] 2014-08-21
[4] 웹사이트 Remove all traces of external RGB database (and Speedo) https://gitlab.freed[...] 2014-08-26
[5] 웹사이트 ~alanc/xc-historical - Partial/incomplete import of X consortium historical RCS up to X11R6.0 http://cgit.freedesk[...]
[6] 웹사이트 Last call comments on CSS3 module: color http://lists.w3.org/[...] World Wide Web Consortium 2014-03-12
[7] 웹사이트 Netscape.com http://wp.netscape.c[...] Wp.netscape.com 2013-08-14
[8] 웹사이트 Cascading Style Sheets, level 1 https://www.w3.org/T[...] 2016-11-15
[9] 웹사이트 CSS Color Module Level 4 https://drafts.csswg[...] 2016-11-15
[10] 웹사이트 Add aliases for colors that differ between X11 and CSS · freedesktop/xorg-rgb@ca05c39 https://github.com/f[...]
[11] 문서 HTML 4.0: Basic HTML data types https://www.w3.org/T[...]
[12] 문서 Current official rgb.txt from the X.org source tree at Freedesktop.org https://gitlab.freed[...]
[13] 웹사이트 Lists.w3.org http://lists.w3.org/[...] w3.org 2013-08-14
[14] 웹사이트 rgb.txt https://cgit.freedes[...] X.Org Foundation 2017-09-18
[15] 웹사이트 others/old-rgb.txt https://cgit.freedes[...] X.Org Foundation 2017-09-18
[16] 웹사이트 others/raveling.txt https://cgit.freedes[...] X.Org Foundation 2017-09-18
[17] 웹사이트 others/README https://cgit.freedes[...] X.Org Foundation 2017-09-18
[18] 간행물 Job Ticket Application Programming Interface (JTAPI) http://ftp.pwg.org/p[...] 2005-03-15
[19] 웹사이트 X(7) manual page http://www.xfree86.o[...]
[20] 웹사이트 Re: color names in SVG-1.0 conflict with /usr/lib/X11/rgb.txt from Chris Lilley on 2002-04-24 (www-svg@w3.org from April 2002) http://lists.w3.org/[...]


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com