웹 색상

웹 색상(web colors)은 월드 와이드 웹에서 웹 페이지를 표시하는 데 사용되는 색으로, 다음 세 가지 방법으로 설명할 수 있다. 색은 RGB 삼중색으로, 십육진법 형식(헥스 삼중색)으로 또는 어떤 경우에는 일반적인 영어 이름으로 지정될 수 있다. 색상 도구 또는 기타 그래픽 소프트웨어는 종종 색상 값을 생성하는 데 사용된다. 어떤 경우에는 선행 번호 기호(#)를 사용하는 표기법으로 십육진법 색상 코드가 지정된다. 색은 빨강, 초록, 파랑 구성 요소의 강도에 따라 지정되며, 각 구성 요소는 8 비트로 표현된다. 따라서 SRGB 영역 내에서 웹 색상을 지정하는 데 24비트가 사용되며, 16,777,216가지 색상을 그렇게 지정할 수 있다.

sRGB 영역 외부의 색상은 캐스케이딩 스타일 시트에서 빨강, 초록, 파랑 구성 요소 중 하나 이상을 음수 또는 100%보다 크게 만들어 지정할 수 있으므로 색 공간은 이론적으로 scRGB와 유사한 sRGB의 무한 확장이다. 이런 방식으로 비 sRGB 색상을 지정하려면 RGB() 함수 호출이 필요하다. 이는 십육진법 구문으로는 불가능하다(따라서 CSS를 사용하지 않는 레거시 HTML 문서에서는 불가능하다).

모자이크 및 넷스케이프 내비게이터의 첫 번째 버전은 둘 다 X 윈도 시스템 응용 프로그램으로 시작했기 때문에 X11 색 이름을 색상 목록의 기반으로 사용했다. 웹 색상은 특정 형광체 세트, 주어진 전송 곡선, 적응형 백색점 및 시청 조건의 색도를 연결하는 SRGB라는 명확한 측색학적 정의를 갖는다. 이는 많은 실제 컴퓨터 모니터 및 시청 조건과 유사하도록 선택되어 색 관리 없이도 렌더링이 지정된 값에 상당히 가깝게 허용된다. 사용자 에이전트는 지정된 색상을 표현하는 충실도에서 다양하다. 고급 사용자 에이전트는 색상 관리를 사용하여 더 나은 색상 충실도를 제공한다. 이는 Web-to-print 응용 프로그램에 특히 중요하다.

헥스 삼중색

헥스 삼중색은 HTML, CSS, SVG 및 기타 컴퓨팅 응용 프로그램에서 색상을 나타내는 데 사용되는 6자리(또는 8자리), 3바이트 (또는 4바이트) 십육진법 숫자이다. 바이트는 색상의 빨강, 초록, 파랑 구성 요소를 나타낸다. 선택 사항인 네 번째 바이트는 알파 채널을 참조한다. 1바이트는 00에서 FF (십육진법 표기), 또는 십진법으로 0에서 255 범위의 숫자를 나타낸다. 이는 각 색상 구성 요소의 최소 (0)에서 최대 (255) 강도를 나타낸다. 따라서 웹 색상은 24비트 RGB 색상 체계로 색상을 지정한다. 헥스 삼중색은 다음 순서로 세 바이트를 십육진법 표기법으로 연결하여 형성된다.

• 바이트 1: 빨강 값 (색상 유형 빨강)
• 바이트 2: 초록 값 (색상 유형 초록)
• 바이트 3: 파랑 값 (색상 유형 파랑)
• 바이트 4 (선택 사항): 알파 값

예를 들어, 빨강/초록/파랑 값이 십진수 123, 58, 30인 색상(하드우드 갈색)을 고려해 보자. 십진수 123, 58, 30은 각각 십육진수 7B, 3A, 1E와 동일하다. 헥스 삼중색은 이 예시에서 7B3A1E로 여섯 개의 십육진수 숫자를 함께 연결하여 얻는다.

세 가지 색상 값 중 하나라도 10진수 (16진수) 미만인 경우, 삼중색이 항상 정확히 6자리로 유지되도록 앞에 0을 붙여야 한다. 예를 들어, 십진수 삼중색 4, 8, 16은 16진수 04, 08, 10으로 표현되며, 16진수 삼중색 040810을 형성한다.

이 시스템으로 표현할 수 있는 색상의 수는 256³, 16⁶ 또는 2²⁴ = 16,777,216가지이다.

약식 십육진법 형식

세 자리(16진수) 또는 네 자리 약식 형식을 사용할 수 있지만, 소프트웨어 또는 유지보수 스크립트가 긴 형식만 예상하는 경우 오류가 발생할 수 있다. 이 형식을 6자리 형식으로 확장하는 것은 각 숫자를 반복하는 것만큼 간단하다. 다음 캐스케이딩 스타일 시트 예시에서 09C는 0099CC가 된다.

.threedigit { color: #09C;    }
.sixdigit   { color: #0099CC; } /* same color as above */

이 단축 형식은 팔레트를 4,096가지 색상으로 줄이며, 이는 6자리 전체 형식을 사용하는 24비트 색상(16,777,216가지 색상)과 달리 12비트 색상에 해당한다. 이 제한은 많은 텍스트 기반 문서에 충분하다.

RGB를 십육진법으로 변환하기

파일:Icons8 flat search.svg 십육진법 § 변환 문서를 참고하십시오.

RGB 값은 일반적으로 0-255 범위로 주어진다. 만약 0-1 범위라면, 변환 전에 255를 곱한다. 이 숫자를 16으로 나눈 값(정수 나눗셈; 나머지는 무시)은 첫 번째 16진수 숫자(0에서 F 사이, 여기서 A부터 F는 숫자 10에서 15를 나타낸다. 자세한 내용은 십육진법 참조)를 준다. 나머지는 두 번째 16진수 숫자를 준다. 예를 들어, 58의 RGB 값(헥스 삼중색의 이전 예시에서 보여진 대로)은 16의 3개 그룹으로 나뉘므로 첫 번째 숫자는 3이다. 나머지 10은 16진수 3A를 준다. 마찬가지로 RGB 값 201은 16의 12개 그룹으로 나뉘므로 첫 번째 숫자는 C이다. 나머지 9는 16진수 C9를 준다. 이 과정은 세 가지 색상 값 각각에 대해 반복된다.

진수 간 변환은 휴대용 모델과 대부분의 최신 운영체제에 번들로 제공되는 소프트웨어 계산기를 포함한 계산기의 일반적인 기능이다. 색상 값 변환을 위한 웹 기반 도구도 사용할 수 있다.

HTML 색 이름

최근 W3C 색상 이름 사양은 기본 색상과 확장 색상을 구분한다. HTML 및 XHTML에서 색상은 텍스트, 배경색, 프레임 테두리, 표 및 개별 표 셀에 사용될 수 있다.

파일:Untitled Diagram.drawio.png

모든 기본 HTML 색상을 포함하는 다이어그램.

기본 색상

기본 색상은 1999년에 비준된 HTML 4.01 사양에 정의된 16가지 색상으로, 다음과 같다(이 맥락에서 이름은 대소문자를 구분하지 않는다).

이 16가지 색상은 sRGB로 지정되어 HTML 3.0 사양에 포함되었으며, 이는 "윈도우 VGA 팔레트에서 지원되는 표준 16가지 색상"이라고 언급했다.

확장 색상

파일:SVG Recognized color keyword names.svg

X11 색상 이름의 SVG 버전

파일:SVG1.1 Color Swatch.svg

SVG1.1 명명된 색상(sRGB 헥스/십진수 및 HSL 코드 포함), UHD(4K) 해상도

확장 색상은 HTML 4.01, CSS 2.0, SVG 1.0 및 CSS3 사용자 인터페이스(CSS3 UI)의 사양을 병합한 결과이다.

여러 색상은 웹 브라우저에 의해 정의된다. 특정 브라우저는 이 모든 색상을 인식하지 못할 수도 있지만, 2005년 현재 모든 현대적이고 일반적인 그래픽 브라우저는 전체 색상 목록을 지원한다. 이 색상 중 다수는 X 윈도 시스템과 함께 배포되는 X11 색 이름 목록에서 가져온 것이다. 이 색상들은 SVG 1.0에 의해 표준화되었으며, SVG Full 사용자 에이전트에 의해 허용된다. 이들은 SVG Tiny의 일부가 아니다.

X11 제품과 함께 제공되는 색상 목록은 구현마다 다르며 녹색과 같은 특정 HTML 이름과 충돌한다. X11 색상은 SRGB가 아닌 단순 RGB로 정의된다(따라서 특정 색 공간이 없다). 이는 X11에서 발견되는 색상 목록(예: /usr/lib/X11/rgb.txt)을 웹에 사용할 색상을 선택하는 데 직접 사용해서는 안 된다는 것을 의미한다.

CSS3 사양의 웹 "X11 색상" 목록과 해당 16진수 및 10진수 등가는 아래에 나와 있다. W3C 표준의 알파벳 순 목록과 비교해 보라. 여기에는 일반적인 동의어가 포함된다: 아쿠아(HTML4/CSS 1.0 표준 이름)와 시안(일반적인 sRGB 이름), 푸시아(HTML4/CSS 1.0 표준 이름)와 마젠타(일반적인 sRGB 이름), 회색(HTML4/CSS 1.0 표준 이름)과 그레이.

HTML 이름	R G B
	Hex	Decimal
Pink colors
MediumVioletRed	C71585	199, 21, 133
DeepPink	FF1493	255, 20, 147
PaleVioletRed	DB7093	219, 112, 147
HotPink	FF69B4	255, 105, 180
LightPink	FFB6C1	255, 182, 193
Pink	FFC0CB	255, 192, 203
Red colors
DarkRed	8B0000	139, 0, 0
Red	FF0000	255, 0, 0
Firebrick	B22222	178, 34, 34
Crimson	DC143C	220, 20, 60
IndianRed	CD5C5C	205, 92, 92
LightCoral	F08080	240, 128, 128
Salmon	FA8072	250, 128, 114
DarkSalmon	E9967A	233, 150, 122
LightSalmon	FFA07A	255, 160, 122
Orange colors
OrangeRed	FF4500	255, 69, 0
Tomato	FF6347	255, 99, 71
DarkOrange	FF8C00	255, 140, 0
Coral	FF7F50	255, 127, 80
Orange	FFA500	255, 165, 0
Yellow colors
DarkKhaki	BDB76B	189, 183, 107
Gold	FFD700	255, 215, 0
Khaki	F0E68C	240, 230, 140
PeachPuff	FFDAB9	255, 218, 185
Yellow	FFFF00	255, 255, 0
PaleGoldenrod	EEE8AA	238, 232, 170
Moccasin	FFE4B5	255, 228, 181
PapayaWhip	FFEFD5	255, 239, 213
LightGoldenrodYellow	FAFAD2	250, 250, 210
LemonChiffon	FFFACD	255, 250, 205
LightYellow	FFFFE0	255, 255, 224
Brown colors
Maroon	800000	128, 0, 0
Brown	A52A2A	165, 42, 42
SaddleBrown	8B4513	139, 69, 19
Sienna	A0522D	160, 82, 45
Chocolate	D2691E	210, 105, 30
DarkGoldenrod	B8860B	184, 134, 11
Peru	CD853F	205, 133, 63
RosyBrown	BC8F8F	188, 143, 143
Goldenrod	DAA520	218, 165, 32
SandyBrown	F4A460	244, 164, 96
Tan	D2B48C	210, 180, 140
Burlywood	DEB887	222, 184, 135
Wheat	F5DEB3	245, 222, 179
NavajoWhite	FFDEAD	255, 222, 173
Bisque	FFE4C4	255, 228, 196
BlanchedAlmond	FFEBCD	255, 235, 205
Cornsilk	FFF8DC	255, 248, 220

HTML 이름	R G B
	Hex	Decimal
Purple, violet, and magenta colors
Indigo	4B0082	75, 0, 130
Purple	800080	128, 0, 128
DarkMagenta	8B008B	139, 0, 139
DarkViolet	9400D3	148, 0, 211
DarkSlateBlue	483D8B	72, 61, 139
BlueViolet	8A2BE2	138, 43, 226
DarkOrchid	9932CC	153, 50, 204
Fuchsia	FF00FF	255, 0, 255
Magenta	FF00FF	255, 0, 255
SlateBlue	6A5ACD	106, 90, 205
MediumSlateBlue	7B68EE	123, 104, 238
MediumOrchid	BA55D3	186, 85, 211
MediumPurple	9370DB	147, 112, 219
Orchid	DA70D6	218, 112, 214
Violet	EE82EE	238, 130, 238
Plum	DDA0DD	221, 160, 221
Thistle	D8BFD8	216, 191, 216
Lavender	E6E6FA	230, 230, 250
Blue colors
MidnightBlue	191970	25, 25, 112
Navy	000080	0, 0, 128
DarkBlue	00008B	0, 0, 139
MediumBlue	0000CD	0, 0, 205
Blue	0000FF	0, 0, 255
RoyalBlue	4169E1	65, 105, 225
SteelBlue	4682B4	70, 130, 180
DodgerBlue	1E90FF	30, 144, 255
DeepSkyBlue	00BFFF	0, 191, 255
CornflowerBlue	6495ED	100, 149, 237
SkyBlue	87CEEB	135, 206, 235
LightSkyBlue	87CEFA	135, 206, 250
LightSteelBlue	B0C4DE	176, 196, 222
LightBlue	ADD8E6	173, 216, 230
PowderBlue	B0E0E6	176, 224, 230
Cyan colors
Teal	008080	0, 128, 128
DarkCyan	008B8B	0, 139, 139
LightSeaGreen	20B2AA	32, 178, 170
CadetBlue	5F9EA0	95, 158, 160
DarkTurquoise	00CED1	0, 206, 209
MediumTurquoise	48D1CC	72, 209, 204
Turquoise	40E0D0	64, 224, 208
Aqua	00FFFF	0, 255, 255
Cyan	00FFFF	0, 255, 255
Aquamarine	7FFFD4	127, 255, 212
PaleTurquoise	AFEEEE	175, 238, 238
LightCyan	E0FFFF	224, 255, 255

HTML 이름	R G B
	Hex	Decimal
Green colors
DarkGreen	006400	0, 100, 0
Green	008000	0, 128, 0
DarkOliveGreen	556B2F	85, 107, 47
ForestGreen	228B22	34, 139, 34
SeaGreen	2E8B57	46, 139, 87
Olive	808000	128, 128, 0
OliveDrab	6B8E23	107, 142, 35
MediumSeaGreen	3CB371	60, 179, 113
LimeGreen	32CD32	50, 205, 50
Lime	00FF00	0, 255, 0
SpringGreen	00FF7F	0, 255, 127
MediumSpringGreen	00FA9A	0, 250, 154
DarkSeaGreen	8FBC8F	143, 188, 143
MediumAquamarine	66CDAA	102, 205, 170
YellowGreen	9ACD32	154, 205, 50
LawnGreen	7CFC00	124, 252, 0
Chartreuse	7FFF00	127, 255, 0
LightGreen	90EE90	144, 238, 144
GreenYellow	ADFF2F	173, 255, 47
PaleGreen	98FB98	152, 251, 152
White colors
MistyRose	FFE4E1	255, 228, 225
AntiqueWhite	FAEBD7	250, 235, 215
Linen	FAF0E6	250, 240, 230
Beige	F5F5DC	245, 245, 220
WhiteSmoke	F5F5F5	245, 245, 245
LavenderBlush	FFF0F5	255, 240, 245
OldLace	FDF5E6	253, 245, 230
AliceBlue	F0F8FF	240, 248, 255
Seashell	FFF5EE	255, 245, 238
GhostWhite	F8F8FF	248, 248, 255
Honeydew	F0FFF0	240, 255, 240
FloralWhite	FFFAF0	255, 250, 240
Azure	F0FFFF	240, 255, 255
MintCream	F5FFFA	245, 255, 250
Snow	FFFAFA	255, 250, 250
Ivory	FFFFF0	255, 255, 240
White	FFFFFF	255, 255, 255
Gray and black colors
Black	000000	0, 0, 0
DarkSlateGray	2F4F4F	47, 79, 79
DimGray	696969	105, 105, 105
SlateGray	708090	112, 128, 144
Gray	808080	128, 128, 128
LightSlateGray	778899	119, 136, 153
DarkGray	A9A9A9	169, 169, 169
Silver	C0C0C0	192, 192, 192
LightGray	D3D3D3	211, 211, 211
Gainsboro	DCDCDC	220, 220, 220

CSS 색상

캐스케이딩 스타일 시트 사양은 HTML 4 사양과 동일한 수의 명명된 색상, 즉 16가지 HTML 색상과 넷스케이프 X11 색상 목록의 124가지 색상을 정의하여 총 140가지 이름을 인터넷 익스플로러(IE) 3.0 및 넷스케이프 내비게이터 3.0이 인식했다. Blooberry.com은 Opera 2.1 및 Safari 1도 넷스케이프의 확장된 140가지 색상 이름 목록을 포함했지만, 나중에 Windows 98의 Opera 3.5에는 포함되지 않은 14가지 이름을 발견했다고 언급한다.

CSS 2.1에서 '주황' 색상(140가지 중 하나)은 16가지 HTML4 색상 섹션에 17번째 색상으로 추가되었다. CSS3.0 사양에는 "HTML4 색상 키워드" 섹션에 주황색이 포함되지 않았으며, 이 섹션은 "기본 색상 키워드"로 이름이 변경되었다. 동일한 참조에서 "SVG 색상 키워드" 섹션은 이전 작업 초안에서 "X11 색상 키워드"로 시작된 후 "확장 색상 키워드"로 이름이 변경되었다. 레벨 4 색상 모듈의 작업 초안은 기본 및 확장 섹션을 단순한 "명명된 색상" 섹션으로 결합한다. CSS 2, 스케일러블 벡터 그래픽스 및 CSS 2.1은 웹 작성자가 시스템 색상을 사용하도록 허용한다. 시스템 색상은 운영체제에서 값을 가져오는 색상 이름으로, 운영체제의 강조 표시된 텍스트 색상 또는 도구 설명 컨트롤의 배경 색상을 선택한다. 이를 통해 웹 작성자는 사용자 에이전트의 운영체제에 맞춰 콘텐츠 스타일을 지정할 수 있다. CSS3 색상 모듈은 CSS3 UI 시스템 외관 속성을 선호하여 시스템 색상 사용을 비권장했다. 이는 나중에 CSS3에서 삭제되었다.

시스템 색상 키워드 예시

외관	키워드
	linkText
	visitedText
	activeText
	highlight
	mark

CSS3 사양은 또한 HSL 색 공간 값을 스타일 시트에 도입한다.

/* RGB 모델 */
p { color: #F00 } /* #rgb */
p { color: #FF0000 } /* #rrggbb */
p { color: rgb(255, 0, 0) } /* 정수 범위 0 - 255 */
p { color: rgb(100%, 0%, 0%) } /* 부동 소수점 범위 0.0% - 100.0% */

/* CSS3에 추가된 알파 채널을 포함한 RGB */
p { color: rgba(255, 0, 0, 0.5) } /* 50% 불투명도, 반투명 */

/* CSS3에 추가된 HSL 모델 */
p { color: hsl(0, 100%, 50%) } /* 빨강 */
p { color: hsl(120, 100%, 50%) } /* 초록 */
p { color: hsl(120, 100%, 25%) } /* 어두운 초록 */
p { color: hsl(120, 100%, 75%) } /* 밝은 초록 */
p { color: hsl(120, 50%, 50%) } /* 파스텔 초록 */

/* 알파 채널을 포함한 HSL 모델 */
p { color: hsla(120, 100%, 50%, 1) } /* 초록 */
p { color: hsla(120, 100%, 50%, 0.5) } /* 반투명 초록 */
p { color: hsla(120, 100%, 50%, 0.1) } /* 매우 투명한 초록 */

CSS는 또한 알파 값이 0인 특수 색상 transparent를 지원한다. 기본적으로 transparent는 보이지 않는 명목상의 검정색으로 렌더링된다: rgba(0, 0, 0, 0). 이는 CSS1에 도입되었지만 버전이 지남에 따라 사용 범위가 확장되었다.

CSS 컬러 4

CSS 색상 사양의 레벨 4에서는 몇 가지 새로운 CSS 색상 형식을 도입했다.

새로운 색상 작성 방법 외에도 비-SRGB 색상 공간에서 색상을 혼합하는 개념을 도입하여 색상 그라데이션의 잘 알려진 문제를 해결하는 첫 단계를 제공한다. 색상 이론 및 색역 매핑과 같은 일반적인 작업을 설명하는 일부 섹션도 구현을 돕기 위해 추가되었다.

p { color: #F80A } /* #rgba */
p { color: #FF8800AA } /* #rrggbbaa */
p { color: rgb(255.0 136.0 0.0 / 0.667) } /* 8비트 이상의 정밀도를 위한 부동 소수점 범위 0.0 - 255.0 */
p { color: rgb(100% 53.3% 0% / 66.7%) } /* 부동 소수점 범위 0.0% - 100.0% */
p { color: color(sRGB 1 0.533 0 / 0.667) } /* 색상 공간을 포함한 color() 함수 */

장치 독립 색상

CSS 색상 4는 장치 독립 색상을 위한 여러 가지 다른 형식을 도입하여 (지원되는 화면에서) 가시 색상 전체를 표시할 수 있다.

• CIE Lab 및 LCH
• OKLab 및 OKLCH (Lab/LCH보다 선호됨)^{(§§9.2–3)}
• XYZ (D50 또는 D65 [기본값])

사전 정의된 색상 공간

SRGB보다 더 넓은 색역을 가진 여러 RGB 공간도 새로운 color() 함수를 통해 도입되었다.

• 디스플레이 P3
• 프로포토
• REC.2020
• 어도비 1998 RGB

sRGB의 선형화된 변형도 색상 혼합을 위해 정의된다.

기타 형식

2014년 6월 21일, CSS WG는 2014년 6월 7일 여섯 번째 생일에 사망한 에릭 A. 마이어의 딸 레베카를 추모하기 위해 색상 모듈 레벨 4의 편집자 초안에 레베카퍼플 색상을 추가했다. CSS4는 또한 HSL/HSV의 대안으로 HWB 색 모델을 도입한다.

CSS 컬러 5

초안 CSS 색상 5 사양은 기존 색상을 혼합하고 조작하기 위한 구문을 도입하며 다음을 포함한다.

• 색상 혼합을 위한 color-mix() 함수
• 기존 색상의 구성 요소를 조작하기 위한 상대 색상 구문

사용자 정의 색상 공간도 ICC 프로파일을 통해 지원된다. 이를 통해 웹 페이지에서 CMYK를 사용할 수 있다.

웹 안전 색상

1990년대 중반, 많은 디스플레이는 하드웨어에 의해 결정되거나 "색상 테이블"에 의해 변경될 수 있는 256가지 색상만 표시할 수 있었다. 사용할 수 없는 색상이 발견되면 (예: 이미지에서) 다른 색상을 사용해야 했다. 이는 가장 가까운 색상을 사용하거나 디더링을 사용하여 수행되었다.

"표준" 색상 팔레트를 만들기 위한 다양한 시도가 있었다. 256색 디스플레이에서 디더링 없이 표시될 수 있는 색상 집합이 필요했다. 216이라는 숫자는 부분적으로 컴퓨터 운영 체제가 일반적으로 16~20가지 색상을 자체 용도로 예약했기 때문에 선택되었으며, 각 색상이 00에서 FF (두 제한 모두 포함)까지 정확히 6가지 균등 간격의 빨강, 초록, 파랑 음영(6 × 6 × 6 = 216)을 허용했기 때문에 선택되었다.

색상 목록은 디더링에 면역이 되는 특별한 속성을 가진 것처럼 제시되었지만, 256색 디스플레이에서는 응용 프로그램이 원하는 색상 선택 팔레트를 실제로 설정할 수 있었고 나머지는 디더링했다. 이 색상들은 특히 다양한 브라우저 응용 프로그램에서 선택한 팔레트와 일치했기 때문에 선택되었다. 다른 브라우저에서 사용되는 팔레트는 크게 다르지 않았다.

"웹 안전" 색상은 X11과 같이 팔레트가 응용 프로그램 간에 공유되는 시스템에서 브라우저가 더 작은 색상 큐브(5×5×5 또는 4×4×4)를 할당하여 "웹 안전" 색상이 그러한 시스템에서 디더링된다는 결함이 있었다. 더 넓은 범위의 색상을 가진 이미지를 제공하고 브라우저가 필요한 경우 색상 공간을 양자화하도록 허용하면 이중 양자화의 품질 손실을 겪지 않고 다른 결과를 얻을 수 있었다.

2000년대 내내 개인용 컴퓨터에서 256색 디스플레이 사용이 24비트 (트루컬러) 디스플레이를 선호하여 급격히 줄어들었고, "웹 안전" 색상 사용은 사실상 폐기되었다.

"웹 안전" 색상이 모두 표준 이름을 가지고 있지는 않지만, 각각은 RGB 삼중색으로 지정할 수 있다. 각 구성 요소(빨강, 초록, 파랑)는 아래 표에서 6가지 값 중 하나를 취한다(전체 24비트 색상에서 각 구성 요소에 사용 가능한 256가지 값 중에서).

각 색상의 6가지 음영

키	십육진수	십진수	분수
0	00	0	0
3	33	51	0.2
6	66	102	0.4
9	99	153	0.6
C (12)	CC	204	0.8
F (15)	FF	255	1

다음 표는 모든 "웹 안전" 색상을 보여준다. 웹 안전 팔레트의 한 가지 단점은 웹 페이지 배경을 위한 밝은 색상의 범위가 작다는 것이다. 반면, 범위의 낮은 끝에 있는 강도, 예를 들어 가장 어두운 두 가지는 서로 비슷하여 구별하기 어렵다. "*" (별표)로 표시된 값은 "정말 안전한 팔레트"의 일부이다. 아래 가장 안전한 웹 색상을 참조하라.

색상표

216가지 웹 안전(web-safe) 색상

*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*

나열된 각 색상 코드는 RGB 값을 약어로 나타낸 것이다. 예를 들어, 코드 609는 RGB 코드 102-0-153 또는 HEX 코드 #660099와 같다.

가장 안전한 웹 색상

디자이너들은 216색 팔레트가 개발될 당시 8비트 컬러 디스플레이가 많았기 때문에 웹사이트에서 이 216가지 "웹 안전" 색상을 고수하도록 권장되었다. 데이비드 렌과 해들리 스턴은 웹 안전 팔레트의 216가지 색상 중 22가지 색상만이 16비트 컴퓨터 디스플레이에서 일관되지 않은 재매핑 없이 안정적으로 표시된다는 사실을 발견했다. 그들은 이 22가지 색상을 "정말 안전한 팔레트"라고 불렀다. 이 팔레트는 주로 녹색, 노란색, 시안색의 음영으로 구성되어 있다.

가장 안전한 웹 색상

R-- -GB	0	3	6	9	C	F
00	*000*					*F00*
03	*003*					*F03*
06
09
0C
0F	*00F*					*F0F*
⋮	⋮
F0	*0F0*		*6F0*			*FF0*
F3		*3F3*	*6F3*			*FF3*
F6	*0F6*	*3F6*			*CF6*	*FF6*
F9
FC	*0FC*	*3FC*
FF	*0FF*	*3FF*	*6FF*			*FFF*

접근성

색상 선택

일부 브라우저 및 장치는 색상을 지원하지 않는다. 이러한 디스플레이 또는 시각 장애인 및 색각 이상 사용자의 경우 색상에 의존하는 웹 콘텐츠는 사용할 수 없거나 사용하기 어려울 수 있다.

검정 바탕에 검정 또는 하양 바탕에 하양 효과를 피하기 위해 색상을 지정하지 않거나(브라우저의 기본 색상을 호출하기 위해), 배경색과 모든 전경색(일반 텍스트, 방문하지 않은 링크, 마우스 오버 링크, 활성 링크, 방문한 링크의 색상 등)을 모두 지정해야 한다.

색상 대비

웹 콘텐츠 접근성 가이드라인은 텍스트의 상대 휘도와 배경색 사이에 최소 4.5:1의 대비 비율 또는 큰 텍스트의 경우 최소 3:1을 권장한다. 향상된 접근성을 위해서는 7:1보다 큰 대비 비율이 필요하다.

그러나 접근성 문제를 해결하는 것은 단순히 대비 비율을 높이는 문제가 아니다. 웹 접근성 이니셔티브에 대한 보고서가 나타내는 바와 같이, 난독증 독자는 최대 대비 비율 미만의 대비 비율에서 더 잘 읽는다. 그들이 언급하는 오프-블랙(#0A0A0A)에 오프-화이트(#FFFFE5) 및 블랙(#000000)에 크림색(#FAFAC8)은 각각 11.7:1 및 20.3:1의 대비 비율을 갖는다. 다른 색상 쌍 중에는 어두운 갈색(#282800)에 어두운 녹색(#A0A000)은 3.24:1의 대비 비율을 가지며, 이는 WCAG 권장 사항보다 작다. 어두운 갈색(#1E1E00)에 밝은 녹색(#B9B900)은 4.54:1의 대비 비율을 가지며, 파랑(#00007D)에 노랑(#FFFF00)은 11.4:1의 대비 비율을 갖는다. 보고서에 언급된 색상은 동일한 이름의 웹 색상과 다른 색상 값을 사용한다.

같이 보기

• 어도비 RGB 색 공간
• CIE 1931 색 공간
• CIE L*a*b* 색 공간
• 색상 선택기
• 색상 팔레트 목록
• 색상 목록
• 음영별 색상 목록
• 프로포토 RGB
• RGB 색 공간
• scRGB
• 광역색 RGB 색 공간

외부 링크

• MDN 웹 문서의 CSS 색상 값
• CSS2.1 색상 사양