웹 디자인에서 색상을 표현하는 방법에는 여러 가지가 있습니다.
HEX는 16진수를 기반으로 한 16진수 색상 표현 시스템입니다. 이 시스템의 경우 0~9의 아랍어 십진수와 A~F의 라틴 문자를 사용하여 디지털 숫자를 16으로 보완합니다. 웹 디자인의 경우 16가지 기본(키) 색상 소위 16진수 색상 코드 #RRGGBB가 사용됩니다. 여기서 각 쌍은 RR(빨간색), GG(녹색), BB(파란색)의 색상 점유율을 담당합니다. 각 색상 분수의 범위는 00에서 FF까지입니다.
웹 디자인에서 색상을 나타내는 다른 두 가지 방법은 RGB(*,*,*) 형식입니다. 여기서 색상의 각 "*" 부분은 0에서 255까지의 십진수와 색상 이름으로 표시됩니다. 영어.
컬러 이미지를 만들 때 가장 큰 문제는 색상을 올바르게 재현하는 것입니다. 다른 유형컴퓨터, 모니터 및 브라우저. 브라우저가 색상을 올바르게 표시할 수 없는 경우 유사한 색상을 선택하거나 여러 색상을 혼합합니다. 때로는 완전히 다른 색상으로 대체될 수도 있습니다.
테이블 16가지 기본 색상, 모든 브라우저에서 사용됨
이름 | 색상 | 마녀 | (RGB) |
아쿠아(바다의 물결) | #00FFFF | (000,255,255) | |
검은색 | #000000 | (000,000,000) | |
파란색 | #0000FF | (000,000,255) | |
퓨샤(마젠타) | #FF00FF | (255,000,255) | |
회색 | #808080 | (128,128,128) | |
녹색 | #008000 | (000,128,000) | |
라임(밝은 녹색) | #00FF00 | (000,255,000) | |
마룬(다크 버건디) | #800000 | (128,000,000) | |
네이비(감색) | #000080 | (000,000,128) | |
올리브 | #808000 | (128,128,000) | |
보라 | #800080 | (128,000,128) | |
빨간색 | #FF0000 | (255,000,000) | |
은 | #C0C0C0 | (192,192,192) | |
청록색(회색-녹색) | #008080 | (000,128,128) | |
하얀색 | #FFFFFF | (255,255,255) | |
노란색 | #FFFF00 | (255,255,000) |
테이블 보라색상과 그 음영
이름 | 색상 | 마녀 | (RGB) |
마젠타(마젠타) | #FFCBDB | (255,203,219) | |
마젠타(마젠타) | #FF0099 | (255,000,153) | |
마젠타(마젠타) | #F95A61 | (249,090,097) | |
퓨샤(퓨샤) | #FF00FF | (255,000,255) | |
모베인(아닐린 퍼플) | #EF0097 | (239,000,151) | |
사몬 핑크(오렌지 핑크) | #FF91A4 | (255,145,164) | |
Cenise(보라색 계열) | #DE3163 | (153,149,140) | |
가지 가지 (가지) | #990066 | (153,000,132) | |
라벤더 블러셔(분홍빛이 도는 라벤더) |  #FFF0F5 | (255,240,245) | |
라일락(라일락) | #C8A2C8 | (200,162,200) | |
마젠타(마젠타) | #FF008F | (255,000,143) | |
난초(난초) | #DA70D6 | (218,112,214) | |
적자색(보라색-빨간색) | #C71585 | (199,021,133) | |
Sanguine (낙천적) | #92000A | (146,000,010) | |
엉겅퀴(보라색) | #D8BFD8 | (185,211,238) | |
보라색 가지(보라색 색조) | #991199 | (153,017,153) | |
로사비보(딥핑크) | #FF007F | (255,000,127) | |
라벤더-장미(보라색 색조) | #FBA0E3 | (108,123,139) | |
마운트배튼 핑크 | #997ABD | (153,122,141) |
테이블 회색색상과 그 음영
이름 | 색상 | 마녀 | (RGB) |
회색 | #808080 | (128,128,128) | |
회색 | #베베베 | (190,190,190) | |
(회색 음영) | #858585 | (133,133,133) | |
그레이33 | #545454 | (084,084,084) | |
(회색 슬레이트) | #708090 | (112,128,144) | |
(석영) | #99958с | (153,149,140) | |
(밝은 회색) | #bbbbbb | (187,187,187) | |
(은) | #c0c0c0 | (192,192,192) | |
(회백색) | #f0f0f0 | (240,240,240) | |
(압델-케림의 턱수염) | #e0e0e0 | (224,224,224) | |
LightGray(밝은 회색) | #d3d3d3 | (211,211,211) | |
라이트스테이트그레이() | #778899 | (119,136,153) | |
StateGray-1(창백한 수레국화 파란색1) | #c6e2ff | (198,226,255) | |
StateGray-2(창백한 수레국화 파란색2) | #b9d3ee | (185,211,238) | |
StateGray3() | #9fb6cd | (159,182,205) | |
StateGray4() | #6c7b8b | (108,123,139) |
색상표(팔레트) 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 |
16진수는 색상을 지정하는 데 사용됩니다. 16진법은 10진법과 달리 이름에서 알 수 있듯이 숫자 16을 기반으로 합니다. 숫자는 다음과 같습니다: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C, D, E, F. 10부터 15까지의 숫자는 라틴 문자로 대체됩니다. 16진법에서 15보다 큰 숫자는 두 숫자를 하나로 결합하여 구성됩니다. 예를 들어, 숫자 255는 십진법 16진수 숫자 FF에 해당합니다. 숫자 체계를 결정할 때 혼동을 피하기 위해 해시 기호 #을 16진수 앞에 배치합니다(예: #666999). 빨간색, 녹색, 파란색의 세 가지 색상은 각각 00에서 FF까지의 값을 가질 수 있습니다. 따라서 색상 기호는 세 가지 구성 요소 #rrggbb로 나누어집니다. 여기서 처음 두 기호는 색상의 빨간색 구성 요소를 나타내고 중간 두 개는 녹색, 마지막 두 개는 파란색을 나타냅니다. 각 문자를 두 배로 늘려야 하는 축약형 #rgb를 사용할 수 있습니다. 따라서 #fe0 항목은 #ffee00으로 간주되어야 합니다.
이름으로
인터넷 익스플로러 | 크롬 | 오페라 | 원정 여행 | 파이어폭스 | 기계적 인조 인간 | iOS |
4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
브라우저는 이름별로 일부 색상을 지원합니다. 테이블에 1은 이름, 16진수 코드, RGB, HSL 값 및 설명을 보여줍니다.
이름 | 색상 | 암호 | RGB | HSL | 설명 |
---|---|---|---|---|---|
하얀색 | #ffffff 또는 #fff | RGB(255,255,255) | hsl(0.0%,100%) | 하얀색 | |
은 | #c0c0c0 | RGB(192,192,192) | hsl(0.0%,75%) | 회색 | |
회색 | #808080 | RGB(128,128,128) | hsl(0.0%,50%) | 어두운 회색 | |
검은색 | #000000 또는 #000 | RGB(0,0,0) | hsl(0.0%,0%) | 검은색 | |
적갈색 | #800000 | RGB(128,0,0) | hsl(0.100%,25%) | 진한 빨간색 | |
빨간색 | #ff0000 또는 #f00 | RGB(255,0,0) | hsl(0,100%,50%) | 빨간색 | |
주황색 | #ffa500 | RGB(255,165,0) | hsl(38.8,100%,50%) | 주황색 | |
노란색 | #ffff00 또는 #ff0 | RGB(255,255,0) | hsl(60,100%,50%) | 노란색 | |
올리브 | #808000 | RGB(128,128,0) | hsl(60,100%,25%) | 올리브 | |
라임 | #00ff00 또는 #0f0 | RGB(0,255,0) | hsl(120,100%,50%) | 연한 초록색 | |
녹색 | #008000 | RGB(0,128,0) | hsl(120,100%,25%) | 녹색 | |
아쿠아 | #00ffff 또는 #0ff | RGB(0,255,255) | hsl(180,100%,50%) | 파란색 | |
파란색 | #0000ff 또는 #00f | RGB(0,0,255) | hsl(240,100%,50%) | 파란색 | |
해군 | #000080 | RGB(0,0,128) | hsl(240,100%,25%) | 진한 파란색 | |
물오리 | #008080 | RGB(0,128,128) | hsl(180,100%,25%) | 청록색 | |
푹샤 | #ff00ff 또는 #f0f | RGB(255,0,255) | hsl(300,100%,50%) | 분홍색 | |
보라 | #800080 | RGB(128,0,128) | hsl(300,100%,25%) | 제비꽃 |
RGB 사용
인터넷 익스플로러 | 크롬 | 오페라 | 원정 여행 | 파이어폭스 | 기계적 인조 인간 | iOS |
5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
빨간색, 녹색, 파란색 값을 십진수로 사용하여 색상을 정의할 수 있습니다. 세 가지 색상 구성 요소 각각은 0에서 255 사이의 값을 갖습니다. 색상을 백분율로 지정할 수도 있으며 100%는 숫자 255에 해당합니다. 먼저 rgb 키워드를 지정한 다음 괄호 안에 색상 구성 요소를 지정합니다. , 쉼표로 구분됩니다(예: rgb(255 , 128, 128) 또는 rgb(100%, 50%, 50%)).
RGBA
인터넷 익스플로러 | 크롬 | 오페라 | 원정 여행 | 파이어폭스 | 기계적 인조 인간 | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
RGBA 형식은 RGB와 구문이 유사하지만 요소의 투명도를 지정하는 알파 채널을 포함합니다. 0 값은 완전히 투명하고, 1은 불투명하며, 0.5와 같은 중간 값은 반투명합니다.
RGBA가 CSS3에 추가되었으므로 이 버전에 대해 CSS 코드의 유효성을 검사해야 합니다. CSS3 표준은 아직 개발 중이므로 일부 기능은 변경될 수 있습니다. 예를 들어, background-color 속성에 추가된 RGB 형식의 색상은 유효성이 검사되지만 background 속성에 추가된 색상은 더 이상 유효하지 않습니다. 동시에 브라우저는 두 속성의 색상을 매우 정확하게 이해합니다.
HSL
인터넷 익스플로러 | 크롬 | 오페라 | 원정 여행 | 파이어폭스 | 기계적 인조 인간 | iOS |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSL 형식의 이름은 Hue(색조), Saturate(채도) 및 Lightness(밝기)의 첫 글자 조합에서 파생됩니다. 색조는 색상환(그림 1)의 색상 값이며 각도로 표시됩니다. 0°는 빨간색, 120°는 녹색, 240°는 파란색에 해당합니다. 색조 값은 0에서 359까지 다양합니다.
쌀. 1. 컬러 휠
채도는 색상의 강도를 말하며 0%에서 100%까지의 백분율로 측정됩니다. 0% 값은 색상이 없고 회색 음영을 나타내며, 100%는 채도의 최대값입니다.
밝기는 색상의 밝기를 지정하며 0%에서 100% 사이의 백분율로 지정됩니다. 값이 낮을수록 색상이 어두워지고, 값이 높을수록 색상이 밝아지며, 0%와 100%의 극단적인 값은 흑백에 해당합니다.
HSLA
인터넷 익스플로러 | 크롬 | 오페라 | 원정 여행 | 파이어폭스 | 기계적 인조 인간 | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSLA 형식은 구문이 HSL과 유사하지만 요소의 투명도를 지정하는 알파 채널을 포함합니다. 0 값은 완전히 투명하고, 1은 불투명하며, 0.5와 같은 중간 값은 반투명합니다.
RGBA, HSL, HSLA 색상 값은 CSS3에 추가되므로 이러한 형식을 사용할 때는 코드의 버전 유효성을 확인하세요.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
경고
사이트에 나열된 모든 사자 포획 방법은 이론적이며 계산 방법을 기반으로 합니다. 저자는 사용 시 안전을 보장하지 않으며 결과에 대해 어떠한 책임도 지지 않습니다. 사자는 포식자이자 위험한 동물이라는 것을 기억하세요!
결과 이 예그림에 표시됩니다. 2.
쌀. 2. 웹페이지의 색상
이 페이지에는 HTML, CSS, JavaScript, Flash 등과 같은 웹 개발자 언어에서 색상을 표시하는 데 사용할 수 있는 키워드가 포함된 표가 포함되어 있습니다.
WC3 우려 사항에 대한 이전 사양에서는 16개만 지정되었습니다. 키워드, HTML 및 CSS에서 색상을 설정하는 데 사용되었습니다. 또한 보다 현대적인 사양에는 색상 이름을 나타내는 130개의 키워드가 추가되었습니다. 다음 표에는 색상 이름과 이에 해당하는 16진수 및 RGB 코드가 포함되어 있습니다.
CSS 규칙에 따라 색상 이름은 대소문자를 구분하지 않습니다. 색상 항목 IndianRed와 indianred는 동일합니다.
또한 표에 있는 146개의 키워드 중 실제로 색상이 더 적다는 점도 주목할 가치가 있습니다. 일부 키워드가 동일한 색상을 참조하기 때문입니다. 따라서 Gray 및 Gray라는 이름은 코드 #808080의 50% 회색 색상을 나타내며 Magenta라는 단어는 동의어입니다. HTML 색상 16진수 코드 #FF00FF에 해당하는 자홍색입니다. 또한 Aqua와 Cyan이라는 단어는 동의어이며 코드 #00FFFF에 해당합니다.
|
|
CSS 색상 모듈은 작성자가 html 요소의 색상 및 불투명도와 색상 속성 값을 정의할 수 있는 값을 자세히 설명합니다.
색상 속성
1. 우선 색상: 색상 속성
속성은 다음을 사용하여 글꼴 색상을 설정합니다. 다양한 시스템색상 표현. 이 속성은 요소의 텍스트 콘텐츠 색상을 설명합니다. 또한 색상 값을 허용하는 다른 속성에 대해 잠재적인 간접 값(currentColor)을 제공하는 데 사용됩니다.
재산은 상속됩니다.
2. 색상 값
2.1. 주요 키워드
주요 키워드 목록에는 다음과 같은 의미가 포함됩니다.
이름 | 마녀 | RGB | 색상 |
---|---|---|---|
검은색 | #000000 | 0,0,0 | |
은 | #C0C0C0 | 192,192,192 | |
회색 | #808080 | 128,128,128 | |
하얀색 | #FFFFFF | 255,255,255 | |
적갈색 | #800000 | 128,0,0 | |
빨간색 | #FF0000 | 255,0,0 | |
보라 | #800080 | 128,0,128 | |
푹샤 | #FF00FF | 255,0,255 | |
녹색 | #008000 | 0,128,0 | |
라임 | #00FF00 | 0,255,0 | |
올리브 | #808000 | 128,128,0 | |
노란색 | #FFFF00 | 255,255,0 | |
해군 | #000080 | 0,0,128 | |
파란색 | #0000FF | 0,0,255 | |
물오리 | #008080 | 0,128,128 | |
아쿠아 | #00FFFF | 0,255,255 |
색상 이름은 대소문자를 구분하지 않습니다.
통사론
색상: 청록색;
2.2. 숫자 색상 값
2.2.1. RGB 모델 색상
RGB 값의 16진수 형식은 # 기호 바로 뒤에 3~6개의 16진수 문자가 오는 것입니다. 3자리 RGB 표기법 #rgb는 0을 추가하는 대신 숫자를 복사하여 6자리 형식 #rrggbb로 변환됩니다. 예를 들어 #fb0은 #ffbb00으로 확장됩니다. 이렇게 하면 짧은 #fff 항목에 흰색 #ffffff를 지정할 수 있고 디스플레이 색상 심도에 대한 모든 종속성이 제거됩니다.
함수 표기법에서 RGB 값의 형식은 rgb(3개의 숫자 값(3개의 정수 값 또는 3개의 백분율 값)이 쉼표로 구분된 목록 뒤에 기호가 옵니다)입니다. 정수 값 255는 100%에 해당하고 16진수 표기법에서는 F 또는 FF에 해당합니다.
RGB(255,255,255) = rgb(100%, 100%, 100%) = #FFF
숫자 값 주위에는 공백 문자가 허용됩니다.