웹 컬러
Web colors| HTML |
|---|
| 비교 |
웹 색상은 월드 와이드 웹에서 웹 페이지를 표시하는 데 사용되는 색상으로, 세 가지 방법으로 설명할 수 있습니다: 색상은 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년에 승인되었으며 다음과 같습니다. (이 문맥에서 이름은 대소문자를 구분하지 않도록 정의됨)
| 이름. | 육각형 (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]
확장색
확장 색상은 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]
| 이름. | 육각형 (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%) }