CSS는 16진수 코드나 rgb() 함수 대신 실제 색상 이름(키워드)만으로도 색을 지정할 수 있습니다. 예를 들어 color: tomato;처럼 직관적인 영단어 하나로 스타일을 적용할 수 있어 코드의 가독성이 크게 향상됩니다.
CSS 명명 색상(Named Colors) 전체 목록
현재 CSS에서 공식적으로 지원되는 색상 키워드는 총 148종입니다. 아래는 알파벳 순서로 정리한 전체 목록입니다:
- aliceblue
- antiquewhite
- aqua
- aquamarine
- azure
- beige
- bisque
- black
- blanchedalmond
- blue
- blueviolet
- brown
- burlywood
- cadetblue
- chartreuse
- chocolate
- coral
- cornflowerblue
- cornsilk
- crimson
- cyan
- darkblue
- darkcyan
- darkgoldenrod
- darkgray
- darkgreen
- darkgrey
- darkkhaki
- darkmagenta
- darkolivegreen
- darkorange
- darkorchid
- darkred
- darksalmon
- darkseagreen
- darkslateblue
- darkslategray
- darkslategrey
- darkturquoise
- darkviolet
- deeppink
- deepskyblue
- dimgray
- dimgrey
- dodgerblue
- firebrick
- floralwhite
- forestgreen
- fuchsia
- gainsboro
- ghostwhite
- gold
- goldenrod
- gray
- green
- greenyellow
- grey
- honeydew
- hotpink
- indianred
- indigo
- ivory
- khaki
- lavender
- lavenderblush
- lawngreen
- lemonchiffon
- lightblue
- lightcoral
- lightcyan
- lightgoldenrodyellow
- lightgray
- lightgreen
- lightgrey
- lightpink
- lightsalmon
- lightseagreen
- lightskyblue
- lightslategray
- lightslategrey
- lightsteelblue
- lightyellow
- lime
- limegreen
- linen
- magenta
- maroon
- mediumaquamarine
- mediumblue
- mediumorchid
- mediumpurple
- mediumseagreen
- mediumslateblue
- mediumspringgreen
- mediumturquoise
- mediumvioletred
- midnightblue
- mintcream
- mistyrose
- moccasin
- navajowhite
- navy
- oldlace
- olive
- olivedrab
- orange
- orangered
- orchid
- palegoldenrod
- palegreen
- paleturquoise
- palevioletred
- papayawhip
- peachpuff
- peru
- pink
- plum
- powderblue
- purple
- rebeccapurple
- red
- rosybrown
- royalblue
- saddlebrown
- salmon
- sandybrown
- seagreen
- seashell
- sienna
- silver
- skyblue
- slateblue
- slategray
- slategrey
- snow
- springgreen
- steelblue
- tan
- teal
- thistle
- tomato
- turquoise
- violet
- wheat
- white
- whitesmoke
- yellow
- yellowgreen
참고로 gray와 grey처럼 미국식·영국식 철자를 모두 지원하는 색상도 있습니다(darkgray/darkgrey, dimgray/dimgrey, lightgray/lightgrey, lightslategray/lightslategrey, slategray/slategrey 등). 어느 쪽 철자를 사용해도 동일한 색상이 적용됩니다.
색상 키워드 사용 예시
색상 이름은 color, background-color, border-color 등 모든 색상 관련 속성에 그대로 사용할 수 있습니다.
h1 {
color: tomato;
background-color: ghostwhite;
}정확한 색상 코드가 필요하다면
위키피디아에는 웹에서 사용되는 명명 색상들을 HEX(RGB) 값 및 HSL 값과 함께 한눈에 비교할 수 있는 잘 정리된 색상표가 제공됩니다. 디자인 작업 시 정확한 색상 코드를 확인해야 한다면 이 표를 참고하는 것이 매우 유용합니다.