<color> CSS 자료형sRGB 색 공간의 한 색을 표현하며, 추가로 알파 채널 투명도 값도 가질 수 있어 자신이 가리키는 색상과 배경이 어떻게 합성되어야 하는지 지정할 수 있습니다.

<color>는 다음 방법으로 정의할 수 있습니다.

  • 키워드 사용 (blue, transparent 등)
  • RGB 3차원 좌표계 사용 (# + 16진수 표기법 또는 rgb(), rgba()의 함수형 표기법)
  • HSL 실린더형 좌표계 사용 (hsl(), hsla()의 함수형 표기법)

참고: 이 글은 <color> 자료형에 대해 상세히 기술합니다. HTML에서 실제로 색을 쓰는 법이 더 알고 싶으시면 Applying color to HTML elements using CSS를 참고하세요.

구문

<color> 자료형은 아래 나열된 선택지 중 하나를 사용해 지정합니다.

참고: <color> 값은 정확하게 정의할 수 있지만 실제로 화면에 표시될 때는 기기별로 차이가 있을 수도 있습니다. 대부분의 화면 색이 제대로 조정되지 않았으며 일부 브라우저는 기기의 색상 프로필을 지원하지 않기 때문입니다.

색상 키워드

색상 키워드는 대소문자를 구분하지 않는 식별자로, red, blue, black, lightseagreen처럼 특정 색을 나타냅니다. 이름이 표현하는 색을 그럭저럭 가리키고 있긴 하지만 모든 키워드의 본질은 인위적이며 어떤 특정한 규칙을 따르거나 하지 않습니다.

색상 키워드를 사용할 땐 몇 가지 고려할 점이 있습니다.

  • HTML은 CSS1에서 찾아볼 수 있는 16가지 기본 색상만 인식합니다. 알 수 없는 값은 특정 알고리즘을 사용해 변환하는데 그 결과는 대개 완전히 다른 색입니다. 나머지 색상 키워드는 CSS와 SVG에서만 사용해야 합니다.
  • HTML과 달리 CSS는 알 수 없는 키워드는 완전히 무시합니다.
  • 모든 색상 키워드는 투명도 없는 단일 색상을 표현합니다.
  • 어떤 키워드는 다른 키워드의 다른 이름입니다.
    • aqua / cyan
    • fuchsia / magenta
    • darkgray / darkgrey
    • darkslategray / darkslategrey
    • dimgray / dimgrey
    • lightgray / lightgrey
    • lightslategray / lightslategrey
    • gray / grey
    • slategray / slategrey
  • 많은 키워드를 X11에서 가져오긴 했지만, 제조사들이 X11 색상을 특정 하드웨어에 맞춰 조절한 경우도 있었기에 RGB값은 차이가 존재할 수 있습니다.

참고: CSS의 진화와 함께 색상 키워드도 많은 변화를 겪었습니다.

  • CSS Level 1은 16개의 기본 색상만 지니고 있었습니다. VGA 그래픽 카드가 표현할 수 있는 색에서 가져온 것이기에 VGA 색상이라고 칭했습니다.
  • CSS Level 2에서는 orange 키워드를 추가했습니다.
  • 초기 브라우저들은 명세에 없음에도 불구하고 주로 X11 색상표에서 가져온 다양한 색상을 지원했습니다. 그러나 SVG 1.0과 CSS Colors Level 3 이전까지 그 목록이 정식으로 정해진 적은 없었습니다. 추가한 색상 키워드는 확장 색상 키워드, X11 색상, 또는 SVG 색상이라고 부릅니다.
  • CSS Colors Level 4에선 웹 개척자 에릭 메이어를 기리기 위해 rebeccapurple 키워드를 추가했습니다.
명세 RGB 대응값 키워드 RGB 16진수값 미리보기
CSS Level 1   black #000000  
  silver #c0c0c0  
  gray #808080  
  white #ffffff  
  maroon #800000  
  red #ff0000  
  purple #800080  
  fuchsia #ff00ff  
  green #008000  
  lime #00ff00  
  olive #808000  
  yellow #ffff00  
  navy #000080  
  blue #0000ff  
  teal #008080  
  aqua #00ffff  
CSS Level 2 (Revision 1)   orange #ffa500  
CSS Color Module Level 3   aliceblue #f0f8ff  
  antiquewhite #faebd7  
  aquamarine #7fffd4  
  azure #f0ffff  
  beige #f5f5dc  
  bisque #ffe4c4  
  blanchedalmond #ffebcd  
  blueviolet #8a2be2  
  brown #a52a2a  
  burlywood #deb887  
  cadetblue #5f9ea0  
  chartreuse #7fff00  
  chocolate #d2691e  
  coral #ff7f50  
  cornflowerblue #6495ed  
  cornsilk #fff8dc  
  crimson #dc143c  
  cyan
(aqua의 다른 이름)
#00ffff  
  darkblue #00008b  
  darkcyan #008b8b  
  darkgoldenrod #b8860b  
  darkgray #a9a9a9  
  darkgreen #006400  
  darkgrey #a9a9a9  
  darkkhaki #bdb76b  
  darkmagenta #8b008b  
  darkolivegreen #556b2f  
  darkorange #ff8c00  
  darkorchid #9932cc  
  darkred #8b0000  
  darksalmon #e9967a  
  darkseagreen #8fbc8f  
  darkslateblue #483d8b  
  darkslategray #2f4f4f  
  darkslategrey #2f4f4f  
  darkturquoise #00ced1  
  darkviolet #9400d3  
  deeppink #ff1493  
  deepskyblue #00bfff  
  dimgray #696969  
  dimgrey #696969  
  dodgerblue #1e90ff  
  firebrick #b22222  
  floralwhite #fffaf0  
  forestgreen #228b22  
  gainsboro #dcdcdc  
  ghostwhite #f8f8ff  
  gold #ffd700  
  goldenrod #daa520  
  greenyellow #adff2f  
  grey #808080  
  honeydew #f0fff0  
  hotpink #ff69b4  
  indianred #cd5c5c  
  indigo #4b0082  
  ivory #fffff0  
  khaki #f0e68c  
  lavender #e6e6fa  
  lavenderblush #fff0f5  
  lawngreen #7cfc00  
  lemonchiffon #fffacd  
  lightblue #add8e6  
  lightcoral #f08080  
  lightcyan #e0ffff  
  lightgoldenrodyellow #fafad2  
  lightgray #d3d3d3  
  lightgreen #90ee90  
  lightgrey #d3d3d3  
  lightpink #ffb6c1  
  lightsalmon #ffa07a  
  lightseagreen #20b2aa  
  lightskyblue #87cefa  
  lightslategray #778899  
  lightslategrey #778899  
  lightsteelblue #b0c4de  
  lightyellow #ffffe0  
  limegreen #32cd32  
  linen #faf0e6  
  magenta
(fuchsia의 다른 이름)
#ff00ff  
  mediumaquamarine #66cdaa  
  mediumblue #0000cd  
  mediumorchid #ba55d3  
  mediumpurple #9370db  
  mediumseagreen #3cb371  
  mediumslateblue #7b68ee  
  mediumspringgreen #00fa9a  
  mediumturquoise #48d1cc  
  mediumvioletred #c71585  
  midnightblue #191970  
  mintcream #f5fffa  
  mistyrose #ffe4e1  
  moccasin #ffe4b5  
  navajowhite #ffdead  
  oldlace #fdf5e6  
  olivedrab #6b8e23  
  orangered #ff4500  
  orchid #da70d6  
  palegoldenrod #eee8aa  
  palegreen #98fb98  
  paleturquoise #afeeee  
  palevioletred #db7093  
  papayawhip #ffefd5  
  peachpuff #ffdab9  
  peru #cd853f  
  pink #ffc0cb  
  plum #dda0dd  
  powderblue #b0e0e6  
  rosybrown #bc8f8f  
  royalblue #4169e1  
  saddlebrown #8b4513  
  salmon #fa8072  
  sandybrown #f4a460  
  seagreen #2e8b57  
  seashell #fff5ee  
  sienna #a0522d  
  skyblue #87ceeb  
  slateblue #6a5acd  
  slategray #708090  
  slategrey #708090  
  snow #fffafa  
  springgreen #00ff7f  
  steelblue #4682b4  
  tan #d2b48c  
  thistle #d8bfd8  
  tomato #ff6347  
  turquoise #40e0d0  
  violet #ee82ee  
  wheat #f5deb3  
  whitesmoke #f5f5f5  
  yellowgreen #9acd32  
CSS Color Module Level 4   rebeccapurple #663399  

transparent 키워드

transparent 키워드는 완전히 투명한 색을 표현합니다. 즉 배경의 내용이 완전히 보입니다. 기술적으로 transparent는 rgba(0,0,0,0)의 짧은 이름입니다.

호환성 참고: <gradient> 등 특정 상황에서 의도하지 않은 결과를 피하기 위해, 현재 CSS 명세에선 transparent투명도를 미리 곱한 색 공간에서 계산하도록 명시하고 있습니다. 그러나 오래된 브라우저에서는 투명도 0의 검정으로 취급할 수 있음에 주의하세요.

역사 참고: transparent는 CSS Level 2 (Revision 1) 전까지 실제 색상이 아니었습니다. 대신 backgroundborder<color> 자리에 사용하는 특별한 키워드로, 상속받은 단색을 덮어 쓸 수 있도록 추가됐었습니다. CSS Colors Level 3에서 알파 채널이 추가되면서 transparent도 실제 색상으로 재정의되었습니다. 덕분에 <color> 값 어디에나 사용할 수 있습니다.

currentColor 키워드

currentColor 키워드는 요소의 color 속성값을 나타냅니다. 이를 통해 다른 속성이 color 속성값을 따라가도록 설정할 수 있습니다.

color 속성에 currentColor키워드를 사용하면 대신 상속받은 color 속성값을 사용합니다.

currentColor 예제

<div style="color: blue; border: 1px dashed currentColor;">
  이 글의 색은 파랑입니다.
  <div style="background: currentColor; height:9px;"></div>
  이 블록은 파란 테두리로 둘러쌓여 있습니다.
</div>

RGB 색상

RGB 색상 모델은 빨강, 초록, 파랑을 통해 특정 색을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다.

구문

RGB 색상은 # 뒤의 16진수 표기법이나 함수형 표기법(rgb(), rgba())으로 표현할 수 있습니다.

참고: CSS Colors Level 4부터 rgba()rgb()의 다른 이름입니다. Level 4 표준을 구현한 브라우저에서는 같은 매개변수를 받고 동일하게 행동합니다.

16진수 표기법: #RRGGBB[AA]
R(빨강), G(초록), B(파랑), A(알파)는 16진수 문자(0-9, A-F)입니다. A는 선택사항입니다. 예를 들어 #ff0000#ff0000ff와 같습니다.
16진수 표기법: #RGB[A]
R(빨강), G(초록), B(파랑), A(알파)는 16진수 문자(0-9, A-F)입니다. A는 선택사항입니다. 세 글자 표기법(#RGB)은 여섯 글자 표기법(#RRGGBB)의 단축 표현입니다. 예를 들어 #f09#ff0099와 같습니다. 비슷하게 네 글자 표기법(#RGBA)은 여덟 글자 표기법(#RRGGBBAA)의 단축 표기법이다. 예를 들어 #0f38은 #00ff3388과 같습니다.
함수형 표기법: rgb(R, G, B[, A]) 또는 rgba(R, G, B, A)
R(빨강), G(초록), B(파랑)은 <integer><percentage>이며 숫자 255가 100%와 동일합니다. A(알파)는 0과 1 사이의 <number>거나 <percentage>이며 숫자 1이 100%(불투명)와 동일합니다.
함수형 표기법: rgb(R G B[ A]) 또는 rgba(R G B A)
CSS Colors Level 4부터 공백으로 구분한 값을 함수형 표기법과 사용할 수 있습니다.

예제

다양한 RGB 구문

다음 예제는 한 가지 색상을 만들 때 쓸 수 있는 다양한 RGB 색상 구문을 보입니다.

/* 아래 모든 구문은 불투명한 핫핑크를 표현합니다. */

/* Hexadecimal syntax */
#f09
#F09
#ff0099
#FF0099

/* Functional syntax */
rgb(255,0,153)
rgb(255, 0, 153)
rgb(255, 0, 153.0) /* ERROR! Don't use fractions. */
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /* ERROR! Don't mix integers and percentages. */
rgb(255 0 153)

/* Hexadecimal syntax with alpha value */
#f09f
#F09F
#ff0099ff
#FF0099FF

/* Functional syntax with alpha value */
rgb(255, 0, 153, 1)
rgb(255, 0, 153, 100%)

/* Whitespace syntax */
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/* Functional syntax with floats value */
rgb(255, 0, 153.6, 1)
rgb(1e2, .5e1, .5e0, +.25e2%)
다양한 RGB 투명도 구문
/* Hexadecimal syntax */
#3a30                    /*   0% opaque green */ 
#3A3F                    /* full opaque green */ 
#33aa3300                /*   0% opaque green */ 
#33AA3388                /*  50% opaque green */ 

/* Functional syntax */
rgba(51, 170, 51, .1)    /*  10% opaque green */ 
rgba(51, 170, 51, .4)    /*  40% opaque green */ 
rgba(51, 170, 51, .7)    /*  70% opaque green */ 
rgba(51, 170, 51,  1)    /* full opaque green */ 

/* Whitespace syntax */
rgba(51 170 51 / 0.4)    /*  40% opaque green */ 
rgba(51 170 51 / 40%)    /*  40% opaque green */ 

/* Functional syntax with floats value */
rgba(255, 0, 153.6, 1)
rgba(1e2, .5e1, .5e0, +.25e2%)

HSL 색상

HSL 색상 모델은 색상, 채도, 명도를 통해 특정 색상을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다.

많은 디자이너들은 색상, 채도, 명도를 따로 조절할 수 있는 HSL이 RGB보다 더 직관적임을 발견합니다. 또한 HSL을 사용하면 짝이 맞는 색(예컨대 한 가지 색의 여러 밝기) 여러 종류를 더 쉽게 만들 수 있습니다.

구문

HSL 색상은 함수형 hsl()과 hsla() 표기법을 사용합니다.

참고: CSS Colors Level 4부터 hsla()hsl()의 다른 이름입니다. Level 4 표준을 구현한 브라우저에서는 같은 매개변수를 받고 동일하게 행동합니다.

함수형 표기법: hsl(H, S, L[, A]) 또는 hsla(H, S, L, A)
H(색상)은 색상원에서의 <angle>CSS Color Module Level 4 기준 deg, rad, gradturn을 사용할 수 있습니다. 단위 없이 <number>로 표현할 경우 CSS Color Module Level 3에 명시된 것과 같이 각도로 해석합니다. 정의에 따르면 빨강=0deg=360deg이며 다른 색은 (초록=120deg, 파랑=240deg 등) 원을 따라 분포하고 있습니다. <angle>이라면 암묵적으로 원의 주위를 한 바퀴 돕니다. 예컨대 -120deg=240deg, 480deg=120deg, -1turn=1turn 입니다.
S(채도)와 L(명도)는 <percentage>입니다. 100% 채도는 제일 진한 색이며 0%는 회색입니다. 100% 명도는 흰색, 0% 명도는 검은색, 50% 명도는 "보통" 색입니다.
A(알파)는 0과 1 사이의 <number>거나 <percentage>이며 숫자 1이 100%(불투명)와 동일합니다.
함수형 표기법: hsl(H S L[ A]) 또는 hsla(H S L A)
CSS Colors Level 4부터 공백으로 구분한 값을 함수형 표기법과 사용할 수 있습니다.

예제

다양한 HSL 구문
/* 아래 모든 구문은 라벤더를 표현합니다. */
hsl(270,60%,70%)
hsl(270, 60%, 70%)
hsl(270 60% 70%)
hsl(270deg, 60%, 70%)
hsl(4.71239rad, 60%, 70%)
hsl(.75turn, 60%, 70%)

/* 아래 모든 구문은 85% 투명한 라벤더를 표현합니다. */
hsl(270, 60%, 50%, .15)
hsl(270, 60%, 50%, 15%)
hsl(270 60% 50% / .15)
hsl(270 60% 50% / 15%)
제일 진한 색상
표현 설명 미리보기
hsl(0, 100%, 50%) red  
hsl(30, 100%, 50%) orange  
hsl(60, 100%, 50%) yellow  
hsl(90, 100%, 50%) lime green  
hsl(120, 100%, 50%) green  
hsl(150, 100%, 50%) blue-green  
hsl(180, 100%, 50%) cyan  
hsl(210, 100%, 50%) sky blue  
hsl(240, 100%, 50%) blue  
hsl(270, 100%, 50%) purple  
hsl(300, 100%, 50%) magenta  
hsl(330, 100%, 50%) pink  
hsl(360, 100%, 50%) red  
밝고 어두운 초록
Notation Description Live
hsl(120, 100%, 0%) black  
hsl(120, 100%, 20%)    
hsl(120, 100%, 40%)    
hsl(120, 100%, 60%)    
hsl(120, 100%, 80%)    
hsl(120, 100%, 100%) white  
진하고 옅은 초록
Notation Description Live
hsl(120, 100%, 50%) green  
hsl(120, 80%, 50%)    
hsl(120, 60%, 50%)    
hsl(120, 40%, 50%)    
hsl(120, 20%, 50%)    
hsl(120, 0%, 50%) gray  
다양한 HSL 투명도 구문
hsla(240, 100%, 50%, .05)     /*   5% opaque blue */ 
hsla(240, 100%, 50%, .4)      /*  40% opaque blue */ 
hsla(240, 100%, 50%, .7)      /*  70% opaque blue */ 
hsla(240, 100%, 50%, 1)       /* full opaque blue */ 

/* Whitespace syntax */
hsla(240 100% 50% / .05)      /*   5% opaque blue */ 

/* Percentage value for alpha */
hsla(240 100% 50% / 5%)       /*   5% opaque blue */ 

시스템 색상

모든 시스템에서 모든 시스템 색상을 지원하는건 아닙니다. 공개 웹 페이지에서 사용하는건 좋지 않습니다.

ActiveBorder
Active window border.
ActiveCaption
Active window caption. Should be used with CaptionText as foreground color.
AppWorkspace
Background color of multiple document interface.
Background
Desktop background.
ButtonFace
Face background color for 3-D elements that appear 3-D due to one layer of surrounding border. Should be used with the ButtonText foreground color.
ButtonHighlight
The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
ButtonShadow
The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
ButtonText
Text on push buttons. Should be used with the ButtonFace or ThreeDFace background color.
CaptionText
Text in caption, size box, and scrollbar arrow box. Should be used with the ActiveCaption background color.
GrayText
Grayed (disabled) text.
Highlight
Item(s) selected in a control. Should be used with the HighlightText foreground color.
HighlightText
Text of item(s) selected in a control. Should be used with the Highlight background color.
InactiveBorder
Inactive window border.
InactiveCaption
Inactive window caption. Should be used with the InactiveCaptionText foreground color.
InactiveCaptionText
Color of text in an inactive caption. Should be used with the InactiveCaption background color.
InfoBackground
Background color for tooltip controls. Should be used with the InfoText foreground color.
InfoText
Text color for tooltip controls. Should be used with the InfoBackground background color.
Menu
Menu background. Should be used with the MenuText or -moz-MenuBarText foreground color.
MenuText
Text in menus. Should be used with the Menu background color.
Scrollbar
Background color of scroll bars.
ThreeDDarkShadow
The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDFace
The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the ButtonText foreground color.
ThreeDHighlight
The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDLightShadow
The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDShadow
The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
Window
Window background. Should be used with the WindowText foreground color.
WindowFrame
Window frame.
WindowText
Text in windows. Should be used with the Window background color.

Mozilla 시스템 색상 확장

-moz-ButtonDefault
The border color that goes around buttons that represent the default action for a dialog box.
-moz-ButtonHoverFace
The background color of a button that the mouse pointer is over (which would be ThreeDFace or ButtonFace when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverText foreground color.
-moz-ButtonHoverText
The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverFace background color.
-moz-CellHighlight
Background color for selected item in a tree widget. Should be used with the -moz-CellHighlightText foreground color. See also -moz-html-CellHighlight.
-moz-CellHighlightText
Text color for a selected item in a tree. Should be used with the -moz-CellHighlight background color. See also -moz-html-CellHighlightText.
-moz-Combobox
Background color for combo-boxes. Should be used with the -moz-ComboboxText foreground color. In versions prior to 1.9.2, use -moz-Field instead.
-moz-ComboboxText
Text color for combo-boxes. Should be used with the -moz-Combobox background color. In versions prior to 1.9.2, use -moz-FieldText instead.
-moz-Dialog
Background color for dialog boxes. Should be used with the -moz-DialogText foreground color.
-moz-DialogText
Text color for dialog boxes. Should be used with the -moz-Dialog background color.
-moz-dragtargetzone
-moz-EvenTreeRow
Background color for even-numbered rows in a tree. Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-OddTreeRow.
-moz-Field
Text field background color. Should be used with the -moz-FieldText foreground color.
-moz-FieldText
Text field text color. Should be used with the -moz-Field, -moz-EvenTreeRow, or -moz-OddTreeRow background color.
-moz-html-CellHighlight
Background color for highlighted item in HTML <select>s. Should be used with the -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight.
-moz-html-CellHighlightText
Text color for highlighted items in HTML <select>s. Should be used with the -moz-html-CellHighlight background color. Prior to Gecko 1.9, use -moz-CellHighlightText.
-moz-mac-accentdarkestshadow
-moz-mac-accentdarkshadow
-moz-mac-accentface
-moz-mac-accentlightesthighlight
-moz-mac-accentlightshadow
-moz-mac-accentregularhighlight
-moz-mac-accentregularshadow
-moz-mac-chrome-active
-moz-mac-chrome-inactive
-moz-mac-focusring
-moz-mac-menuselect
-moz-mac-menushadow
-moz-mac-menutextselect
-moz-MenuHover
Background color for hovered menu items. Often similar to Highlight. Should be used with the -moz-MenuHoverText or -moz-MenuBarHoverText foreground color.
-moz-MenuHoverText
Text color for hovered menu items. Often similar to HighlightText. Should be used with the -moz-MenuHover background color.
-moz-MenuBarText
Text color in menu bars. Often similar to MenuText. Should be used on top of Menu background.
-moz-MenuBarHoverText
Color for hovered text in menu bars. Often similar to -moz-MenuHoverText. Should be used on top of -moz-MenuHover background.
-moz-nativehyperlinktext
Default platform hyperlink color.
-moz-OddTreeRow
Background color for odd-numbered rows in a tree. Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-EvenTreeRow.
-moz-win-communicationstext
Should be used for text in objects with -moz-appearance: -moz-win-communications-toolbox;.
-moz-win-mediatext
Should be used for text in objects with -moz-appearance: -moz-win-media-toolbox.
-moz-win-accentcolor
Requires Gecko 56
Used to access the Windows 10 custom accent color that you can set on the start menu, taskbar, title bars, etc.
-moz-win-accentcolortext
Requires Gecko 56
Used to access the color of text placed over the Windows 10 custom accent color in the start menu, taskbar, title bars, etc.

Mozilla 색상 설정 확장

-moz-activehyperlinktext
User's preference for text color of active links. Should be used with the default document background color.
-moz-default-background-color
User's preference for the document background color.
-moz-default-color
User's preference for the text color.
-moz-hyperlinktext
User's preference for the text color of unvisited links. Should be used with the default document background color.
-moz-visitedhyperlinktext
User's preference for the text color of visited links. Should be used with the default document background color.

보간

애니메이션과 그라데이션은 <color> 값을 빨강, 초록, 파랑 각 구성 성분별로 유동소수점 실수를 사용해 보간합니다. 보간 중 예상하지 못한 회색이 등장하는걸 방지하기 위해 계산은 알파 채널을 미리 곱한 sRGBA 색 공간에서 수행합니다. 애니메이션에서 보간의 속도는 timing function이 결정합니다.

접근성 고려사항

색을 구별하기 어려운 사람도 있으므로, WCAG 2.0 권고안은 특정 메시지, 행동, 또는 결과를 나타내는 방법으로 오직 색만 사용하는걸 강력히 반대하고 있습니다. 색상과 색상 대비를 참고하세요.

명세

Specification Status Comment
CSS Color Module Level 4
The definition of '<color>' in that specification.
Working Draft Adds rebeccapurple, four- (#RGBA) and eight-digit (#RRGGBBAA) hexadecimal notations, rgba() and hsla() as aliases of rgb() and hsl() (both with identical parameter syntax), space-separated function parameters as an alternative to commas, percentages for alpha values, and angles for the hue component in hsl() colors.
CSS Color Module Level 3
The definition of '<color>' in that specification.
Recommendation Deprecates system colors. Adds SVG colors and rgba(), hsl(), and hsla() functional notations.
CSS Level 2 (Revision 1)
The definition of '<color>' in that specification.
Recommendation Adds the orange keyword and system colors.
CSS Level 1
The definition of '<color>' in that specification.
Recommendation Initial definition. Includes 16 basic color keywords.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support 1Chrome Android Full support 18Edge Mobile Full support 12Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Keyword color valuesChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3
Notes
Full support 3
Notes
Notes Internet Explorer 8 and later support gray color keywords spelled with an e (grey, darkgrey, darkslategrey, dimgrey, lightgrey, and lightslategrey). Internet Explorer 3 to Internet Explorer 7 only support the keywords spelled with a (gray, darkgray, darkslategray, dimgray, lightgray, and lightslategray).
Opera Full support 3.5Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
RGB hexadecimal notation (#RRGGBB, #RGB)Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
RGB functional notation (rgb())Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
HSL color values (hsl())Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9.5Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Alpha color values (rgba(), hsla())Chrome Full support 1Edge Full support 12Firefox Full support 3IE Full support 9Opera Full support 10Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
currentcolorChrome Full support 1Edge ? Firefox Full support 1.5IE Full support 9Opera Full support 9.5Safari Full support 4WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
transparentChrome Full support 1Edge ? Firefox Full support 3IE Full support 9Opera Full support 10Safari Full support 3.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
rebeccapurpleChrome Full support 38Edge ? Firefox Full support 33IE Full support 11Opera Full support 25Safari Full support YesWebView Android Full support YesChrome Android ? Edge Mobile ? Firefox Android Full support 33Opera Android ? Safari iOS Full support 8Samsung Internet Android ?
RGBA hexadecimal notation (#RRGGBBAA, #RGBA)Chrome Full support 62
Full support 62
Full support 52
Disabled
Disabled From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox Full support 49IE ? Opera Full support 39
Disabled
Full support 39
Disabled
Disabled From version 39: this feature is behind the Enable experimental Web Platform features preference.
Safari Full support 9.1WebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android ? Opera Android No support NoSafari iOS ? Samsung Internet Android ?
Space-separated functional color notationsChrome Full support 65Edge ? Firefox Full support 52IE ? Opera Full support 52Safari ? WebView Android Full support 65Chrome Android Full support 65Edge Mobile ? Firefox Android Full support 52Opera Android Full support 52Safari iOS ? Samsung Internet Android ?
Allow floats in rgb() and rgba()Chrome Full support 66Edge ? Firefox Full support 52IE ? Opera Full support 53Safari ? WebView Android Full support 66Chrome Android Full support 66Edge Mobile ? Firefox Android Full support 52Opera Android Full support 53Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: urty5656
최종 변경자: urty5656,