기본 컬러 차트입니다. 스타일의 색상은 16진수 값, 이름, RGB, RGBA, HSL, HSLA 형식 등 다양한 방법으로 지정할 수 있습니다. 우선순위 색상: 색상 속성
색상표(팔레트) html필요한 톤을 독립적으로 선택할 수 있는 기회를 제공합니다. 색상 값은 Hex, RGB, HSV의 세 가지 형식으로 표시됩니다.
- Hex는 16진수 체계의 2자리 값 3개로 구성됩니다. 예: #ff00b3, 여기서 첫 번째 숫자 쌍은 빨간색, 두 번째 숫자 쌍은 녹색, 세 번째 숫자 쌍은 파란색입니다.
- RGB(RedGreenBlue)는 결과 색상에서 해당 톤(빨간색, 녹색, 파란색)의 양을 나타내는 "200,100,255" 형식을 갖습니다.
- HSV(색조, 채도, 값 - 톤, 채도, 값) - 좌표가 다음과 같은 색상 모델입니다.
- 색조 - 색상 톤은 0°에서 360°까지 다양합니다.
- 채도 - 채도는 0-100 또는 0-1 범위입니다. 이 매개변수가 높을수록 색상이 "더 순수"하므로 이 매개변수를 색상 순도라고도 합니다. 이 매개변수가 0에 가까울수록 색상은 중성 회색에 가까워집니다.
- 값(색상 값) - 밝기를 설정하며 값은 0-100 또는 0-1 사이에서 달라질 수도 있습니다.
색상 코드 입력: 가다
이름이 있는 색상 목록
표에는 모든 브라우저에서 지원하는 영어 색상 이름(값으로 사용 가능)과 해당 16진수 값이 나열되어 있습니다. 나열된 모든 색상은 "안전"합니다. 즉, 모든 브라우저에서 동일하게 표시됩니다.
| 색상명 | 마녀 | 색상 |
|---|---|---|
| 검은색 | #000000 | |
| 해군 | #000080 | |
| 진한 파란색 | #00008B | |
| 미디엄블루 | #0000CD | |
| 파란색 | #0000FF | |
| 짙은 녹색 | #006400 | |
| 녹색 | #008000 | |
| 물오리 | #008080 | |
| 다크시안 | #008B8B | |
| 딥스카이블루 | #00BFFF | |
| 어두운 청록색 | #00CED1 | |
| 중간봄녹색 | #00FA9A | |
| 라임 | #00FF00 | |
| 스프링그린 | #00FF7F | |
| 아쿠아 | #00FFFF | |
| 청록색 | #00FFFF | |
| 자정 블루 | #191970 | |
| 다저블루 | #1E90FF | |
| 빛바다녹색 | #20B2AA | |
| 포레스트그린 | #228B22 | |
| 씨그린 | #2E8B57 | |
| 다크슬레이트그레이 | #2F4F4F | |
| 라임그린 | #32CD32 | |
| 중간바다녹색 | #3CB371 | |
| 터키 옥 | #40E0D0 | |
| 로얄 블루 | #4169E1 | |
| 스틸블루 | #4682B4 | |
| 다크슬레이트블루 | #483D8B | |
| 중간 청록색 | #48D1CC | |
| 남빛 | #4B0082 | |
| 다크올리브그린 | #556B2F | |
| 생도블루 | #5F9EA0 | |
| 수레 국화블루 | #6495ED | |
| 미디엄아쿠아마린 | #66CDAA | |
| 희미한 회색 | #696969 | |
| 슬레이트블루 | #6A5ACD | |
| 올리브드랩 | #6B8E23 | |
| 슬레이트 그레이 | #708090 | |
| 라이트슬레이트그레이 | #778899 | |
| 중간슬레이트블루 | #7B68EE | |
| 잔디녹색 | #7CFC00 | |
| 연두빛 | #7FFF00 | |
| 남옥 | #7FFFD4 | |
| 적갈색 | #800000 | |
| 보라 | #800080 | |
| 올리브 | #808000 | |
| 회색 | #808080 | |
| 하늘색 | #87CEEB | |
| 밝은하늘색 | #87CEFA | |
| 블루바이올렛 | #8A2BE2 | |
| 다크레드 | #8B0000 | |
| 다크마젠타 | #8B008B | |
| 안장브라운 | #8B4513 | |
| 어두운바다녹색 | #8FBC8F | |
| 연한 초록색 | #90EE90 | |
| 미디엄퍼플 | #9370D8 | |
| 다크바이올렛 | #9400D3 | |
| 옅은 녹색 | #98FB98 | |
| 다크오키드 | #9932CC | |
| 연두색 | #9ACD32 | |
| 시에나 | #A0522D | |
| 갈색 | #A52A2A | |
| 짙은 회색 | #A9A9A9 | |
| 라이트 블루 | #ADD8E6 | |
| 녹색노란색 | #ADFF2F | |
| 창백한 청록색 | #AFEEEE | |
| 라이트스틸블루 | #B0C4DE | |
| 파우더블루 | #B0E0E6 | |
| 내화 벽돌 | #B22222 | |
| 어두운황금막대 | #B8860B | |
| 미디엄오키드 | #BA55D3 | |
| 로지브라운 | #BC8F8F | |
| 다크카키 | #BDB76B | |
| 은 | #C0C0C0 | |
| 중간보라색빨간색 | #C71585 | |
| 인도의레드 | #CD5C5C | |
| 페루 | #CD853F | |
| 초콜릿 | #D2691E | |
| 탠 껍질 | #D2B48C | |
| 라이트그레이 | #D3D3D3 | |
| 창백한보라색빨간 | #D87093 | |
| 엉겅퀴 훈장 | #D8BFD8 | |
| 난초 | #DA70D6 | |
| 골든로드 | #DAA520 | |
| 진홍 | #DC143C | |
| 게인즈버러 | #DCDCDC | |
| 자두 | #DDA0DD | |
| 벌리우드 | #DEB887 | |
| 밝은 청록색 | #E0FFFF | |
| 라벤더 | #E6E6FA | |
| 다크샐몬 | #E9967A | |
| 제비꽃 | #EE82EE | |
| 창백한황금막대 | #EEE8AA | |
| 라이트산호 | #F08080 | |
| 카키색 옷감 | #F0E68C | |
| 앨리스블루 | #F0F8FF | |
| 단물 | #F0FFF0 | |
| 하늘빛 | #F0FFFF | |
| 샌디브라운 | #F4A460 | |
| 밀 | #F5DEB3 | |
| 베이지 | #F5F5DC | |
| 화이트스모크 | #F5F5F5 | |
| 민트크림 | #F5FFFA | |
| 고스트화이트 | #F8F8FF | |
| 연어 | #FA8072 | |
| 고대의화이트 | #FAEBD7 | |
| 리넨 | #FAF0E6 | |
| 빛황금막대황색 | #FAFAD2 | |
| 낡은레이스 | #FDF5E6 | |
| 빨간색 | #FF0000 | |
| 푹샤 | #FF00FF | |
| 마젠타 | #FF00FF | |
| 딥핑크 | #FF1493 | |
| 오렌지 레드 | #FF4500 | |
| 토마토 | #FF6347 | |
| 핫 핑크 | #FF69B4 | |
| 산호 | #FF7F50 | |
| 어두운주황색 | #FF8C00 | |
| 라이트연어 | #FFA07A | |
| 주황색 | #FFA500 | |
| 라이트핑크 | #FFB6C1 | |
| 분홍색 | #FFC0CB | |
| 금 | #FFD700 | |
| 피치퍼프 | #FFDAB9 | |
| 나바호어화이트 | #FFDEAD | |
| 모카신 | #FFE4B5 | |
| 비스크 | #FFE4C4 | |
| 미스티로즈 | #FFE4E1 | |
| 데친 아몬드 | #FFEBCD | |
| 파파야채찍 | #FFEFD5 | |
| 라벤더블러쉬 | #FFF0F5 | |
| 조개 | #FFF5EE | |
| 옥수수 실크 | #FFF8DC | |
| 레몬쉬폰 | #FFFACD | |
| 꽃무늬화이트 | #FFFAF0 | |
| 눈 | #FFFAFA | |
| 노란색 | #FFFF00 | |
| 연노랑 | #FFFFE0 | |
| 상아 | #FFFFFF0 | |
| 하얀색 | #FFFFFF |
HTML 색상은 슬래시 문자 뒤에 6개의 문자로 표시됩니다(예: #000000). 이 6개의 기호는 최종 색상의 다양한 색상(빨간색, 녹색, 파란색)의 비율을 나타냅니다. 컴퓨터 모니터에서 이미지는 픽셀이라고 불리는 수많은 점으로 구성됩니다. 각 픽셀은 작은 광원입니다. 이를 "손전등"이라고 부르겠습니다. 이는 빨간색, 녹색, 파란색의 세 가지 손전등으로 구성됩니다. 개별 색상의 손전등의 빛의 강도를 줄이거 나 늘리면 원하는 색상을 얻을 수 있습니다.
HTML 색상 코드
HTML의 색상은 빨간색, 파란색, 녹색(RGB)의 16진수(HEX) 표기법으로 표시됩니다.
가장 작은 색상 값은 0(16진수 00)입니다. 가장 높은 색상 값은 255(16진수 FF)입니다.
16진수 색상 값은 # 기호로 시작하는 세 자리 숫자입니다.
색상 코드(의미)
| 색상 | 16진수 코드 | RGB 코드 |
|---|---|---|
| #000000 | RGB(0,0,0) | |
| #FF0000 | RGB(255,0,0) | |
| #00FF00 | RGB(0,255,0) | |
| #0000FF | RGB(0,0,255) | |
| #FFFF00 | RGB(255,255,0) | |
| #00FFFF | RGB(0,255,255) | |
| #FF00FF | RGB(255,0,255) | |
| #C0C0C0 | RGB(192,192,192) | |
| #FFFFFF | RGB(255,255,255) |
1,600만 가지 색상
빨간색, 파란색, 녹색을 각 색상의 백분율로 0~255 범위의 값으로 결합하면 총 1,600만 개 이상의 음영(256 x 256 x 256)이 생성됩니다.
대부분의 최신 모니터는 최소 16,384개의 다양한 음영을 표시할 수 있습니다(LCD 모니터는 일반적으로 262,1600만 개를 표시할 수 있음). (2013년 10월 업데이트) CRT 모니터는 사실상 무제한의 색상을 표시할 수 있습니다.
아래 색상표는 파란색과 녹색 값이 0인 0에서 255까지 빨간색 비율의 변화를 보여줍니다.
| 빨간색 | 16진수 코드 | RGB 코드 |
|---|---|---|
| #000000 | RGB(0,0,0) | |
| #080000 | RGB(8,0,0) | |
| #100000 | RGB(16,0,0) | |
| #180000 | RGB(24,0,0) | |
| #200000 | RGB(32,0,0) | |
| #280000 | RGB(40,0,0) | |
| #300000 | RGB(48,0,0) | |
| #380000 | RGB(56,0,0) | |
| #400000 | RGB(64,0,0) | |
| #480000 | RGB(72,0,0) | |
| #500000 | RGB(80,0,0) | |
| #580000 | RGB(88,0,0) | |
| #600000 | RGB(96,0,0) | |
| #680000 | RGB(104,0,0) | |
| #700000 | RGB(112,0,0) | |
| #780000 | RGB(120,0,0) | |
| #800000 | RGB(128,0,0) | |
| #880000 | RGB(136,0,0) | |
| #900000 | RGB(144,0,0) | |
| #980000 | RGB(152,0,0) | |
| #A00000 | RGB(160,0,0) | |
| #A80000 | RGB(168,0,0) | |
| #B00000 | RGB(176,0,0) | |
| #B80000 | RGB(184,0,0) | |
| #C00000 | RGB(192,0,0) | |
| #C80000 | RGB(200,0,0) | |
| #D00000 | RGB(208,0,0) | |
| #D80000 | RGB(216,0,0) | |
| #E00000 | RGB(224,0,0) | |
| #E80000 | RGB(232,0,0) | |
| #F00000 | RGB(240,0,0) | |
| #F80000 | RGB(248,0,0) | |
| #FF0000 | RGB(255,0,0) |
회색의 그늘
회색 음영을 얻으려면 모든 색상이 동일하게 사용됩니다. 올바른 색상을 더 쉽게 선택할 수 있도록 회색 음영 코드를 제공합니다.
| 회색의 그늘 | 16진수 코드 | RGB 코드 |
|---|---|---|
| #000000 | RGB(0,0,0) | |
| #080808 | RGB(8,8,8) | |
| #101010 | RGB(16,16,16) | |
| #181818 | RGB(24,24,24) | |
| #202020 | RGB(32,32,32) | |
| #282828 | RGB(40,40,40) | |
| #303030 | RGB(48,48,48) | |
| #383838 | RGB(56,56,56) | |
| #404040 | RGB(64,64,64) | |
| #484848 | RGB(72,72,72) | |
| #505050 | RGB(80,80,80) | |
| #585858 | RGB(88,88,88) | |
| #606060 | RGB(96,96,96) | |
| #686868 | RGB(104,104,104) | |
| #707070 | RGB(112,112,112) | |
| #787878 | RGB(120,120,120) | |
| #808080 | RGB(128,128,128) | |
| #888888 | RGB(136,136,136) | |
| #909090 | RGB(144,144,144) | |
| #989898 | RGB(152,152,152) | |
| #A0A0A0 | RGB(160,160,160) | |
| #A8A8A8 | RGB(168,168,168) | |
| #B0B0B0 | RGB(176,176,176) | |
| #B8B8B8 | RGB(184,184,184) | |
| #C0C0C0 | RGB(192,192,192) | |
| #C8C8C8 | RGB(200,200,200) | |
| #D0D0D0 | RGB(208,208,208) | |
| #D8D8D8 | RGB(216,216,216) | |
| #E0E0E0 | RGB(224,224,224) | |
| #E8E8E8 | RGB(232,232,232) | |
| #F0F0F0 | RGB(240,240,240) | |
| #F8F8F8 | RGB(248,248,248) | |
| #FFFFFF | RGB(255,255,255) |
크로스 브라우저(모든 브라우저) HTML 색상 이름
모든 브라우저에서 지원되는 HTML 형식의 150개 색상 이름 모음입니다.
표준화된 색상 이름
W3C에는 HTML 및 CSS에 유효한 16가지 색상 이름이 나열되어 있습니다: 아쿠아, 블랙, 블루, 퓨샤, 그레이, 그린, 라임, 적갈색(밤나무), 네이비(울트라마린), 올리브(올리브), 보라색(보라색), 빨간색(빨간색) , 은색(은색), 청록색(회색), 흰색(흰색) 및 노란색(노란색).
이 목록에 포함되지 않은 색상을 사용할 경우 해당 색상의 16진수(HEX) 코드나 RGB 코드를 사용하는 것이 더 정확합니다.
안전한 색상
몇 년 전, 컴퓨터가 최대 256가지 색상을 지원할 수 있었을 때 216가지 "웹 안전 색상" 목록이 제안되었으며 40가지 색상은 시스템용으로 예약되었습니다.
이 216색 팔레트는 256색 팔레트 모드에서 색상을 올바르게 표시하기 위해 만들어졌습니다.
이제 이것은 중요하지 않습니다. 전 세계 대부분의 컴퓨터가 수백만 가지 색상 음영을 지원하기 때문입니다. 어쨌든 다음은 이러한 색상 목록입니다.
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
이 페이지에는 HTML, CSS, JavaScript, Flash 등과 같은 웹 개발자 언어에서 색상을 표시하는 데 사용할 수 있는 키워드가 포함된 표가 포함되어 있습니다.
WC3 문제에 대한 이전 사양에서는 HTML 및 CSS에서 색상이 설정된 도움으로 16개의 키워드만 지정되었습니다. 또한 보다 현대적인 사양에는 색상 이름을 나타내는 130개의 키워드가 추가되었습니다. 다음 표에는 색상 이름과 이에 해당하는 16진수 및 RGB 코드가 포함되어 있습니다.
CSS 규칙에 따라 색상 이름은 대소문자를 구분하지 않습니다. 색상 항목 IndianRed와 indianred는 동일합니다.
또한 표에 있는 146개의 키워드 중 실제로 색상이 더 적다는 점도 주목할 가치가 있습니다. 일부 키워드가 동일한 색상을 참조하기 때문입니다. 따라서 Gray 및 Gray라는 이름은 50% 회색 색상 코드 #808080을 나타내고 Magenta라는 단어는 16진수 코드 #FF00FF에 해당하는 HTML 색상 Fuchsia의 동의어입니다. 또한 Aqua와 Cyan이라는 단어는 동의어이며 코드 #00FFFF에 해당합니다.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||