웹 컬러

Web colors

웹 색상월드 와이드 웹에서 웹 페이지를 표시하는 데 사용되는 색상으로, 세 가지 방법으로 설명할 수 있습니다: 색상은 RGB 삼중항, 16진수 형식(16진수) 또는 경우에 따라 일반적인 영어 이름에 따라 지정될 수 있습니다. 컬러 도구 또는 기타 그래픽 소프트웨어는 종종 컬러 값을 생성하는 데 사용됩니다. 일부 용도에서는 16진수 색상 코드를 선두 숫자 기호(#)[1][2]를 사용한 표기로 지정합니다. 색상은 각각 8비트로 표시되는 빨간색, 녹색 및 파란색 구성 요소의 강도에 따라 지정됩니다. 따라서 sRGB 영역 내에서 웹 색상을 지정하는 데 사용되는 24비트와 그렇게 지정될 수 있는 16,777,216 색상이 있습니다.

sRGB 영역 밖의 색상은 빨간색, 녹색 및 파란색 구성 요소 중 하나 이상을 음수로 만들거나 100%를 초과하여 캐스캐이딩 스타일 시트에서 지정할 수 있으므로 색상 공간은 이론적으로 scRGB와 유사한 sRGB의 무제한 외삽입니다.[3] 이러한 방식으로 sRGB가 아닌 색상을 지정하려면 RGB() 함수 호출 16진수 구문으로는 불가능합니다. 따라서 CSS를 사용하지 않는 기존 HTML 문서에서는 불가능합니다.

모자이크넷스케이프 네비게이터의 첫 번째 버전은 X11 색상 이름을 X 윈도우 시스템 응용 프로그램으로 시작한 것처럼 색상 목록의 기본으로 사용했습니다. 웹 색상은 특정 형광체 세트의 색도, 주어진 전달 곡선, 적응성 백색점 및 시청 조건을 연관시키는 명확한 비색 정의인 sRGB를 갖습니다.[4] 색상 관리 없이도 렌더링이 지정된 값에 상당히 근접할 수 있도록 많은 실제 모니터 및 보기 조건과 유사하도록 선택되었습니다. 사용자 에이전트는 지정된 색상을 나타내는 충실도가 다릅니다. 고급 사용자 에이전트는 색 관리를 사용하여 색 충실도를 향상시킵니다. 이는 웹-투-프린트 애플리케이션에 특히 중요합니다.

육삼중주

16진수HTML, CSS, SVG 및 기타 컴퓨팅 응용 프로그램에서 색을 나타내기 위해 사용되는 6자리(또는 8자리), 3바이트(또는 4바이트)의 16진수입니다. 바이트는 색상의 빨간색, 녹색 및 파란색 구성 요소를 나타냅니다. 선택적인 네 번째 바이트는 알파 채널을 나타냅니다. 1바이트는 00~FF(16진수 표기) 범위의 숫자 또는 0~255(10진수 표기)를 나타냅니다. 이는 각 색상 성분의 최소(0)에서 최대(255) 강도를 나타냅니다. 따라서 웹 색상은 24비트 RGB 색상 체계에서 색상을 지정합니다. 16진수 3진수는 16진수 표기법으로 3바이트를 다음과 같은 순서로 연결하여 구성됩니다.

  • 바이트 1: 빨간색 값(색상 빨간색)
  • 바이트 2: 녹색 값(색상 녹색)
  • 바이트 3: 블루 값(컬러 타입 블루)
  • 바이트 4(옵션): 알파 값

예를 들어 빨간색/녹색/파란색 값이 10진수인 빨간색=36, 녹색=104, 파란색=160(회색-파란색)을 고려합니다. 10진수 36, 104 및 160은 각각 16진수 24, 68 및 A0에 해당합니다. 16진수는 6개의 16진수를 연결하여 얻어지는데, 이 예에서는 2468A0입니다.

세 가지 색상 값 중 하나가 10 헥스(십진법 16) 미만인 경우에는 선두 0으로 표시해야 삼중항이 항상 정확히 6자리를 가질 수 있습니다. 예를 들어, 십진수 3진수 4, 8, 16은 육진수 04, 08, 10으로 표시되며, 육진수 040810을 구성합니다.

이 시스템으로 표현할 수 있는 색상의 수는 16 또는 256 또는 2 = 16, 777,216입니다.

16진법

약칭된 세 자리(16진수) 또는 네 자리 형식을 사용할 수 [5]있지만 소프트웨어 또는 유지보수 스크립트가 긴 형식만 예상하는 경우 오류가 발생할 수 있습니다. 이 양식을 6자리 형태로 확장하면 각 자리를 반복하는 것처럼 간단합니다. 09C는 0099가 됩니다.다음 CSS 예에 제시된 CC:

.세 자릿수 { 색.: #09C;    } .여섯 자리   { 색.: #0099CC; } /* 위와 같은 색 */ 

이 약어 형태는 팔레트를 4,096색으로 줄이며, 이는 전체 6자리 형태(16,777,216색)를 사용하는 24비트 색상과 동일한 수준입니다. 이 제한은 많은 텍스트 기반 문서에 충분합니다.

RGB를 16진수로 변환

RGB 값은 일반적으로 0~255 범위에서 제공되며, 0~1 범위에 있으면 변환 전에 값에 255를 곱합니다. 이 숫자를 16으로 나누면 (정수 나눗셈, 나머지는 무시) 첫 번째 16진수(0에서 F 사이)가 나옵니다. 여기서 문자 A에서 F까지는 숫자 10에서 15를 나타냅니다. 자세한 내용은 16진수 참조). 나머지는 두 번째 16진수 숫자를 제공합니다. 예를 들어, RGB 값 201은 16개의 12개 그룹으로 나뉘며, 따라서 첫 번째 숫자는 C입니다. 9의 나머지는 16진수 C9를 나타냅니다. 이 과정은 세 가지 색상 값 각각에 대해 반복됩니다.

숫자 기반 간 변환은 휴대용 모델과 최신 운영 체제와 함께 제공되는 소프트웨어 계산기를 모두 포함하는 계산기의 공통 기능입니다. 특별히 색상 값을 변환하기 위한 웹 기반 도구도 사용할 수 있습니다.

HTML 색 이름

최근 W3C 색상명 규격은 기본 색상과 확장 색상을 구분합니다.[6] HTML 및 XHTML에서 색상은 텍스트, 배경 색상, 프레임 경계, 테이블 및 개별 테이블 셀에 사용할 수 있습니다.[7]

기본색상

기본 색상은 HTML 4.01 규격에 정의된 16가지 색상으로,[8] 1999년에 승인되었으며 다음과 같습니다. (이 문맥에서 이름은 대소문자를 구분하지 않도록 정의됨)

CSS 1–2.0, HTML 3.2–4 및 VGA 색상 이름
이름. 육각형
(RGB)
빨간.
(RGB)
초록의
(RGB)
파랑색
(RGB)

(HSL/HSV)
토요일.
(HSL)

(HSL)
토요일.
(HSV)
가치
(HSV)
CGA 번호(이름); 별칭
하얀색 #FFFFFF 100% 100% 100% 0° 0% 100% 0% 100% 15(화이트)
실버 #C0C0C0 75% 75% 75% 0° 0% 75% 0% 75% 07(라이트그레이)
회색 #808080 50% 50% 50% 0° 0% 50% 0% 50% 08(다크그레이)
블랙입니다. #000000 0% 0% 0% 0° 0% 0% 0% 0% 00(블랙)
빨간. #FF0000 100% 0% 0% 0° 100% 50% 100% 100% 12(하이레드)
마룬 #800000 50% 0% 0% 0° 100% 25% 100% 50% 04(저적색)
노란 색 #FFFF00 100% 100% 0% 60° 100% 50% 100% 100% 14(노란색)
올리브 #808000 50% 50% 0% 60° 100% 25% 100% 50% 06(갈색)
라임 #00FF00 0% 100% 0% 120° 100% 50% 100% 100% 10(하이그린);그린
초록의 #008000 0% 50% 0% 120° 100% 25% 100% 50% 02(저녹색)
아쿠아 #00FFFF 0% 100% 100% 180도 100% 50% 100% 100% 11(하이 시안); 시안
청록색 #008080 0% 50% 50% 180도 100% 25% 100% 50% 03(저청색)
파랑색 #0000FF 0% 0% 100% 240° 100% 50% 100% 100% 09(하이블루)
네이비 #000080 0% 0% 50% 240° 100% 25% 100% 50% 01(저청색)
푹샤 #FF00FF 100% 0% 100% 300° 100% 50% 100% 100% 13(높은 마젠타); 마젠타
퍼플 #800080 50% 0% 50% 300° 100% 25% 100% 50% 05(낮은 마젠타)

이 16가지 색상은 sRGB로 분류되어 HTML 3.0 사양에 포함되었으며 "Windows VGA 팔레트에서 지원되는 표준 16가지 색상"이라고 언급했습니다.[9]

확장색

SVG 버전의 X11 색상 이름
SVG1.1 UHD(4K) 해상도의 sRGB hex/dec 및 HSL 코드로 명명된 색상

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

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

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

CSS3 규격의 웹 "X11 색상" 목록은 16진수 및 10진수에 해당하는 색상과 함께 다음과 같습니다. W3C 표준의 알파벳 순서 목록을 비교합니다. 여기에는 아쿠아(HTML4/CSS 1.0 표준 명칭)와 시안(공통 sRGB 명칭), 푹시아(HTML4/CSS 1.0 표준 명칭)와 마젠타(공통 sRGB 명칭), 그레이(HTML4/CSS 1.0 표준 명칭), 그레이(HTML4/CSS 1.0 표준 명칭)의 공통 동의어가 포함됩니다.[11][12]

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

CSS컬러

Cascading Style Sheets 사양은 Internet Explorer(IE) 3.0 및 Netscape Navigator 3.0에서 인식된 총 140개의 이름에 대해 HTML 4 사양과 동일한 수, 즉 16개의 HTML 색상 및 Netscape X11 색상 목록의 124개 색상을 정의합니다.[13] Blooberry.com 은 오페라 2.1과 사파리 1도 넷스케이프의 확장된 140개의 색상 이름 목록을 포함했지만 나중에 윈도우 98에서 오페라 3.5에 포함되지 않은 14개의 이름을 발견했다고 언급합니다.

CSS 2.1에서는 16개의 HTML4 색상을 17번째 색상으로 하여 섹션에 '오렌지'(140개 중 하나) 색상이 추가되었습니다.[15] CSS3.0 규격은 "HTML4 color keywords" 섹션에 오렌지를 포함하지 않았으며, 이는 "Basic color keywords"로 이름이 변경되었습니다.[16] 같은 참고로, "SVG 컬러 키워드" 섹션은 이전 작업 초안에서 "X11 컬러 키워드"로 시작한 후 "Extended color 키워드"로 이름이 변경되었습니다.[17] 레벨 4 컬러 모듈의 작업 초안은 기본 섹션과 확장 섹션을 간단한 "이름이 지정된 색상" 섹션에 함께 결합합니다.[18]

CSS 2.1에 추가된 색상
이름. 육각형
(RGB)
빨간.
(RGB)
초록의
(RGB)
파랑색
(RGB)

(HSL/HSV)
토요일.
(HSL)

(HSL)
토요일.
(HSV)
가치
(HSV)
별칭
오렌지색 #FFA500 100% 65% 0% 39° 100% 50% 100% 100%

CSS 2, SVG 및 CSS 2.1을 통해 웹 작성자는 운영 체제에서 값을 가져온 색상 이름인 시스템 색상을 사용할 수 있으며, 운영 체제에서 강조된 텍스트 색상을 선택하거나 툴팁 제어를 위한 배경 색상을 선택할 수 있습니다. 이를 통해 웹 작성자는 사용자 에이전트의 운영 체제에 맞게 콘텐츠를 스타일링할 수 있습니다.[19] CSS3 컬러 모듈은 CSS3 UI 시스템 외관 속성에 유리하도록 시스템 색상의 사용을 감소시켰으며,[20][21] 그 자체는 CSS3에서 삭제되었습니다.[22]

예제 시스템 색상 키워드
외모 키워드
링크 텍스트
방문했다본문
활성 텍스트
하이라이트
마크.

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

/* RGB 모델 */ p { 색.: #F00 } /* #rgb */ p { 색.: #FF0000 } /* #rrggbb */ p { 색.: rgb(255, 0, 0) } /* 정수 범위 0 - 255 */ p { 색.: rgb(100%, 0%, 0%) } /* 플로트 범위 0.0% - 100.0% */  /* 알파 채널이 있는 RGB, CSS3에 추가 */ p { 색.: rgba(255, 0, 0, 0.5) } /* 0.5 불투명도, 반transpa렌트 */  /* HSL 모델, CSS3에 추가 */ p { 색.: hsl(0, 100%, 50%) } /* 빨간색 */ p { 색.: hsl(120, 100%, 50%) } /* 녹색*/ p { 색.: hsl(120, 100%, 25%) } /* 짙은 녹색 */ p { 색.: hsl(120, 100%, 75%) } /* 연두색 */ p { 색.: hsl(120, 50%, 50%) } /* 파스텔 그린 */  /* 알파 채널이 있는 HSL 모델 */ p { 색.: hsla(120, 100%, 50%, 1) } /* 녹색*/ p { 색.: hsla(120, 100%, 50%, 0.5) } /* 반 transpa렌트 그린 */ p { 색.: hsla(120, 100%, 50%, 0.1) } /* 매우 투명한 녹색 */ 

CSS도 특별한 색상을 지원합니다. transparent, 이 값은 알파 값이 0임을 나타냅니다. 기본적으로, transparent 보이지 않는 공칭 블랙으로 렌더링됩니다. rgba(0, 0, 0, 0). CSS1에 도입되었지만 버전에 따라 사용 범위가 확장되었습니다.[23]

CSS 컬러 4

CSS 컬러 사양의 레벨 4는 몇 가지 새로운 CSS 컬러 포맷을 도입했습니다.[24]

색상을 작성하는 새로운 방법 외에도 색상 구배에서 잘 알려진 문제를 해결하기 위한 첫 단계인 비-sRGB 색상 공간에서 색상을 혼합하는 개념도 소개합니다. 이론과 색역 매핑과 같은 일반적인 작동을 설명하는 일부 섹션도 구현을 돕기 위해 추가되었습니다.[24]

기기독립색

CSS Color 4에는 다음과 같은 여러 가지 장치 독립 색상 형식이 도입되어 있으며, 모든 가시 색상을 화면으로 표시할 수 있습니다.[25]

미리 정의된 색 공간

sRGB보다 넓은 영역의 RGB 공간도 이번 신제품을 통해 대거 선보였습니다. color() 기능:[25]

sRGB의 선형화된 변형도 색상 혼합에 대해 정의됩니다.[24]

다른 형식

2014년 6월 21일, CSS WG는 2014년 6월 7일에 사망한 에릭 마이어의 딸 레베카를 기념하기 위해 레베카 퍼플(RebeccaPurple)이라는 색상을 편집자의 디자인 모듈 레벨 4에 추가했습니다.[26]

CSS4 Colors 모듈에 추가된 색상
이름. 육각형
(RGB)
빨간.
(RGB)
초록의
(RGB)
파랑색
(RGB)

(HSL/HSV)
토요일.
(HSL)

(HSL)
토요일.
(HSV)
가치
(HSV)
별칭
레베카 퍼플 #663399 40% 20% 60% 270° 50% 40% 67% 60%

CSS4는 HSL/HSV의 대안으로 HWB 컬러 모델도 선보입니다.[18]

CSS 컬러 5

CSS Color 5[27] 사양 초안에는 다음과 같은 기존 색상을 혼합하고 조작하기 위한 구문이 소개되어 있습니다.

  • A color-mix() 색을 섞는 기능
  • 기존 색상의 성분을 조작하기 위한 상대 색상 구문

사용자 지정 색 공간은 ICC 프로파일을 통해서도 지원됩니다. 이를 통해 웹 페이지에서 CMYK를 사용할 수 있습니다.[27]

웹에 안전한 색상

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

"표준" 색상 팔레트를 만들기 위한 다양한 시도가 있었습니다. 256색 디스플레이에 망설임 없이 표시할 수 있는 색상 세트가 필요했습니다. 컴퓨터 운영 체제가 일반적으로 16~20개의 색상을 자체적으로 사용하도록 예약했기 때문에 216번이 선택되었습니다. 또한 동일한 간격으로 6개의 빨간색, 녹색 및 파란색 음영(6 × 6 × 6 = 216)을 허용하기 때문에 선택되었습니다. 각각 00에서 FF까지(두 한도 모두 포함).

색상 목록은 마치 디더링에 대한 면역성을 갖게 하는 특별한 특성을 가진 것처럼 표시되지만 256색 디스플레이의 응용 프로그램은 실제로 선택한 색상의 팔레트를 설정하여 나머지를 디더링할 수 있습니다. 이 색상은 다양한 브라우저 애플리케이션에서 선택한 팔레트와 일치하기 때문에 특별히 선택되었습니다. 다른 브라우저에서 사용되는 팔레트는 크게 다르지 않았습니다.[citation needed]

웹-세이프 색상은 응용 프로그램 간에 팔레트를 공유하는 X11과 같은 시스템에서는 더 작은 색 큐브(5×5×5 또는 4×4)가 브라우저에 의해 할당되는 단점이 있었습니다. 더 큰 범위의 색상을 가진 이미지를 제공하고 브라우저가 이중 양자화의 품질 손실을 겪지 않고 필요한 경우 색상 공간을 양자화할 수 있도록 함으로써 다른 결과를 얻었습니다.

2000년대 들어 개인용 컴퓨터에서 256색 디스플레이의 사용이 급감하면서 24비트(TrueColor) 디스플레이를 선호하게 되었고,[29] "웹 세이프(web-safe)" 색상의 사용은 실용적으로 사용되지 않게 되었습니다.

"web-safe" 색상은 모두 표준 이름이 있는 것은 아니지만 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가지 색상을 "정말 안전한 팔레트"라고 불렀습니다. 그것은 주로 녹색, 노란색, 그리고 청록색의 색조로 구성되어 있습니다.[30][31]

가장 안전한 웹 색상
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*

접근성

색상선택

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

(브라우저의 기본 색상을 호출하기 위해) 색상을 지정하지 않거나 배경 및 모든 전경 색상(예: 일반 텍스트, 방문하지 않은 링크, 호버 링크, 활성 링크 및 방문한 링크의 색상)을 모두 지정하여 흰색 효과검은색 또는 흰색을 방지해야 합니다.[32]

색 대비

Web Content Accessibility Guidelines에서는 텍스트의 상대적인 휘도와 배경색[33] 사이의 대비비를 4.5:1 이상 또는 큰 텍스트의 경우 3:1 이상을 권장합니다. 향상된 접근성을 위해서는 7:1 이상의 명암비가 필요합니다.

그러나 접근성 문제를 해결하는 것은 단순히 대비 비율을 높이는 문제가 아닙니다. 웹 접근성 이니셔티브의 보고서에서 알 수 있듯이 난독증 판독기는 최대치 미만의 대비 비율로 제공되는 것이 더 좋습니다.[34] 이들이 언급하는 권장 사항은 오프화이트(#FFFE5)의 오프블랙(#0A0A0A)과 크림(#FAFAC8)의 블랙(#0000)의 콘트라스트비가 각각 11.7:1과 20.3:1입니다. 다른 색상 쌍 중 짙은 녹색(#A0A000)의 갈색(#2800)은 WCAG 권고치보다 낮은 3.24:1의 명암비를 가지며, 밝은 녹색(#B9B900)의 짙은 갈색(#1E1E00)은 4.54:1의 명암비를 가지며, 노란색(#FFF00)의 청색(#00007D)은 11.4:1의 명암비를 갖습니다. 보고서에 이름이 지정된 색상은 동일한 이름의 웹 색상과 다른 색상 값을 사용합니다.

참고 항목

참고문헌

  1. ^ Niederst Robbins, Jennifer (February 2006). "Appendix D: Specifying Color". Web Design in a Nutshell. O'Reilly. p. 830. ISBN 978-0-596-00987-8.
  2. ^ 요크, 리처드 CSS 시작, 71~72쪽.
  3. ^ Pemberton, Steven; Pettit, Brad (7 June 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). "CSS Color Module Level 3". W3C. section 4.2.1. RGB color values.
  4. ^ Sharma, Gaurav; Bala, Raja (19 December 2017). Digital Color Imaging Handbook. CRC Press. ISBN 978-1-4200-4148-4.
  5. ^ Pemberton, Steven; Pettit, Brad (7 June 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). "4.2.1. RGB color values". CSS Color Module Level 3. W3C. Retrieved 19 March 2013.
  6. ^ a b "CSS Color Module Level 3". W3c. Retrieved 19 July 2020.
  7. ^ Powell, Thomas A. (2010). HTML & CSS: The Complete Reference, Fifth Edition. New York: McGraw-Hill. p. 765. ISBN 9780071741705.
  8. ^ "HTML 4.01 Specification Basic HTML data types Colors". W3C. Retrieved 8 July 2013.
  9. ^ Raggett, Dave. "HTML 3.2 Reference Specification The BODY element". W3C. Retrieved 8 July 2013.
  10. ^ Lilley, Chris (24 April 2002). "Re: color names in SVG-1.0 conflict with /usr/lib/X11/rgb.txt". W3C Public mailing list archives. Retrieved 8 July 2013.
  11. ^ Pemberton, Steven; Pettit, Brad (7 June 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). "4.3. Extended color keywords". CSS Color Module Level 3. W3C. Retrieved 19 March 2013.
  12. ^ "Scalable Vector Graphics (SVG) 1.1 (Second Edition) Basic Data Types and Interfaces Recognized color keyword names". W3C. 16 August 2011. Retrieved 1 February 2019.
  13. ^ "The X11 Color Set". Computing and Networking in HSEAS. Archived from the original on 14 July 2014. Retrieved 6 July 2014.
  14. ^ Brian Wilson. "Colors in HTML and CSS". blooberry.com. Retrieved 6 July 2014.
  15. ^ "CSS 2.1 Specification: Syntax and basic data types: Colors". W3C. 8 September 2009. Retrieved 21 December 2009.
  16. ^ "CSS Color Module Level 3 – Proposed Recommendation - 11. Changes". W3C. 28 October 2010. Retrieved 6 July 2014.
  17. ^ "CSS3 module: Color Working Draft". W3C. 18 April 2002. Retrieved 6 July 2014.
  18. ^ a b "CSS Color Module Level 4 – Named Colors".
  19. ^ "User interface – System colors". W3C. Retrieved 8 July 2013.
  20. ^ Pemberton, Steven; Pettit, Brad (7 June 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). "4.5.1. CSS2 system colors". CSS Color Module Level 3. W3C. Retrieved 19 March 2013.
  21. ^ "CSS3 Basic User Interface Module System Appearance". W3C. Retrieved 8 July 2013.
  22. ^ Çelik, Tantek, ed. (17 January 2012). "List of substantial changes". CSS Basic User Interface Module Level 3. W3C. Retrieved 19 March 2013. System Appearance has been dropped, including appearance values & property, and system fonts / extension of the 'font' property shorthand.
  23. ^ a b Pemberton, Steven; Pettit, Brad (7 June 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). "4.2.4. HSL color values". CSS Color Module Level 3. W3C. Retrieved 19 March 2013.
  24. ^ a b c d "CSS Color Module Level 4". W3C. Retrieved 14 March 2022.
  25. ^ a b "CSS Color Module Level 4: Overview". W3C. Retrieved 11 January 2022.
  26. ^ Glazman, Daniel (21 June 2014). "Re: [CfC] adding 'rebeccapurple' to CSS Color Level 4". Post to www-style mailing list. W3C. Retrieved 24 June 2014.
  27. ^ a b CSS 컬러 모듈 레벨 5
  28. ^ Jenkins, Sue (27 December 2012). Web Design All-in-One For Dummies. John Wiley & Sons. ISBN 9781118404119.
  29. ^ "Browser Display Statistics". W3schools.com. Retrieved 8 July 2013.
  30. ^ Lehn, David; Stern, Hadley. "Death of the Websafe Color Palette?". asc.ohio-state.edu. Archived from the original on 3 March 2021. Retrieved 3 March 2021.
  31. ^ Piperoglou, Stephanos (13 December 2000). "Web Color Reference - HTML with Style 4". WebReference. Archived from the original on 23 November 2016. Retrieved 5 January 2016.
  32. ^ "If You Pick One Color, Pick Them All". W3C. Retrieved 8 July 2013.
  33. ^ WCAG 2.0 가이드라인 1.4
  34. ^ 난독증 환자의 가독성 향상을 위한 최적의 색상

외부 링크