CSS
그림 물감

통사론

• color : #rgb
• color : #rrggbb
• 색상 : rgb [a] (<빨강>, <녹색>, <파랑> [, <알파>])
• color : hsl [a] (<색상>, <채도 %>, <밝기 %> [, <알파>])
• color : colorkeyword / * 녹색, 파란색, 노란색, 주황색, 빨간색, ..etc * /

색상 키워드

대부분의 브라우저는 색상 키워드를 사용하여 색상을 지정하도록 지원합니다. 예를 들어, 요소의 color 을 파란색으로 설정하려면 blue 키워드를 사용하십시오.

.some-class {
    color: blue;
}

CSS 키워드는 대소 문자를 구분하지 않습니다. blue , Blue 및 BLUE 은 모두 #0000FF 됩니다.

색상 키워드

색상 이름	16 진수 값	RGB 값	색깔
앨리스 블루	# F0F8FF	rgb (240,248,255)
AntiqueWhite	# FAEBD7	rgb (250,235,215)
아쿠아	# 00FFFF	rgb (0,255,255)
남옥	# 7FFFD4	rgb (127,255,212)
하늘빛	# F0FFFF	rgb (240,255,255)
베이지 색	# F5F5DC	rgb (245,245,220)
비스크	# FFE4C4	rgb (255,228,196)
검은	# 000000	rgb (0,0,0)
BlanchedAlmond	#FFEBCD	rgb (255,235,205)
푸른	# 0000FF	rgb (0,0,255)
블루 바이올렛	# 8A2BE2	rgb (138,43,226)
갈색	# A52A2A	rgb (165,42,42)
BurlyWood	# DEB887	rgb (222,184,135)
캐딜 블루	# 5F9EA0	rgb (95,158,160)
연두빛	# 7FFF00	rgb (127,255,0)
초콜릿	# D2691E	rgb (210,105,30)
산호	# FF7F50	rgb (255,127,80)
CornflowerBlue	# 6495ED	rgb (100,149,237)
코 닐크	# FFF8DC	rgb (255,248,220)
진홍	# DC143C	rgb (220,20,60)
시안	# 00FFFF	rgb (0,255,255)
진한 파란색	# 00008B	rgb (0,0,139)
다크 시안	# 008B8B	rgb (0,139,139)
DarkGoldenRod	# B8860B	rgb (184,134,11)
짙은 회색	# A9A9A9	rgb (169,169,169)
어두운 회색	# A9A9A9	rgb (169,169,169)
짙은 녹색	# 006400	rgb (0,100,0)
다크 카키	# BDB76B	rgb (189,183,107)
다크 마젠타	# 8B008B	rgb (139,0,139)
DarkOliveGreen	# 556B2F	rgb (85,107,47)
다크 오렌지	# FF8C00	rgb (255,140,0)
DarkOrchid	# 9932CC	rgb (153,50,204)
DarkRed	# 8B0000	rgb (139,0,0)
다크 서몬	# E9967A	rgb (233,150,122)
DarkSeaGreen	# 8FBC8F	rgb (143,188,143)
DarkSlateBlue	# 483D8B	rgb (72,61,139)
DarkSlateGray	# 2F4F4F	rgb (47,79,79)
DarkSlateGrey	# 2F4F4F	rgb (47,79,79)
다크 터쿼 이즈	# 00CED1	rgb (0,206,209)
다크 바이올렛	# 9400D3	rgb (148,0,211)
DeepPink	# FF1493	rgb (255,20,147)
DeepSkyBlue	# 00BFFF	rgb (0,191,255)
딤 그레이	# 696969	rgb (105,105,105)
딤 그레이	# 696969	rgb (105,105,105)
도저 블루	# 1E90FF	rgb (30,144,255)
내화 벽돌	# B22222	rgb (178,34,34)
FloralWhite	# FFFAF0	rgb (255,250,240)
ForestGreen	# 228B22	rgb (34,139,34)
푹샤	# FF00FF	rgb (255,0,255)
게인즈 보로	#DCDCDC	rgb (220,220,220)
고스트 화이트	# F8F8FF	rgb (248,248,255)
금	# FFD700	rgb (255,215,0)
골든로드	# DAA520	rgb (218,165,32)
회색	# 808080	rgb (128,128,128)
회색	# 808080	rgb (128,128,128)
녹색	# 008000	rgb (0,128,0)
GreenYellow	# ADFF2F	rgb (173,255,47)
단물	# F0FFF0	rgb (240,255,240)
핫 핑크	# FF69B4	rgb (255,105,180)
IndianRed	# CD5C5C	rgb (205,92,92)
남빛	# 4B0082	rgb (75,0,130)
상아	# FFFFF0	rgb (255,255,240)
카키색 옷감	# F0E68C	rgb (240,230,140)
라벤더	# E6E6FA	rgb (230,230,250)
LavenderBlush	# FFF0F5	rgb (255,240,245)
잔디 그린	# 7CFC00	rgb (124,252,0)
레몬 키폰	#FFFACD	rgb (255,250,205)
라이트 블루	# ADD8E6	rgb (173,216,230)
라이트 코랄	# F08080	rgb (240,128,128)
라이트 차이언	# E0FFFF	rgb (224,255,255)
LightGoldenRodYellow	# FAFAD2	rgb (250,250,210)
라이트 그레이	# D3D3D3	rgb (211,211,211)
라이트 그레이	# D3D3D3	rgb (211,211,211)
연한 초록색	# 90EE90	rgb (144,238,144)
LightPink	# FFB6C1	rgb (255,182,193)
LightSalmon	# FFA07A	rgb (255,160,122)
LightSeaGreen	# 20B2AA	rgb (32,178,170)
LightSkyBlue	# 87CEFA	rgb (135,206,250)
LightSlateGray	# 778899	rgb (119,136,153)
LightSlateGrey	# 778899	rgb (119,136,153)
LightSteelBlue	# B0C4DE	rgb (176,196,222)
연노랑	# FFFFE0	rgb (255,255,224)
라임	# 00FF00	rgb (0,255,0)
LimeGreen	# 32CD32	rgb (50,205,50)
리넨	# FAF0E6	rgb (250,240,230)
마젠타	# FF00FF	rgb (255,0,255)
적갈색	# 800000	rgb (128,0,0)
중급 아쿠아 마린	# 66CDAA	rgb (102,205,170)
중불	# 0000CD	rgb (0,0,205)
MediumOrchid	# BA55D3	rgb (186,85,211)
중간 퍼플	# 9370DB	rgb (147,112,219)
중간시 그린	# 3CB371	rgb (60,179,113)
MediumSlateBlue	# 7B68EE	rgb (123,104,238)
MediumSpringGreen	# 00FA9A	rgb (0,250,154)
중간 청록색	# 48D1CC	rgb (72,209,204)
MediumVioletRed	# C71585	rgb (199,21,133)
자정 블루	# 191970	rgb (25,25,112)
민트 크림	# F5FFFA	rgb (245,255,250)
미스티 로즈	# FFE4E1	rgb (255,228,225)
모카신	# FFE4B5	rgb (255,228,181)
나바호와 화이트	#FFDEAD	rgb (255,222,173)
해군	# 000080	rgb (0,0,128)
올드 레이스	# FDF5E6	rgb (253,245,230)
올리브	# 808000	rgb (128,128,0)
올리브 다이브	# 6B8E23	rgb (107,142,35)
주황색	# FFA500	rgb (255,165,0)
오렌지 레드	# FF4500	rgb (255,69,0)
난초	# DA70D6	rgb (218,112,214)
PaleGoldenRod	# EEE8AA	rgb (238,232,170)
옅은 녹색	# 98FB98	rgb (152,251,152)
페어 터쿼 이즈	#AFEEEE	rgb (175,238,238)
PaleVioletRed	# DB7093	rgb (219,112,147)
파파야 위프	# FFEFD5	rgb (255,239,213)
PeachPuff	# FFDAB9	rgb (255,218,185)
페루	# CD853F	rgb (205,133,63)
담홍색	# FFC0CB	rgb (255,192,203)
자두	# DDA0DD	rgb (221,160,221)
파우더 블루	# B0E0E6	rgb (176,224,230)
자	# 800080	rgb (128,0,128)
레베카 퍼플	# 663399	rgb (102,51,153)
빨간	# FF0000	rgb (255,0,0)
RosyBrown	# BC8F8F	rgb (188,143,143)
로얄 블루	# 4169E1	rgb (65,105,225)
새들 브룩	# 8B4513	rgb (139,69,19)
연어	# FA8072	rgb (250,128,114)
SandyBrown	# F4A460	rgb (244,164,96)
시 그린	# 2E8B57	rgb (46,139,87)
조개	# FFF5EE	rgb (255,245,238)
시에나	# A0522D	rgb (160,82,45)
은	# C0C0C0	rgb (192,192,192)
하늘색	# 87CEEB	rgb (135,206,235)
슬레이트 블루	# 6A5ACD	rgb (106,90,205)
슬레이트 그레이	# 708090	rgb (112,128,144)
슬레이트 그레이	# 708090	rgb (112,128,144)
눈	#FFFAFA	rgb (255,250,250)
SpringGreen	# 00FF7F	rgb (0,255,127)
스틸 블루	# 4682B4	rgb (70,130,180)
탠 껍질	# D2B48C	rgb (210,180,140)
물오리	# 008080	rgb (0,128,128)
엉겅퀴 훈장	# D8BFD8	rgb (216,191,216)
토마토	# FF6347	rgb (255,99,71)
터키 옥	# 40E0D0	rgb (64,224,208)
제비꽃	# EE82EE	rgb (238,130,238)
밀	# F5DEB3	rgb (245,222,179)
화이트	#FFFFFF	rgb (255,255,255)
WhiteSmoke	# F5F5F5	rgb (245,245,245)
노랑	# FFFF00	rgb (255,255,0)
연두색	# 9ACD32	rgb (154,205,50)

명명 된 색상 외에도 완전 투명 검정색을 나타내는 transparent 라는 키워드가 있습니다. rgba(0,0,0,0)

16 진수 값

배경

CSS 색상은 멤버가 색상의 빨강, 녹색 및 파랑 구성 요소를 나타내는 16 진수 삼중 항으로 표현 될 수도 있습니다. 이 값은 각각 10 진수 표기로 00 - FF 또는 0 - 255 범위의 숫자를 나타냅니다. 대문자 및 / 또는 소문자 Hexidecimal 값을 사용할 수 있습니다 (예 : #3fc = #3FC = #33ffCC ). 브라우저는 #369 를 #336699 로 해석합니다. 그것이 의도 한 것이 아니라 #306090 원한다면 명시 적으로 지정해야합니다.

16 진수 표기법으로 표현할 수있는 총 색상 수는 256 ^ 3 또는 16,777,216입니다.

통사론

color: #rrggbb;
color: #rgb

.some-class {
    /* This is equivalent to using the color keyword 'blue' */
    color: #0000FF;
}

.also-blue {
    /* If you want to specify each range value with a single number, you can!
       This is equivalent to '#0000FF' (and 'blue') */
    color: #00F;
}

16 진수 표기법 은 W3C의 '숫자 색상 값' 에 따라 RGB 색상 형식으로 색상 값을 지정하는 데 사용됩니다.

16 진수 (또는 단순히 16 진수)의 색상 값을 찾기 위해 인터넷에서 사용할 수있는 많은 도구가 있습니다.

즐겨 찾는 웹 브라우저에서 " hex color palette "또는 " hex color picker "를 검색하여 다양한 옵션을 찾으십시오!

16 진수 값은 항상 파운드 기호 (#)로 시작하고 최대 6 자리 숫자이며 대소 문자를 구분하지 않습니다. 즉, 대 / 소문자를 구분하지 않습니다. #FFC125 와 #ffc125 는 같은 색상입니다.

rgb () 표기법

RGB는 적색, 녹색 및 청색의 혼합으로 색상을 표현하는 부가 색상 모델입니다. 본질적으로 RGB 표현은 16 진수 표기법의 10 진수 표현입니다. 16 진수에서 각 숫자의 범위는 00-FF이며 십진수는 0-255이고 백분율은 0 % -100 %입니다.

.some-class {
    /* Scalar RGB, equivalent to 'blue'*/
    color: rgb(0, 0, 255);
}

.also-blue {
    /* Percentile RGB values*/
    color: rgb(0%, 0%, 100%);
}

통사론

rgb(<red>, <green>, <blue>)

hsl () 표기법

HSL은 색조 ( "색"), 채도 ( "색") 및 밝기 ( "흰색")를 나타냅니다.

색조는 0 °에서 360 °까지의 각도 (단위 없음)로 표시되며 채도와 명도는 백분율로 표시됩니다.

p {
    color: hsl(240, 100%, 50%); /* Blue */
}

통사론

color: hsl(<hue>, <saturation>%, <lightness>%);

노트

• 0 %의 채도는 항상 회색 음영 색상을 생성합니다. 색조를 변경해도 아무 효과가 없습니다.

• 밝기 0 %는 항상 검정색을 생성하고 100 %는 항상 흰색을 생성합니다. 색조 나 채도를 변경해도 효과가 없습니다.

currentColor

currentColor 는 현재 요소의 계산 된 색상 값을 반환합니다.

동일한 요소에서 사용

currentColor는 color 속성이 red 로 설정되어 있으므로 red로 평가됩니다.

div {
   color: red;     
   border: 5px solid currentColor;
   box-shadow: 0 0 5px currentColor;
}

이 경우 경계선에 currentColor를 지정하는 것은 중복되는 경우가 대부분 같지만 동일한 결과를 생성해야하므로 중복되는 경우가 많습니다. 더 구체적인 선택기로 인해 덮어 쓰여지는 경우 동일한 요소 내의 border 속성 내에서만 currentColor를 사용하십시오.

계산 된 색상이기 때문에 다음 예제에서는 첫 번째 규칙을 재정의하는 두 번째 규칙으로 인해 테두리가 녹색이됩니다.

div {
   color: blue;
   border: 3px solid currentColor; 
   color: green;
}

부모 요소에서 상속됩니다.

부모 색상이 상속됩니다. 여기에서 currentColor는 'blue'로 평가되어 자식 요소의 테두리 색상을 파란색으로 만듭니다.

.parent-class {
    color: blue;
}

.parent-class .child-class {
    border-color: currentColor;
}

currentColor는 background-color와 같이 color 속성에서 상속받지 않는 다른 규칙에 의해서도 사용될 수 있습니다. 아래의 예는 부모로 설정된 색을 배경으로 사용하는 아이들을 보여줍니다 :

.parent-class {
    color: blue;
}

.parent-class .child-class {
    background-color: currentColor;
}

가능한 결과 :

rgba () 표기법

rgb () 표기법 과 비슷하지만 추가 알파 (불투명도) 값이 있습니다.

.red {
    /* Opaque red */
    color: rgba(255, 0, 0, 1);
}

.red-50p {
    /* Half-translucent red. */
    color: rgba(255, 0, 0, .5);
}

통사론

rgba(<red>, <green>, <blue>, <alpha>);

hsla () 표기법

hsl () 표기법 과 비슷하지만 알파 (불투명도) 값이 추가되었습니다.

hsla(240, 100%, 50%, 0)     /* transparent */
hsla(240, 100%, 50%, 0.5)   /* half-translucent blue */
hsla(240, 100%, 50%, 1)     /* fully opaque blue */

통사론

hsla(<hue>, <saturation>%, <lightness>%, <alpha>);