X11 색 이름

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

1. 개요
2. 색상 표현의 기본 원리
- 2.1. RGB 색상 모델
- 2.2. 16진수 (HEX) 코드
3. X11 색상 체계
- 3.1. X11 색상 이름
- 3.2. X11 색상과 웹 색상의 차이
4. 웹 색상 체계 (HTML/CSS)
- 4.1. HTML/CSS 색상 이름
- 4.2. 웹 색상의 종류와 특징
5. 색상 이름 충돌 및 해결 방안
- 5.1. Gray 색상 충돌
- 5.2. 색상 이름 접두사 사용
6. 색상의 다양한 변형
- 6.1. 회색조 (Gray Scale)
- 6.2. 번호가 매겨진 색상 변형
7. 색상 관련 추가 정보
- 7.1. HSL, HSV 색상 모델
참조

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").

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

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

색상 이름	HEX 코드	R	G	B	색상 견본
White	#FFFFFF	255	255	255	bgcolor="#FFFFFF"\|
Snow	#FFFAFA	255	250	250	bgcolor="#FFFAFA"\|
GhostWhite	#F8F8FF	248	248	255	bgcolor="#F8F8FF"\|
WhiteSmoke	#F5F5F5	245	245	245	bgcolor="#F5F5F5"\|
Gainsboro	#DCDCDC	220	220	220	bgcolor="#DCDCDC"\|
FloralWhite	#FFFAF0	255	250	240	bgcolor="#FFFAF0"\|
OldLace	#FDF5E6	253	245	230	bgcolor="#FDF5E6"\|
Linen	#FAF0E6	250	240	230	bgcolor="#FAF0E6"\|
AntiqueWhite	#FAEBD7	250	235	215	bgcolor="#FAEBD7"\|
PapayaWhip	#FFEFD5	255	239	213	bgcolor="#FFEFD5"\|
BlanchedAlmond	#FFEBCD	255	235	205	bgcolor="#FFEBCD"\|
Bisque	#FFE4C4	255	228	196	bgcolor="#FFE4C4"\|
PeachPuff	#FFDAB9	255	218	185	bgcolor="#FFDAB9"\|
NavajoWhite	#FFDEAD	255	222	173	bgcolor="#FFDEAD"\|
Moccasin	#FFE4B5	255	228	181	bgcolor="#FFE4B5"\|
Cornsilk	#FFF8DC	255	248	220	bgcolor="#FFF8DC"\|
Ivory	#FFFFF0	255	255	240	bgcolor="#FFFFF0"\|
LemonChiffon	#FFFACD	255	250	205	bgcolor="#FFFACD"\|
Seashell	#FFF5EE	255	245	238	bgcolor="#FFF5EE"\|
Honeydew	#F0FFF0	240	255	240	bgcolor="#F0FFF0"\|
MintCream	#F5FFFA	245	255	250	bgcolor="#F5FFFA"\|
Azure	#F0FFFF	240	255	255	bgcolor="#F0FFFF"\|
AliceBlue	#F0F8FF	240	248	255	bgcolor="#F0F8FF"\|
lavender	#E6E6FA	230	230	250	bgcolor="#E6E6FA"\|
LavenderBlush	#FFF0F5	255	240	245	bgcolor="#FFF0F5"\|
MistyRose	#FFE4E1	255	228	225	bgcolor="#FFE4E1"\|
Black	#000000	0	0	0	bgcolor="#000000"\|
DarkSlateGray	#2F4F4F	47	79	79	bgcolor="#2F4F4F"\|
DimGray	#696969	105	105	105	bgcolor="#696969"\|
SlateGray	#708090	112	128	144	bgcolor="#708090"\|
LightSlateGray	#778899	119	136	153	bgcolor="#778899"\|
Gray	#BEBEBE	190	190	190	bgcolor="#BEBEBE"\|
LightGray	#D3D3D3	211	211	211	bgcolor="#D3D3D3"\|
MidnightBlue	#191970	25	25	112	bgcolor="#191970"\|
NavyBlue	#000080	0	0	128	bgcolor="#000080"\|
CornflowerBlue	#6495ED	100	149	237	bgcolor="#6495ED"\|
DarkSlateBlue	#483D8B	72	61	139	bgcolor="#483D8B"\|
SlateBlue	#6A5ACD	106	90	205	bgcolor="#6A5ACD"\|
MediumSlateBlue	#7B68EE	123	104	238	bgcolor="#7B68EE"\|
LightSlateBlue	#8470FF	132	112	255	bgcolor="#8470FF"\|
MediumBlue	#0000CD	0	0	205	bgcolor="#0000CD"\|
RoyalBlue	#4169E1	65	105	225	bgcolor="#4169E1"\|
Blue	#0000FF	0	0	255	bgcolor="#0000FF"\|
DodgerBlue	#1E90FF	30	144	255	bgcolor="#1E90FF"\|
DeepSkyBlue	#00BFFF	0	191	255	bgcolor="#00BFFF"\|
SkyBlue	#87CEEB	135	206	235	bgcolor="#87CEEB"\|
LightSkyBlue	#87CEFA	135	206	250	bgcolor="#87CEFA"\|
SteelBlue	#4682B4	70	130	180	bgcolor="#4682B4"\|
LightSteelBlue	#B0C4DE	176	196	222	bgcolor="#B0C4DE"\|
LightBlue	#ADD8E6	173	216	230	bgcolor="#ADD8E6"\|
PowderBlue	#B0E0E6	176	224	230	bgcolor="#B0E0E6"\|
PaleTurquoise	#AFEEEE	175	238	238	bgcolor="#AFEEEE"\|
DarkTurquoise	#00CED1	0	206	209	bgcolor="#00CED1"\|
MediumTurquoise	#48D1CC	72	209	204	bgcolor="#48D1CC"\|
Turquoise	#40E0D0	64	224	208	bgcolor="#40E0D0"\|
Cyan	#00FFFF	0	255	255	bgcolor="#00FFFF"\|
LightCyan	#E0FFFF	224	255	255	bgcolor="#E0FFFF"\|
CadetBlue	#5F9EA0	95	158	160	bgcolor="#5F9EA0"\|
MediumAquamarine	#66CDAA	102	205	170	bgcolor="#66CDAA"\|
Aquamarine	#7FFFD4	127	255	212	bgcolor="#7FFFD4"\|
DarkGreen	#006400	0	100	0	bgcolor="#006400"\|
DarkOliveGreen	#556B2F	85	107	47	bgcolor="#556B2F"\|
DarkSeaGreen	#8FBC8F	143	188	143	bgcolor="#8FBC8F"\|
SeaGreen	#2E8B57	46	139	87	bgcolor="#2E8B57"\|
MediumSeaGreen	#3CB371	60	179	113	bgcolor="#3CB371"\|
LightSeaGreen	#20B2AA	32	178	170	bgcolor="#20B2AA"\|
PaleGreen	#98FB98	152	251	152	bgcolor="#98FB98"\|
SpringGreen	#00FF7F	0	255	127	bgcolor="#00FF7F"\|
LawnGreen	#7CFC00	124	252	0	bgcolor="#7CFC00"\|
Green	#00FF00	0	255	0	bgcolor="#00FF00"\|
Chartreuse	#7FFF00	127	255	0	bgcolor="#7FFF00"\|
MedSpringGreen	#00FA9A	0	250	154	bgcolor="#00FA9A"\|
GreenYellow	#ADFF2F	173	255	47	bgcolor="#ADFF2F"\|
LimeGreen	#32CD32	50	205	50	bgcolor="#32CD32"\|
YellowGreen	#9ACD32	154	205	50	bgcolor="#9ACD32"\|
ForestGreen	#228B22	34	139	34	bgcolor="#228B22"\|
OliveDrab	#6B8E23	107	142	35	bgcolor="#6B8E23"\|
DarkKhaki	#BDB76B	189	183	107	bgcolor="#BDB76B"\|
PaleGoldenrod	#EEE8AA	238	232	170	bgcolor="#EEE8AA"\|
LightGoldenrodYellow	#FAFAD2	250	250	210	bgcolor="#FAFAD2"\|
LightYellow	#FFFFE0	255	255	224	bgcolor="#FFFFE0"\|
Yellow	#FFFF00	255	255	0	bgcolor="#FFFF00"\|
Gold	#FFD700	255	215	0	bgcolor="#FFD700"\|
LightGoldenrod	#EEDD82	238	221	130	bgcolor="#EEDD82"\|
goldenrod	#DAA520	218	165	32	bgcolor="#DAA520"\|
DarkGoldenrod	#B8860B	184	134	11	bgcolor="#B8860B"\|
RosyBrown	#BC8F8F	188	143	143	bgcolor="#BC8F8F"\|
IndianRed	#CD5C5C	205	92	92	bgcolor="#CD5C5C"\|
SaddleBrown	#8B4513	139	69	19	bgcolor="#8B4513"\|
Sienna	#A0522D	160	82	45	bgcolor="#A0522D"\|
Peru	#CD853F	205	133	63	bgcolor="#CD853F"\|
Burlywood	#DEB887	222	184	135	bgcolor="#DEB887"\|
Beige	#F5F5DC	245	245	220	bgcolor="#F5F5DC"\|
Wheat	#F5DEB3	245	222	179	bgcolor="#F5DEB3"\|
SandyBrown	#F4A460	244	164	96	bgcolor="#F4A460"\|
Tan	#D2B48C	210	180	140	bgcolor="#D2B48C"\|
Chocolate	#D2691E	210	105	30	bgcolor="#D2691E"\|
FireBrick	#B22222	178	34	34	bgcolor="#B22222"\|
Brown	#A52A2A	165	42	42	bgcolor="#A52A2A"\|
DarkSalmon	#E9967A	233	150	122	bgcolor="#E9967A"\|
Salmon	#FA8072	250	128	114	bgcolor="#FA8072"\|
LightSalmon	#FFA07A	255	160	122	bgcolor="#FFA07A"\|
Orange	#FFA500	255	165	0	bgcolor="#FFA500"\|
DarkOrange	#FF8C00	255	140	0	bgcolor="#FF8C00"\|
Coral	#FF7F50	255	127	80	bgcolor="#FF7F50"\|
LightCoral	#F08080	240	128	128	bgcolor="#F08080"\|
Tomato	#FF6347	255	99	71	bgcolor="#FF6347"\|
OrangeRed	#FF4500	255	69	0	bgcolor="#FF4500"\|
Red	#FF0000	255	0	0	bgcolor="#FF0000"\|
HotPink	#FF69B4	255	105	180	bgcolor="#FF69B4"\|
DeepPink	#FF1493	255	20	147	bgcolor="#FF1493"\|
Pink	#FFC0CB	255	192	203	bgcolor="#FFC0CB"\|
LightPink	#FFB6C1	255	182	193	bgcolor="#FFB6C1"\|
PaleVioletRed	#DB7093	219	112	147	bgcolor="#DB7093"\|
Maroon	#B03060	176	48	96	bgcolor="#B03060"\|
MediumVioletRed	#C71585	199	21	133	bgcolor="#C71585"\|
VioletRed	#D02090	208	32	144	bgcolor="#D02090"\|
Magenta	#FF00FF	255	0	255	bgcolor="#FF00FF"\|
Violet	#EE82EE	238	130	238	bgcolor="#EE82EE"\|
Plum	#DDA0DD	221	160	221	bgcolor="#DDA0DD"\|
Orchid	#DA70D6	218	112	214	bgcolor="#DA70D6"\|
MediumOrchid	#BA55D3	186	85	211	bgcolor="#BA55D3"\|
DarkOrchid	#9932CC	153	50	204	bgcolor="#9932CC"\|
DarkViolet	#9400D3	148	0	211	bgcolor="#9400D3"\|
BlueViolet	#8A2BE2	138	43	226	bgcolor="#8A2BE2"\|
Purple	#A020F0	160	32	240	bgcolor="#A020F0"\|
MediumPurple	#9370DB	147	112	219	bgcolor="#9370DB"\|
Thistle	#D8BFD8	216	191	216	bgcolor="#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 코드	R	G	B	색상 견본
White	#FFFFFF	255	255	255	bgcolor="#FFFFFF"\|
Snow	#FFFAFA	255	250	250	bgcolor="#FFFAFA"\|
GhostWhite	#F8F8FF	248	248	255	bgcolor="#F8F8FF"\|
WhiteSmoke	#F5F5F5	245	245	245	bgcolor="#F5F5F5"\|
Gainsboro	#DCDCDC	220	220	220	bgcolor="#DCDCDC"\|
FloralWhite	#FFFAF0	255	250	240	bgcolor="#FFFAF0"\|
OldLace	#FDF5E6	253	245	230	bgcolor="#FDF5E6"\|
Linen	#FAF0E6	250	240	230	bgcolor="#FAF0E6"\|
AntiqueWhite	#FAEBD7	250	235	215	bgcolor="#FAEBD7"\|
PapayaWhip	#FFEFD5	255	239	213	bgcolor="#FFEFD5"\|
BlanchedAlmond	#FFEBCD	255	235	205	bgcolor="#FFEBCD"\|
Bisque	#FFE4C4	255	228	196	bgcolor="#FFE4C4"\|
PeachPuff	#FFDAB9	255	218	185	bgcolor="#FFDAB9"\|
NavajoWhite	#FFDEAD	255	222	173	bgcolor="#FFDEAD"\|
Moccasin	#FFE4B5	255	228	181	bgcolor="#FFE4B5"\|
Cornsilk	#FFF8DC	255	248	220	bgcolor="#FFF8DC"\|
Ivory	#FFFFF0	255	255	240	bgcolor="#FFFFF0"\|
LemonChiffon	#FFFACD	255	250	205	bgcolor="#FFFACD"\|
Seashell	#FFF5EE	255	245	238	bgcolor="#FFF5EE"\|
Honeydew	#F0FFF0	240	255	240	bgcolor="#F0FFF0"\|
MintCream	#F5FFFA	245	255	250	bgcolor="#F5FFFA"\|
Azure	#F0FFFF	240	255	255	bgcolor="#F0FFFF"\|
AliceBlue	#F0F8FF	240	248	255	bgcolor="#F0F8FF"\|
lavender	#E6E6FA	230	230	250	bgcolor="#E6E6FA"\|
LavenderBlush	#FFF0F5	255	240	245	bgcolor="#FFF0F5"\|
MistyRose	#FFE4E1	255	228	225	bgcolor="#FFE4E1"\|
Black	#000000	0	0	0	bgcolor="#000000"\|
DarkSlateGray	#2F4F4F	47	79	79	bgcolor="#2F4F4F"\|
DimGray	#696969	105	105	105	bgcolor="#696969"\|
SlateGray	#708090	112	128	144	bgcolor="#708090"\|
LightSlateGray	#778899	119	136	153	bgcolor="#778899"\|
Gray	#BEBEBE	190	190	190	bgcolor="#BEBEBE"\|
LightGray	#D3D3D3	211	211	211	bgcolor="#D3D3D3"\|
MidnightBlue	#191970	25	25	112	bgcolor="#191970"\|
NavyBlue	#000080	0	0	128	bgcolor="#000080"\|
CornflowerBlue	#6495ED	100	149	237	bgcolor="#6495ED"\|
DarkSlateBlue	#483D8B	72	61	139	bgcolor="#483D8B"\|
SlateBlue	#6A5ACD	106	90	205	bgcolor="#6A5ACD"\|
MediumSlateBlue	#7B68EE	123	104	238	bgcolor="#7B68EE"\|
LightSlateBlue	#8470FF	132	112	255	bgcolor="#8470FF"\|
MediumBlue	#0000CD	0	0	205	bgcolor="#0000CD"\|
RoyalBlue	#4169E1	65	105	225	bgcolor="#4169E1"\|
Blue	#0000FF	0	0	255	bgcolor="#0000FF"\|
DodgerBlue	#1E90FF	30	144	255	bgcolor="#1E90FF"\|
DeepSkyBlue	#00BFFF	0	191	255	bgcolor="#00BFFF"\|
SkyBlue	#87CEEB	135	206	235	bgcolor="#87CEEB"\|
LightSkyBlue	#87CEFA	135	206	250	bgcolor="#87CEFA"\|
SteelBlue	#4682B4	70	130	180	bgcolor="#4682B4"\|
LightSteelBlue	#B0C4DE	176	196	222	bgcolor="#B0C4DE"\|
LightBlue	#ADD8E6	173	216	230	bgcolor="#ADD8E6"\|
PowderBlue	#B0E0E6	176	224	230	bgcolor="#B0E0E6"\|
PaleTurquoise	#AFEEEE	175	238	238	bgcolor="#AFEEEE"\|
DarkTurquoise	#00CED1	0	206	209	bgcolor="#00CED1"\|
MediumTurquoise	#48D1CC	72	209	204	bgcolor="#48D1CC"\|
Turquoise	#40E0D0	64	224	208	bgcolor="#40E0D0"\|
Cyan	#00FFFF	0	255	255	bgcolor="#00FFFF"\|
LightCyan	#E0FFFF	224	255	255	bgcolor="#E0FFFF"\|
CadetBlue	#5F9EA0	95	158	160	bgcolor="#5F9EA0"\|
MediumAquamarine	#66CDAA	102	205	170	bgcolor="#66CDAA"\|
Aquamarine	#7FFFD4	127	255	212	bgcolor="#7FFFD4"\|
DarkGreen	#006400	0	100	0	bgcolor="#006400"\|
DarkOliveGreen	#556B2F	85	107	47	bgcolor="#556B2F"\|
DarkSeaGreen	#8FBC8F	143	188	143	bgcolor="#8FBC8F"\|
SeaGreen	#2E8B57	46	139	87	bgcolor="#2E8B57"\|
MediumSeaGreen	#3CB371	60	179	113	bgcolor="#3CB371"\|
LightSeaGreen	#20B2AA	32	178	170	bgcolor="#20B2AA"\|
PaleGreen	#98FB98	152	251	152	bgcolor="#98FB98"\|
SpringGreen	#00FF7F	0	255	127	bgcolor="#00FF7F"\|
LawnGreen	#7CFC00	124	252	0	bgcolor="#7CFC00"\|
Green	#00FF00	0	255	0	bgcolor="#00FF00"\|
Chartreuse	#7FFF00	127	255	0	bgcolor="#7FFF00"\|
MedSpringGreen	#00FA9A	0	250	154	bgcolor="#00FA9A"\|
GreenYellow	#ADFF2F	173	255	47	bgcolor="#ADFF2F"\|
LimeGreen	#32CD32	50	205	50	bgcolor="#32CD32"\|
YellowGreen	#9ACD32	154	205	50	bgcolor="#9ACD32"\|
ForestGreen	#228B22	34	139	34	bgcolor="#228B22"\|
OliveDrab	#6B8E23	107	142	35	bgcolor="#6B8E23"\|
DarkKhaki	#BDB76B	189	183	107	bgcolor="#BDB76B"\|
PaleGoldenrod	#EEE8AA	238	232	170	bgcolor="#EEE8AA"\|
LightGoldenrodYellow	#FAFAD2	250	250	210	bgcolor="#FAFAD2"\|
LightYellow	#FFFFE0	255	255	224	bgcolor="#FFFFE0"\|
Yellow	#FFFF00	255	255	0	bgcolor="#FFFF00"\|
Gold	#FFD700	255	215	0	bgcolor="#FFD700"\|
LightGoldenrod	#EEDD82	238	221	130	bgcolor="#EEDD82"\|
goldenrod	#DAA520	218	165	32	bgcolor="#DAA520"\|
DarkGoldenrod	#B8860B	184	134	11	bgcolor="#B8860B"\|
RosyBrown	#BC8F8F	188	143	143	bgcolor="#BC8F8F"\|
IndianRed	#CD5C5C	205	92	92	bgcolor="#CD5C5C"\|
SaddleBrown	#8B4513	139	69	19	bgcolor="#8B4513"\|
Sienna	#A0522D	160	82	45	bgcolor="#A0522D"\|
Peru	#CD853F	205	133	63	bgcolor="#CD853F"\|
Burlywood	#DEB887	222	184	135	bgcolor="#DEB887"\|
Beige	#F5F5DC	245	245	220	bgcolor="#F5F5DC"\|
Wheat	#F5DEB3	245	222	179	bgcolor="#F5DEB3"\|
SandyBrown	#F4A460	244	164	96	bgcolor="#F4A460"\|
Tan	#D2B48C	210	180	140	bgcolor="#D2B48C"\|
Chocolate	#D2691E	210	105	30	bgcolor="#D2691E"\|
FireBrick	#B22222	178	34	34	bgcolor="#B22222"\|
Brown	#A52A2A	165	42	42	bgcolor="#A52A2A"\|
DarkSalmon	#E9967A	233	150	122	bgcolor="#E9967A"\|
Salmon	#FA8072	250	128	114	bgcolor="#FA8072"\|
LightSalmon	#FFA07A	255	160	122	bgcolor="#FFA07A"\|
Orange	#FFA500	255	165	0	bgcolor="#FFA500"\|
DarkOrange	#FF8C00	255	140	0	bgcolor="#FF8C00"\|
Coral	#FF7F50	255	127	80	bgcolor="#FF7F50"\|
LightCoral	#F08080	240	128	128	bgcolor="#F08080"\|
Tomato	#FF6347	255	99	71	bgcolor="#FF6347"\|
OrangeRed	#FF4500	255	69	0	bgcolor="#FF4500"\|
Red	#FF0000	255	0	0	bgcolor="#FF0000"\|
HotPink	#FF69B4	255	105	180	bgcolor="#FF69B4"\|
DeepPink	#FF1493	255	20	147	bgcolor="#FF1493"\|
Pink	#FFC0CB	255	192	203	bgcolor="#FFC0CB"\|
LightPink	#FFB6C1	255	182	193	bgcolor="#FFB6C1"\|
PaleVioletRed	#DB7093	219	112	147	bgcolor="#DB7093"\|
Maroon	#B03060	176	48	96	bgcolor="#B03060"\|
MediumVioletRed	#C71585	199	21	133	bgcolor="#C71585"\|
VioletRed	#D02090	208	32	144	bgcolor="#D02090"\|
Magenta	#FF00FF	255	0	255	bgcolor="#FF00FF"\|
Violet	#EE82EE	238	130	238	bgcolor="#EE82EE"\|
Plum	#DDA0DD	221	160	221	bgcolor="#DDA0DD"\|
Orchid	#DA70D6	218	112	214	bgcolor="#DA70D6"\|
MediumOrchid	#BA55D3	186	85	211	bgcolor="#BA55D3"\|
DarkOrchid	#9932CC	153	50	204	bgcolor="#9932CC"\|
DarkViolet	#9400D3	148	0	211	bgcolor="#9400D3"\|
BlueViolet	#8A2BE2	138	43	226	bgcolor="#8A2BE2"\|
Purple	#A020F0	160	32	240	bgcolor="#A020F0"\|
MediumPurple	#9370DB	147	112	219	bgcolor="#9370DB"\|
Thistle	#D8BFD8	216	191	216	bgcolor="#D8BFD8"\|

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

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

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

색상 이름	RGB 좌표	16진수(HEX) 코드
	R	G	B
Snow	255	250	250	#FFFAFA
GhostWhite	248	248	255	#F8F8FF
WhiteSmoke	245	245	245	#F5F5F5
Gainsboro	220	220	220	#DCDCDC
FloralWhite	255	250	240	#FFFAF0
OldLace	253	245	230	#FDF5E6
Linen	250	240	230	#FAF0E6
AntiqueWhite	250	235	215	#FAEBD7
PapayaWhip	255	239	213	#FFEFD5
BlanchedAlmond	255	235	205	#FFEBCD
Bisque	255	228	196	#FFE4C4
PeachPuff	255	218	185	#FFDAB9
NavajoWhite	255	222	173	#FFDEAD
Moccasin	255	228	181	#FFE4B5
Cornsilk	255	248	220	#FFF8DC
Ivory	255	255	240	#FFFFF0
LemonChiffon	255	250	205	#FFFACD
Seashell	255	245	238	#FFF5EE
Honeydew	240	255	240	#F0FFF0
MintCream	245	255	250	#F5FFFA
Azure	240	255	255	#F0FFFF
AliceBlue	240	248	255	#F0F8FF
lavender	230	230	250	#E6E6FA
LavenderBlush	255	240	245	#FFF0F5
MistyRose	255	228	225	#FFE4E1
White	255	255	255	#FFFFFF
Black	0	0	0	#000000
DarkSlateGray	47	79	79	#2F4F4F
DimGray	105	105	105	#696969
SlateGray	112	128	144	#708090
LightSlateGray	119	136	153	#778899
Gray	190	190	190	#BEBEBE
LightGray	211	211	211	#D3D3D3
MidnightBlue	25	25	112	#191970
NavyBlue	0	0	128	#000080
CornflowerBlue	100	149	237	#6495ED
DarkSlateBlue	72	61	139	#483D8B
SlateBlue	106	90	205	#6A5ACD
MediumSlateBlue	123	104	238	#7B68EE
LightSlateBlue	132	112	255	#8470FF
MediumBlue	0	0	205	#0000CD
RoyalBlue	65	105	225	#4169E1
Blue	0	0	255	#0000FF
DodgerBlue	30	144	255	#1E90FF
DeepSkyBlue	0	191	255	#00BFFF
SkyBlue	135	206	235	#87CEEB
LightSkyBlue	135	206	250	#87CEFA
SteelBlue	70	130	180	#4682B4
LightSteelBlue	176	196	222	#B0C4DE
LightBlue	173	216	230	#ADD8E6
PowderBlue	176	224	230	#B0E0E6
PaleTurquoise	175	238	238	#AFEEEE
DarkTurquoise	0	206	209	#00CED1
MediumTurquoise	72	209	204	#48D1CC
Turquoise	64	224	208	#40E0D0
Cyan	0	255	255	#00FFFF
LightCyan	224	255	255	#E0FFFF
CadetBlue	95	158	160	#5F9EA0
MediumAquamarine	102	205	170	#66CDAA
Aquamarine	127	255	212	#7FFFD4
DarkGreen	0	100	0	#006400
DarkOliveGreen	85	107	47	#556B2F
DarkSeaGreen	143	188	143	#8FBC8F
SeaGreen	46	139	87	#2E8B57
MediumSeaGreen	60	179	113	#3CB371
LightSeaGreen	32	178	170	#20B2AA
PaleGreen	152	251	152	#98FB98
SpringGreen	0	255	127	#00FF7F
LawnGreen	124	252	0	#7CFC00
Green	0	255	0	#00FF00
Chartreuse	127	255	0	#7FFF00
MedSpringGreen	0	250	154	#00FA9A
GreenYellow	173	255	47	#ADFF2F
LimeGreen	50	205	50	#32CD32
YellowGreen	154	205	50	#9ACD32
ForestGreen	34	139	34	#228B22
OliveDrab	107	142	35	#6B8E23
DarkKhaki	189	183	107	#BDB76B
PaleGoldenrod	238	232	170	#EEE8AA
LightGoldenrodYellow	250	250	210	#FAFAD2
LightYellow	255	255	224	#FFFFE0
Yellow	255	255	0	#FFFF00
Gold	255	215	0	#FFD700
LightGoldenrod	238	221	130	#EEDD82
goldenrod	218	165	32	#DAA520
DarkGoldenrod	184	134	11	#B8860B
RosyBrown	188	143	143	#BC8F8F
IndianRed	205	92	92	#CD5C5C
SaddleBrown	139	69	19	#8B4513
Sienna	160	82	45	#A0522D
Peru	205	133	63	#CD853F
Burlywood	222	184	135	#DEB887
Beige	245	245	220	#F5F5DC
Wheat	245	222	179	#F5DEB3
SandyBrown	244	164	96	#F4A460
Tan	210	180	140	#D2B48C
Chocolate	210	105	30	#D2691E
FireBrick	178	34	34	#B22222
Brown	165	42	42	#A52A2A
DarkSalmon	233	150	122	#E9967A
Salmon	250	128	114	#FA8072
LightSalmon	255	160	122	#FFA07A
Orange	255	165	0	#FFA500
DarkOrange	255	140	0	#FF8C00
Coral	255	127	80	#FF7F50
LightCoral	240	128	128	#F08080
Tomato	255	99	71	#FF6347
OrangeRed	255	69	0	#FF4500
Red	255	0	0	#FF0000
HotPink	255	105	180	#FF69B4
DeepPink	255	20	147	#FF1493
Pink	255	192	203	#FFC0CB
LightPink	255	182	193	#FFB6C1
PaleVioletRed	219	112	147	#DB7093
Maroon	176	48	96	#B03060
MediumVioletRed	199	21	133	#C71585
VioletRed	208	32	144	#D02090
Magenta	255	0	255	#FF00FF
Violet	238	130	238	#EE82EE
Plum	221	160	221	#DDA0DD
Orchid	218	112	214	#DA70D6
MediumOrchid	186	85	211	#BA55D3
DarkOrchid	153	50	204	#9932CC
DarkViolet	148	0	211	#9400D3
BlueViolet	138	43	226	#8A2BE2
Purple	160	32	240	#A020F0
MediumPurple	147	112	219	#9370DB
Thistle	216	191	216	#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"이다.

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"이다.

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와 약간의 차이가 있다.

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

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

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

색상 이름	X11 색상					W3C 색상
색상 이름	16진수	빨강	녹색	파랑	샘플	샘플	16진수	빨강	녹색	파랑
Gray	#BEBEBE	75%	75%	75%	style="background:#BEBEBE;"\|	style="background:grey;"\|	#808080	50%	50%	50%
Green	#00FF00	0%	100%	0%	style="background:#0F0;"\|	style="background:green;"\|	#008000	0%	50%	0%
적갈색	#B03060	69%	19%	38%	style="background:#B03060;"\|	style="background:#800000;"\|	#800000	50%	0%	0%
Purple	#A020F0	63%	13%	94%	style="background:#A020F0;"\|	style="background:#800080;"\|	#800080	50%	0%	50%

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