아시다시피, 색상은 정신적, 육체적 상태 모두에 영향을 줄 수 있습니다. 매일 인터넷을 검색하면서 눈은 수백만 가지 색상과 음영을 평가합니다. 색상의 심리학에 익숙한 웹 디자이너는 방문자의 기분을 제어하여 목표를 달성할 수 있습니다.
이것은 일부 음영이 진정되고 일부는 반대로 흥분하기 때문입니다. 다음으로 컴퓨터 기술을 사용하여 색상을 합성하고 표시하는 방법에 대해 설명합니다.
RGB는 다음과 같은 세 가지 주요 구성 요소를 다양한 비율로 혼합하여 모든 색상과 음영을 얻는 방법을 나타내는 색상 모델입니다.
- 빨간색 ( 빨간색);
- 녹색( 녹색);
- 파란색( 푸른).
RGB라는 약칭은 여기에서 유래했습니다. 이 색상은 이유 때문에 주요 색상으로 선택됩니다. 그 이유는 인간의 눈 망막의 생리학 및 인식 방법입니다.
RGB 모델은 오늘날 가장 인기 있는 모델이며 TV 화면과 컴퓨터 모니터에서 색상을 재현하는 데 사용됩니다. 제조업체가 제품에 다른 특성을 부여하기 때문에 1996년 하나의 시스템 Microsoft와 HP가 공동으로 개발한 sRGB라고 하는 RGB 기반 색상 합성.
숫자 색상 표현
앞서 언급했듯이 RGB 색상은 기본 색상을 혼합하여 형성됩니다. 각각의 강도를 설명하기 위해 색상을 16진수로 00-FF에 해당하는 0-255(8비트) 범위로 표현하는 방식을 채택했습니다.
즉, 기본 색상은 다음과 같습니다.
- 빨간색 - RGB(255.0.0);
- 녹색 - RGB(0.255.0);
- 파란색 - RGB(0.0.255);
색상 강도가 255보다 작은 값을 취하면 빨간색, 녹색 및 파란색의 다른 음영이 얻어집니다. 다음은 그라데이션 표와 각 음영의 16진수 값입니다.
RGB 컬러 차트
당연히 원색 계조 외에도 혼합 계조가 있으며 그 수는 상당히 많습니다. 따라서 기존의 모든 음영과 이름 및 숫자 표현이 표시되는 RGB 색상 표가 만들어졌습니다( 10진수 및 16진수 형식).
여기에서 그녀를 알 수 있습니다. 이 테이블몇 초 안에 원하는 음영을 찾고 숫자 표현을 찾을 수 있기 때문에 웹 디자이너의 삶이 훨씬 쉬워집니다.
안전한 RGB 색상 팔레트
그러나 어느 시점에서 다른 브라우저에서 색상을 표시하는 문제가 있었고 이를 해결하기 위해 수학적 계산에 의해 파생된 RGB 색상의 소위 "안전한" 팔레트가 컴파일되었습니다.
브라우저가 색상을 올바르게 표시할 수 없는 경우 인접 색상을 혼합하여 필요한 색상에 가까워지려고 하며 결과는 완전히 받아들일 수 없을 것입니다.
이 팔레트의 RGB 색상 코드를 사용하면 웹 개발자는 다른 브라우저, 에 다양한 플랫폼그리고 모니터. 켜져 있지만 이 순간안전한 색상 표는 관련성을 잃습니다( 기술 발전은 멈추지 않는다), 그것을 사용하면 그들이 말하는 것처럼 평화롭게 잠을 잘 수 있습니다.
RGB 모델의 황금색
처음으로 "금"이라는 단어는 XIV 세기 초에 Aurum - 금이라는 화학 원소의 색상을 설명하는 데 사용되었습니다. RGB 모델에서 금색은 다음 숫자 값으로 표시됩니다.
- RGB(255, 215, 0) - 십진법;
- HEX #FFD700 - 16진수 시스템.
RGB 모델의 베이지색
베이지는 가장 표현력이 뛰어나지 않더라도 역사상 상당히 중요한 위치를 차지합니다. 많은 문화 기념물, 특히 골동품 조각품은 베이지 색조를 띠는 스테아타이트와 동석으로 만들어졌습니다. RGB 모델에서 베이지 색다음과 같은 수치 표현이 있습니다.
>>색상 관리
16진수 RGB 색상 값
색상을 설명하고 처리하는 방법은 최종적으로 어떤 표현을 의도하는지에 따라 다릅니다. 예를 들어, 거짓말 탐지기와 컴퓨터 모니터의 색상 표현을 비교합시다. 첫 번째 경우의 근거는 하얀세 가지 기본 색상이 이후에 적용되는 용지의 색상: 푸른, 자주색그리고 노란색. 이 세 가지 기본 색상은 서로 다른 비율로 종이의 흰색과 혼합되어 순수한 검정색을 제외하고는 다른 색상 음영을 제공하거나 색상이 완전히 없으면 흰색 종이를 제공합니다. 검은색을 추가하면 CMYK- 흰색에서 누락된 색상을 빼서 원하는 색상을 얻었을 때 색상을 전달하는 방법.
두 번째 경우의 근거는 검은색각 셀이 세 가지 색상 중 하나로 빛나는 모니터 화면의 색상: 빨간색-빨간색, 초록-녹색 및 푸른-푸른. 그런 다음 빛이 전혀 없는 상태에서 화면의 순수한 검은색을 얻고 필요한 색상은 세 가지 색상 각각의 비율로 지정됩니다. 이 경우 우리는 얻을 것이다 RGB- 색전사 방식. 기본 색상은 다음과 같은 의미를 가질 수 있습니다. 0
~ 전에 255
, 또는 0%
~ 전에 100%
, 또는 16진수 값으로 나타낼 수 있습니다. 아래 그림에서 원색을 혼합한 결과를 볼 수 있습니다.
16진수 시스템은 10진수 시스템과 달리 일련의 자릿수에 10자리가 아니라 16자리이므로 이름이 있습니다. 따라서 두 자리 숫자 조합의 반복되지 않는 변형은 다음과 같을 수 있습니다. 256 , 이후에 일련의 숫자를 계속하려면 9 에서 온 편지 ㅏ~ 전에 에프, 그래서 행은 다음과 같이 보일 것입니다 -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
이 경우 색상은 각각 두 자리로 구성된 세 개의 16진수로 지정됩니다. 첫 번째 숫자는 강도를 결정합니다 빨간색색상, 평균 초록, 마지막 것- 푸른그림 물감. 모든 숫자는 다음과 같은 값을 가질 수 있습니다. 00 ~ 전에 FF(0에서 255까지). 예: 녹색은 다음과 같이 지정됩니다. #00FF00, 빨간색 - 좋아 #FF0000, 파란색 #0000FF, 흰색 같은 #FFFFFF, 완전한 결석색상 또는 검정색은 다음과 같이 제공됩니다. #000000 .
아래 양식에서 세 가지 색상 각각에 대해 16진수 값을 설정하고 출력 필드를 클릭하여 혼합 결과를 볼 수 있습니다.
일부 16진수 RGB 색상 값의 예: 빨강, 파랑 및 녹색 그라데이션.
| 보다 | 코드 | 보다 | 코드 | 보다 | 코드 | 보다 | 코드 | 보다 | 코드 | 보다 | 코드 |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
| #300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
| #400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
| #500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
| #600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
| #700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
문자열 리터럴로 색상 지정하기
사용 편의성을 위해 일부 색상과 그 조합에 모든 브라우저에서 인식되는 이름을 부여했으며 많은 색상을 이름으로 설정할 수 있게 되었습니다. 아래 표는 일부 색상 이름을 보여줍니다.
| 보다 | 이름 | 보다 | 이름 | 보다 | 이름 | 보다 | 이름 |
| 하얀색 | 빨간색 | 주황색 | 노란색 | ||||
| 녹색 | 푸른 | 보라 | 검은색 | ||||
| 앨리스 블루 | 앤티크 화이트 | 아쿠아 | 남옥 | ||||
| 하늘빛 | 베이지 | 비스크 | 블랜치다몬드 | ||||
| 청자색 | 갈색 | 벌리우드 | 생도 블루 | ||||
| 연두빛 | 초콜릿 | 산호 | 콘플라워블루 | ||||
| 콘실크 | 진홍 | 시안 | 진한 파란색 | ||||
| 다크시안 | 다크골든로드 | 짙은 회색 | 짙은 녹색 | ||||
| 다크카키 | 다크마젠타 | 다크 올리브 그린 | 다크 오렌지 | ||||
| 다크오키드 | 진한 빨강 | 흑연어 | 다크 씨 그린 | ||||
| 다크 슬레이트 블루 | 다크 슬레이트 그레이 | 어두운 청록색 | 다크바이올렛 | ||||
| 딥핑크 | 깊은 하늘색 | 딤그레이 | 다저 블루 | ||||
| 내화 벽돌 | 플로럴 화이트 | 숲의 녹색 | 푸시아 | ||||
| 게인즈보로 | 고스트 화이트 | 금 | 골든로드 | ||||
| 회색 | 녹황색 | 단물 | 핫 핑크 | ||||
| 인디언 레드 | 남빛 | 상아 | 카키색 옷감 | ||||
| 라벤더 | 라벤더 블러셔 | 레몬 쉬폰 | 하늘색 | ||||
| 밝은 산호 | 라이트 시안 | 라이트콜덴로다이옐로우 | 연한 초록색 | ||||
| 밝은 회색 | 라이트핑크 | 가벼운 연어 | 라이트씨 그린 | ||||
| 하늘색 | 라이트슬레이트 그레이 | 라이트 스틸 블루 | 연노랑 | ||||
| 라임 | 라임그린 | 리넨 | 마젠타 | ||||
| 적갈색 | 미디엄 아쿠아 마린 | 미디엄 블루 | 중간 난초 | ||||
| 미디엄 퍼플 | 미디엄 시그린 | 미디엄슬레이트블루 | 미디엄스프링그린 | ||||
| 중간 청록색 | 중간자주색 | 자정 블루 | 민트 크림 | ||||
| 미스티로즈 | 나바호화이트 | 해군 | 올드레이스 | ||||
| 올리브 | 올리브드랍 | 오렌지 레드 | 난초 | ||||
| 창백한 | 옅은 녹색 | 창백한 청록색 | 창백한 | ||||
| 파파야 채프 | 피치퍼프 | 페루 | 분홍색 | ||||
| 자두 | 파우더블루 | 로지브라운 | 로얄 블루 | ||||
| 새들 브라운 | 시그린 | 조개 | 시에나 | ||||
| 은 | 하늘색 | 슬레이트 블루 | 슬레이트그레이 | ||||
| 눈 | 스프링그린 | 스틸 블루 | 탠 껍질 | ||||
| 물오리 | 엉겅퀴 훈장 | 토마토 | 터키 옥 | ||||
| 제비꽃 | 밀 | 화이트스모크 | 연두색 |
안전한 색상 선택기 사용
불행히도, 다양한 플랫폼, 시스템 설정이 다르면 올바른 색 재현이 문제입니다. 문제는 브라우저가 항상 아래에 있는 문서의 색상 팔레트를 조정하려고 한다는 것입니다. 환경 설정색상을 자체 혼합하고 대체하여 기능을 모니터링합니다. 결과적으로 때때로 사용자는 웹마스터가 보여주고자 하는 내용이 제대로 표시되지 않습니다. 이 상황에서 벗어나는 방법은 팔레트를 사용하는 것으로 나타났습니다. 팔레트의 각 색상은 서로 다른 플랫폼의 모든 브라우저에서 동일하게 렌더링되도록 보장됩니다. 이 소위 보장라고도 하는 팔레트 안전한팔레트. 이 팔레트에는 색상 구성 요소가 다음 값을 취하는 색상이 포함됩니다. 00 ,33 ,66 ,99 , 참조,FF, 가능한 한 216 그들의 조합.
| 보다 | 코드 | 보다 | 코드 | 보다 | 코드 | 보다 | 코드 | 보다 | 코드 | 보다 | 코드 |
| FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
| 3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
블라드 메르제비치
HTML에서 색상은 16진법 코드를 사용하거나 일부 색상의 이름을 사용하는 두 가지 방법 중 하나로 지정됩니다. 16진법을 기반으로 하는 방법이 가장 보편적으로 주로 사용됩니다.
16진수 색상
HTML은 16진수를 사용하여 색상을 지정합니다. 16진수 시스템은 10진수 시스템과 달리 이름에서 알 수 있듯이 숫자 16을 기반으로 합니다. 숫자는 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A입니다. , B, C, D, E, F. 10에서 15까지의 숫자는 라틴 문자로 대체됩니다. 테이블에서. 6.1은 10진수와 16진수의 대응 관계를 보여줍니다.
16진법에서 15보다 큰 숫자는 두 숫자를 하나로 결합하여 구성됩니다(표 6.2). 예를 들어, 숫자 255 십진법 16진수의 숫자 FF에 해당합니다.
숫자 체계의 정의에서 혼동을 피하기 위해 16진수 앞에 파운드 기호 #가 붙습니다(예: #aa69cc). 이 경우 대소문자는 상관없으므로 #F0F0F0 또는 #f0f0f0으로 작성하는 것이 허용됩니다.
HTML에서 사용되는 대표적인 색상은 다음과 같다.
여기에서 웹 페이지의 배경색은 #FA8E47로 설정됩니다. 숫자 앞의 파운드 기호 #는 16진수임을 의미합니다. 처음 두 자리(FA)는 색상의 빨간색 구성 요소, 세 번째에서 네 번째 자리(8E)는 녹색 구성 요소, 마지막 두 자리(47)는 파란색 구성 요소를 정의합니다. 최종 결과는 이 색상입니다.
| 파 | + | 8E | + | 47 | = | FA8E47 |
빨강, 녹색 및 파랑의 세 가지 색상 각각은 00에서 FF까지의 값을 취할 수 있으며 결과적으로 총 256개의 음영이 생성됩니다. 따라서 총 색상 수는 256x256x256 = 16.777.216 조합이 될 수 있습니다. 빨강, 초록, 파랑 구성 요소를 기반으로 하는 색상 모델을 RGB(빨강, 녹색, 파랑, 빨강, 녹색, 파랑)라고 합니다. 이 모델은 세 가지 구성 요소를 모두 추가하여 흰색을 형성하는 가산(추가 - 추가)입니다.
16진수 색상으로 쉽게 탐색할 수 있도록 몇 가지 규칙을 고려하십시오.
- 색상 구성 요소의 값이 동일하면(예: #D6D6D6) 회색 색조를 얻습니다. 숫자가 높을수록 색상이 밝아지며 값이 #000000(검정)에서 #FFFFFF(흰색)으로 변경됩니다.
- 적색 성분을 최대(FF)로 하고 나머지 성분을 0으로 하면 밝은 적색이 된다. 값이 #FF0000인 색상은 가능한 가장 붉은 색조입니다. 녹색(#00FF00)과 파란색(#0000FF)도 마찬가지입니다.
- 빨간색과 녹색을 혼합하여 노란색(#FFFF00)을 얻습니다. 이것은 기본 색상(빨간색, 녹색, 파란색)과 보색 또는 보색을 나타내는 색상환(그림 6.1)에서 명확하게 볼 수 있습니다. 여기에는 노란색, 시안색 및 보라색(자홍색이라고도 함)이 포함됩니다. 일반적으로 인접한 색상을 혼합하여 모든 색상을 얻을 수 있습니다. 따라서 청록색(#00FFFF)은 파란색과 녹색을 결합하여 얻습니다.
쌀. 6.1. 컬러 서클
16진수 값을 기반으로 하는 색상은 경험적으로 선택할 필요가 없습니다. 이 목적에 적합 그래픽 편집기다른 색상 모델로 작업할 수 있는 사람, 예를 들어 어도비 포토샵. 무화과에. 6.2는 이 프로그램에서 색상을 선택하기 위한 창을 보여줍니다. 선은 현재 색상의 결과 16진수 값에 동그라미를 치고 있습니다. 복사하여 코드에 붙여넣을 수 있습니다.
쌀. 6.2. Photoshop의 색상 선택기
웹 색상
모니터의 색상 품질을 8비트(256색)로 설정하면 동일한 색상으로 표시될 수 있습니다. 다른 브라우저내 방식대로. 이것은 브라우저가 자체 팔레트로 작업하고 팔레트에 없는 색상을 표시할 수 없을 때 그래픽이 렌더링되는 방식과 관련이 있습니다. 이 경우 색상은 주어진 색상을 모방하는 다른 색상의 픽셀 조합으로 대체됩니다. 다른 브라우저에서 색상을 동일하게 유지하기 위해 소위 웹 색상 팔레트가 도입되었습니다. 웹 색상은 빨강, 녹색 및 파랑의 각 구성 요소에 대해 6개의 값 중 하나인 0(00), 51(33), 102(66), 153(99), 204(CC), 255(FF). 이 구성요소의 16진수 값은 대괄호로 표시됩니다. 가능한 모든 조합의 총 색상 수는 6x6x6 - 216 색상을 제공합니다. 웹 색상의 예는 #33FF66입니다.
웹 컬러의 주요 특징은 모든 브라우저에서 동일하게 표시된다는 것입니다. 현재 웹 색상의 관련성은 모니터의 품질 향상과 기능 확장으로 인해 매우 작습니다.
이름별 색상
숫자 모음을 기억하지 않으려면 일반적으로 사용되는 색상 이름을 대신 사용할 수 있습니다. 테이블에서. 6.3은 인기있는 색상 이름의 이름을 보여줍니다.
| 색상 이름 | 색깔 | 설명 | 16진수 값 |
|---|---|---|---|
| 검은색 | 검은색 | #000000 | |
| 푸른 | 푸른 | #0000FF | |
| 푹샤 | 라이트 퍼플 | #FF00FF | |
| 회색 | 어두운 회색 | #808080 | |
| 초록 | 녹색 | #008000 | |
| 라임 | 연한 초록색 | #00FF00 | |
| 적갈색 | 다크 레드 | #800000 | |
| 해군 | 다크 블루 | #000080 | |
| 올리브 | 올리브 | #808000 | |
| 자주색 | 다크 바이올렛 | #800080 | |
| 빨간색 | 빨간색 | #FF0000 | |
| 은 | 밝은 회색 | #C0C0C0 | |
| 물오리 | 청록색 | #008080 | |
| 하얀 | 하얀색 | #FFFFFF | |
| 노란색 | 노란색 | #FFFF00 |
색상을 이름으로 지정하거나 16진수를 사용하여 지정하는 방법은 중요하지 않습니다. 사실상 이러한 방법은 동일합니다. 예제 6-1은 웹페이지의 배경색과 글자색을 설정하는 방법을 보여줍니다.
예 6.1. 배경 및 텍스트 색상
샘플 텍스트
에 이 예배경색은 태그의 bgcolor 속성을 사용하여 설정됩니다.
, 그리고 text 속성을 통한 텍스트의 색상. 다양성을 위해 text 속성의 값은 16진수로 설정되고 bgcolor는 예약된 값으로 설정됩니다. 예어물오리.CSS의 색상 코드는 색상을 지정하는 데 사용됩니다. 일반적으로 색상 코드 또는 색상 값은 요소의 전경(예: 텍스트, 링크 색상) 또는 요소의 배경(배경, 블록 색상)에 대한 색상을 설정하는 데 사용됩니다. 버튼 색상, 테두리, 마커, 호버 및 기타 장식 효과를 변경하는 데에도 사용할 수 있습니다.
에서 고유한 색상 값을 설정할 수 있습니다. 다양한 형식. 다음 표에는 가능한 모든 형식이 나열되어 있습니다.
이러한 형식은 아래에 자세히 설명되어 있습니다.
CSS 색상 - 16진수 코드
16진수 색상 코드는 6자리 색상 표현입니다. 처음 두 자리(RR)는 빨간색 값, 다음 두 자리는 녹색 값(GG), 마지막 두 자리는 파란색 값(BB)입니다.
CSS 색상 - 짧은 16진수 코드
짧은 16진수 색상 코드 6자 표기법의 짧은 형식입니다. 이 형식에서 각 숫자는 동일한 6자리 색상 값을 생성하기 위해 반복됩니다. 예: #0F0은 #00FF00이 됩니다.
16진수 값은 모든 그래픽에서 가져올 수 있습니다. 소프트웨어, Adobe Photoshop, Core Draw 등과 같은
CSS의 각 16진수 색상 코드 앞에는 "#" 해시 기호가 옵니다. 다음은 16진수 표기법의 사용 예입니다.
CSS 색상 - RGB 값
RGB 값 rgb() 속성을 사용하여 설정한 색상 코드입니다. 이 속성은 빨강, 녹색 및 파랑에 대해 각각 하나씩 세 가지 값을 취합니다. 값은 0에서 255 사이의 정수 또는 백분율일 수 있습니다.
메모:모든 브라우저가 rgb() 색상 속성을 지원하는 것은 아니므로 사용하지 않는 것이 좋습니다.
다음은 RGB 값을 사용하여 여러 색상을 표시하는 예입니다.
색상 코드 생성기
당사 서비스를 통해 수백만 개의 색상 코드를 생성할 수 있습니다.
안전한 브라우저 색상
아래는 가장 안전하고 컴퓨터에 독립적인 216가지 색상의 표입니다. CSS의 이러한 색상 범위는 000000에서 FFFFFF 16진수 코드입니다. 256 색상 팔레트로 작업할 때 모든 컴퓨터가 색상을 올바르게 표시하도록 하므로 사용하기에 안전합니다.
| CSS의 "안전한" 색상 표 | |||||
| #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 |