CSS 색상 이름
147개 CSS / X11 named color — HEX·RGB·실시간 스와치, 검색·색상 계열별 그룹화.
IndianRed
rgb(205, 92, 92)
LightCoral
rgb(240, 128, 128)
Salmon
rgb(250, 128, 114)
DarkSalmon
rgb(233, 150, 122)
LightSalmon
rgb(255, 160, 122)
Crimson
rgb(220, 20, 60)
Red
rgb(255, 0, 0)
FireBrick
rgb(178, 34, 34)
DarkRed
rgb(139, 0, 0)
Pink
rgb(255, 192, 203)
LightPink
rgb(255, 182, 193)
HotPink
rgb(255, 105, 180)
DeepPink
rgb(255, 20, 147)
MediumVioletRed
rgb(199, 21, 133)
PaleVioletRed
rgb(219, 112, 147)
Coral
rgb(255, 127, 80)
Tomato
rgb(255, 99, 71)
OrangeRed
rgb(255, 69, 0)
DarkOrange
rgb(255, 140, 0)
Orange
rgb(255, 165, 0)
Gold
rgb(255, 215, 0)
Yellow
rgb(255, 255, 0)
LightYellow
rgb(255, 255, 224)
LemonChiffon
rgb(255, 250, 205)
LightGoldenrodYellow
rgb(250, 250, 210)
PapayaWhip
rgb(255, 239, 213)
Moccasin
rgb(255, 228, 181)
PeachPuff
rgb(255, 218, 185)
PaleGoldenrod
rgb(238, 232, 170)
Khaki
rgb(240, 230, 140)
DarkKhaki
rgb(189, 183, 107)
GreenYellow
rgb(173, 255, 47)
Chartreuse
rgb(127, 255, 0)
LawnGreen
rgb(124, 252, 0)
Lime
rgb(0, 255, 0)
LimeGreen
rgb(50, 205, 50)
PaleGreen
rgb(152, 251, 152)
LightGreen
rgb(144, 238, 144)
MediumSpringGreen
rgb(0, 250, 154)
SpringGreen
rgb(0, 255, 127)
MediumSeaGreen
rgb(60, 179, 113)
SeaGreen
rgb(46, 139, 87)
ForestGreen
rgb(34, 139, 34)
Green
rgb(0, 128, 0)
DarkGreen
rgb(0, 100, 0)
YellowGreen
rgb(154, 205, 50)
OliveDrab
rgb(107, 142, 35)
Olive
rgb(128, 128, 0)
DarkOliveGreen
rgb(85, 107, 47)
MediumAquaMarine
rgb(102, 205, 170)
DarkSeaGreen
rgb(143, 188, 143)
LightSeaGreen
rgb(32, 178, 170)
DarkCyan
rgb(0, 139, 139)
Teal
rgb(0, 128, 128)
Aqua
rgb(0, 255, 255)
Cyan
rgb(0, 255, 255)
LightCyan
rgb(224, 255, 255)
PaleTurquoise
rgb(175, 238, 238)
Aquamarine
rgb(127, 255, 212)
Turquoise
rgb(64, 224, 208)
MediumTurquoise
rgb(72, 209, 204)
DarkTurquoise
rgb(0, 206, 209)
CadetBlue
rgb(95, 158, 160)
SteelBlue
rgb(70, 130, 180)
LightSteelBlue
rgb(176, 196, 222)
PowderBlue
rgb(176, 224, 230)
LightBlue
rgb(173, 216, 230)
SkyBlue
rgb(135, 206, 235)
LightSkyBlue
rgb(135, 206, 250)
DeepSkyBlue
rgb(0, 191, 255)
DodgerBlue
rgb(30, 144, 255)
CornflowerBlue
rgb(100, 149, 237)
MediumSlateBlue
rgb(123, 104, 238)
RoyalBlue
rgb(65, 105, 225)
Blue
rgb(0, 0, 255)
MediumBlue
rgb(0, 0, 205)
DarkBlue
rgb(0, 0, 139)
Navy
rgb(0, 0, 128)
MidnightBlue
rgb(25, 25, 112)
Lavender
rgb(230, 230, 250)
Thistle
rgb(216, 191, 216)
Plum
rgb(221, 160, 221)
Violet
rgb(238, 130, 238)
Orchid
rgb(218, 112, 214)
Fuchsia
rgb(255, 0, 255)
Magenta
rgb(255, 0, 255)
MediumOrchid
rgb(186, 85, 211)
MediumPurple
rgb(147, 112, 219)
RebeccaPurple
rgb(102, 51, 153)
BlueViolet
rgb(138, 43, 226)
DarkViolet
rgb(148, 0, 211)
DarkOrchid
rgb(153, 50, 204)
DarkMagenta
rgb(139, 0, 139)
Purple
rgb(128, 0, 128)
Indigo
rgb(75, 0, 130)
SlateBlue
rgb(106, 90, 205)
DarkSlateBlue
rgb(72, 61, 139)
Cornsilk
rgb(255, 248, 220)
BlanchedAlmond
rgb(255, 235, 205)
Bisque
rgb(255, 228, 196)
NavajoWhite
rgb(255, 222, 173)
Wheat
rgb(245, 222, 179)
BurlyWood
rgb(222, 184, 135)
Tan
rgb(210, 180, 140)
RosyBrown
rgb(188, 143, 143)
SandyBrown
rgb(244, 164, 96)
Goldenrod
rgb(218, 165, 32)
DarkGoldenrod
rgb(184, 134, 11)
Peru
rgb(205, 133, 63)
Chocolate
rgb(210, 105, 30)
SaddleBrown
rgb(139, 69, 19)
Sienna
rgb(160, 82, 45)
Brown
rgb(165, 42, 42)
Maroon
rgb(128, 0, 0)
White
rgb(255, 255, 255)
Snow
rgb(255, 250, 250)
HoneyDew
rgb(240, 255, 240)
MintCream
rgb(245, 255, 250)
Azure
rgb(240, 255, 255)
AliceBlue
rgb(240, 248, 255)
GhostWhite
rgb(248, 248, 255)
WhiteSmoke
rgb(245, 245, 245)
SeaShell
rgb(255, 245, 238)
Beige
rgb(245, 245, 220)
OldLace
rgb(253, 245, 230)
FloralWhite
rgb(255, 250, 240)
Ivory
rgb(255, 255, 240)
AntiqueWhite
rgb(250, 235, 215)
Linen
rgb(250, 240, 230)
LavenderBlush
rgb(255, 240, 245)
MistyRose
rgb(255, 228, 225)
Gainsboro
rgb(220, 220, 220)
LightGray
rgb(211, 211, 211)
Silver
rgb(192, 192, 192)
DarkGray
rgb(169, 169, 169)
Gray
rgb(128, 128, 128)
DimGray
rgb(105, 105, 105)
LightSlateGray
rgb(119, 136, 153)
SlateGray
rgb(112, 128, 144)
DarkSlateGray
rgb(47, 79, 79)
Black
rgb(0, 0, 0)
사용법
- 검색창에 이름(
tomato) 또는 HEX(#ff6347) 입력. - 색상 계열 칩으로 좁히기 — 예: 액센트 색 고를 때 blue만.
- 각 색상의 복사 버튼으로 HEX를 클립보드에 복사.
자세한 설명
펼치기접기
모든 CSS 색상 키워드를 색 견본, 16진수 코드, 그에 해당하는 rgb() 표기와 함께 살펴보고, 색상 계열로 거르거나 이름과 16진수를 아울러 검색할 수 있습니다. 이 목록은 믿기보다 이해해 두는 편이 좋습니다. 설계된 것이 아니라 X11 윈도 시스템에서 초기 브라우저를 거쳐 물려받은 것이기 때문입니다. 네 가지 색에 대해 gray와 grey 두 철자가 모두 들어 있는 이유도, DarkGray가 실제로 Gray보다 밝은 이유도 여기에 있습니다. 둘은 서로 다른 출처에서 왔고 끝내 정리되지 않았습니다. 유일하게 의도적으로 추가된 것은 rebeccapurple로, 2014년에 어느 웹 표준 저자의 딸을 기려 들어갔습니다. 색마다 있는 복사 버튼을 누르면 16진수를 가져올 수 있습니다.
자주 묻는 질문
Gray와 Grey 모두 유효?
예. 모든 CSS 색상 키워드가 두 철자 모두 허용 — Gray·LightGray·DarkGray·DimGray·SlateGray는 Grey로도 동작. 표에는 간결성을 위해 Gray만 표시.
RebeccaPurple은?
2014년 CSS Color Module Level 4에 추가 — Eric Meyer의 딸 Rebecca를 기리며. 원래 X11 set 이후 추가된 유일한 named color.
같은 색을 가리키는 named color는?
Aqua와 Cyan은 모두 #00FFFF; Magenta와 Fuchsia는 모두 #FF00FF. HTML 4의 16개 named color와 X11 set 통합의 잔재.
디자인 시스템을 이름 있는 색으로 세워도 될까?
간단한 페이지나 데모에서 리터럴로 쓰기에는 괜찮다. 하지만 이 팔레트는 X11에서 물려받은 임의의 목록이고 이름 뒤에 일관된 척도가 없다. 예를 들어 DarkGray(#A9A9A9)가 Gray(#808080)보다 밝다. 균등한 단계나 테마, 다크 모드가 필요한 곳이라면 키워드를 빌려 쓰지 말고 자체 토큰을 정의해야 한다.
이 이름들이 CSS 밖에서도 통하나?
대체로 통한다. 같은 X11 목록이 SVG와 여러 그래프·드로잉 라이브러리, 일부 편집기에도 나타난다. 다만 어디서나 그런 것은 아니고 값이 늘 같지도 않다. 일부 환경은 그중 일부만 정의한다. 도구를 넘나들며 정확한 색이 중요하다면 키워드를 16진수로 바꿔서 넘겨라.
관련 도구
Tailwind 색상 팔레트
전체 Tailwind CSS v4 기본 팔레트 — 22가지 색상 × 11단계 음영(50~950) — Tailwind 클래스·HEX·rgb()로 클릭 복사.
색상·CSS
컬러 정렬
hex 색상 리스트 붙여넣기 → 색조·채도·명도·체감 밝기 기준 정렬. 디자인 토큰 팔레트 정리에 유용.
색상·CSS
파장 → 색 변환기 (nm → sRGB)
빛의 파장(380–780 nm 가시광)을 sRGB 근사 색으로 변환 — 클릭 가능한 무지개 그라데이션 바와 실제 태양 분광에서 가져온 프라운호퍼 흡수선 레퍼런스 포함.
색상·CSS
컬러 토큰 익스포터
컬러 팔레트 한 번 정의 → CSS 커스텀 프로퍼티·Tailwind 설정·SCSS·LESS·디자인 토큰 JSON·SwiftUI Color·Android colors.xml로 익스포트. 라이브 미리보기 스워치.
색상·CSS
색상 이름 찾기
임의의 hex/RGB 색상에 가장 가까운 CSS·Tailwind·XKCD 색상 이름을 OKLab 인지 거리 기준으로 정렬해 표시.
색상·CSS
컬러 포맷 변환기
어떤 색이든 HEX·RGB·HSL·HSV·OKLCH·CSS 변수로 한 번에 변환.
색상·CSS