CSS 색 이름 색상 코드표
CSS 이름 있는 색 148개를 계열별로, HEX·흰/검 대비까지
파일은 서버로 전송되지 않고 내 기기에서만 처리돼요
CSS 이름 있는 색
148개 이름 · 139가지 색
같은 값을 가리키는 이름(gray/grey, aqua/cyan, fuchsia/magenta)이 있어 실제 색은 139가지예요.
빨강 계열 (9)
| 색 | 이름 | HEX | 흰/검 대비 |
|---|---|---|---|
| rosybrown | #BC8F8F | 2.81 / 7.46 | |
| tomato | #FF6347 | 2.95 / 7.13 | |
| indianred | #CD5C5C | 3.98 / 5.28 | |
| red | #FF0000 | 4.00 / 5.25 | |
| crimson | #DC143C | 4.99 / 4.21 | |
| firebrick | #B22222 | 6.68 / 3.14 | |
| brown | #A52A2A | 7.08 / 2.96 | |
| darkred | #8B0000 | 10.01 / 2.10 | |
| maroon | #800000 | 10.95 / 1.92 |
분홍 계열 (11)
| 색 | 이름 | HEX | 흰/검 대비 |
|---|---|---|---|
| mistyrose | #FFE4E1 | 1.20 / 17.44 | |
| pink | #FFC0CB | 1.54 / 13.65 | |
| lightpink | #FFB6C1 | 1.65 / 12.71 | |
| thistle | #D8BFD8 | 1.70 / 12.36 | |
| plum | #DDA0DD | 2.07 / 10.15 | |
| lightcoral | #F08080 | 2.59 / 8.10 | |
| violet | #EE82EE | 2.32 / 9.06 | |
| hotpink | #FF69B4 | 2.65 / 7.93 | |
| salmon | #FA8072 | 2.50 / 8.40 | |
| orchid | #DA70D6 | 2.89 / 7.27 | |
| palevioletred | #DB7093 | 3.11 / 6.75 |
주황 계열 (19)
| 색 | 이름 | HEX | 흰/검 대비 |
|---|---|---|---|
| oldlace | #FDF5E6 | 1.08 / 19.38 | |
| linen | #FAF0E6 | 1.12 / 18.67 | |
| papayawhip | #FFEFD5 | 1.13 / 18.56 | |
| antiquewhite | #FAEBD7 | 1.17 / 17.93 | |
| blanchedalmond | #FFEBCD | 1.17 / 18.02 | |
| bisque | #FFE4C4 | 1.22 / 17.15 | |
| peachpuff | #FFDAB9 | 1.31 / 15.98 | |
| moccasin | #FFE4B5 | 1.23 / 17.02 | |
| navajowhite | #FFDEAD | 1.29 / 16.30 | |
| wheat | #F5DEB3 | 1.31 / 15.98 | |
| lightsalmon | #FFA07A | 1.99 / 10.56 | |
| burlywood | #DEB887 | 1.86 / 11.31 | |
| darksalmon | #E9967A | 2.31 / 9.11 | |
| sandybrown | #F4A460 | 2.03 / 10.33 | |
| coral | #FF7F50 | 2.50 / 8.40 | |
| peru | #CD853F | 2.99 / 7.02 | |
| darkorange | #FF8C00 | 2.33 / 9.00 | |
| orange | #FFA500 | 1.97 / 10.63 | |
| orangered | #FF4500 | 3.44 / 6.10 |
갈색 계열 (6)
| 색 | 이름 | HEX | 흰/검 대비 |
|---|---|---|---|
| tan | #D2B48C | 1.97 / 10.65 | |
| goldenrod | #DAA520 | 2.24 / 9.38 | |
| chocolate | #D2691E | 3.63 / 5.78 | |
| sienna | #A0522D | 5.62 / 3.74 | |
| darkgoldenrod | #B8860B | 3.25 / 6.45 | |
| saddlebrown | #8B4513 | 7.10 / 2.96 |
노랑 계열 (11)
| 색 | 이름 | HEX | 흰/검 대비 |
|---|---|---|---|
| lightyellow | #FFFFE0 | 1.02 / 20.63 | |
| cornsilk | #FFF8DC | 1.07 / 19.71 | |
| beige | #F5F5DC | 1.11 / 18.98 | |
| lemonchiffon | #FFFACD | 1.06 / 19.81 | |
| lightgoldenrodyellow | #FAFAD2 | 1.07 / 19.67 | |
| palegoldenrod | #EEE8AA | 1.25 / 16.76 | |
| khaki | #F0E68C | 1.28 / 16.40 | |
| darkkhaki | #BDB76B | 2.07 / 10.15 | |
| gold | #FFD700 | 1.40 / 14.97 | |
| yellow | #FFFF00 | 1.07 / 19.56 | |
| olive | #808000 | 4.20 / 5.01 |
초록 계열 (18)
| 색 | 이름 | HEX | 흰/검 대비 |
|---|---|---|---|
| palegreen | #98FB98 | 1.27 / 16.59 | |
| lightgreen | #90EE90 | 1.42 / 14.82 | |
| darkseagreen | #8FBC8F | 2.15 / 9.76 | |
| greenyellow | #ADFF2F | 1.23 / 17.12 | |
| chartreuse | #7FFF00 | 1.30 / 16.21 | |
| lime | #00FF00 | 1.37 / 15.30 | |
| limegreen | #32CD32 | 2.12 / 9.91 | |
| springgreen | #00FF7F | 1.35 / 15.61 | |
| yellowgreen | #9ACD32 | 1.88 / 11.15 | |
| lawngreen | #7CFC00 | 1.33 / 15.78 | |
| mediumspringgreen | #00FA9A | 1.39 / 15.14 | |
| mediumseagreen | #3CB371 | 2.67 / 7.88 | |
| seagreen | #2E8B57 | 4.25 / 4.95 | |
| olivedrab | #6B8E23 | 3.81 / 5.52 | |
| forestgreen | #228B22 | 4.39 / 4.78 | |
| darkolivegreen | #556B2F | 5.95 / 3.53 | |
| green | #008000 | 5.14 / 4.09 | |
| darkgreen | #006400 | 7.44 / 2.82 |
청록 계열 (17)
| 색 | 이름 | HEX | 흰/검 대비 |
|---|---|---|---|
| lightcyan | #E0FFFF | 1.05 / 19.92 | |
| paleturquoise | #AFEEEE | 1.29 / 16.29 | |
| powderblue | #B0E0E6 | 1.43 / 14.65 | |
| lightblue | #ADD8E6 | 1.53 / 13.74 | |
| aquamarine | #7FFFD4 | 1.22 / 17.16 | |
| skyblue | #87CEEB | 1.74 / 12.06 | |
| mediumaquamarine | #66CDAA | 1.93 / 10.88 | |
| turquoise | #40E0D0 | 1.64 / 12.79 | |
| mediumturquoise | #48D1CC | 1.86 / 11.27 | |
| aqua (cyan) | #00FFFF | 1.25 / 16.75 | |
| cadetblue | #5F9EA0 | 3.05 / 6.88 | |
| deepskyblue | #00BFFF | 2.12 / 9.90 | |
| darkturquoise | #00CED1 | 1.95 / 10.75 | |
| lightseagreen | #20B2AA | 2.62 / 8.01 | |
| darkcyan | #008B8B | 4.15 / 5.07 | |
| darkslategray (darkslategrey) | #2F4F4F | 8.93 / 2.35 | |
| teal | #008080 | 4.77 / 4.40 |
파랑 계열 (17)
| 색 | 이름 | HEX | 흰/검 대비 |
|---|---|---|---|
| lavender | #E6E6FA | 1.23 / 17.06 | |
| lightsteelblue | #B0C4DE | 1.78 / 11.80 | |
| lightskyblue | #87CEFA | 1.72 / 12.24 | |
| mediumslateblue | #7B68EE | 4.15 / 5.06 | |
| cornflowerblue | #6495ED | 2.97 / 7.06 | |
| slateblue | #6A5ACD | 5.31 / 3.96 | |
| royalblue | #4169E1 | 4.85 / 4.33 | |
| dodgerblue | #1E90FF | 3.24 / 6.49 | |
| lightslategray (lightslategrey) | #778899 | 3.64 / 5.77 | |
| blue | #0000FF | 8.59 / 2.44 | |
| slategray (slategrey) | #708090 | 4.05 / 5.18 | |
| steelblue | #4682B4 | 4.11 / 5.11 | |
| mediumblue | #0000CD | 11.16 / 1.88 | |
| darkslateblue | #483D8B | 9.07 / 2.32 | |
| darkblue | #00008B | 15.30 / 1.37 | |
| midnightblue | #191970 | 14.85 / 1.41 | |
| navy | #000080 | 16.01 / 1.31 |
보라 계열 (7)
| 색 | 이름 | HEX | 흰/검 대비 |
|---|---|---|---|
| mediumpurple | #9370DB | 3.76 / 5.58 | |
| mediumorchid | #BA55D3 | 3.94 / 5.33 | |
| blueviolet | #8A2BE2 | 5.96 / 3.52 | |
| darkorchid | #9932CC | 5.70 / 3.68 | |
| darkviolet | #9400D3 | 6.56 / 3.20 | |
| rebeccapurple | #663399 | 8.41 / 2.50 | |
| indigo | #4B0082 | 12.95 / 1.62 |
자주 계열 (5)
| 색 | 이름 | HEX | 흰/검 대비 |
|---|---|---|---|
| deeppink | #FF1493 | 3.64 / 5.77 | |
| fuchsia (magenta) | #FF00FF | 3.14 / 6.70 | |
| mediumvioletred | #C71585 | 5.42 / 3.87 | |
| darkmagenta | #8B008B | 8.50 / 2.47 | |
| purple | #800080 | 9.42 / 2.23 |
흰색 계열 (13)
| 색 | 이름 | HEX | 흰/검 대비 |
|---|---|---|---|
| white | #FFFFFF | 1.00 / 21.00 | |
| ghostwhite | #F8F8FF | 1.06 / 19.86 | |
| snow | #FFFAFA | 1.03 / 20.31 | |
| mintcream | #F5FFFA | 1.02 / 20.57 | |
| aliceblue | #F0F8FF | 1.07 / 19.58 | |
| azure | #F0FFFF | 1.03 / 20.45 | |
| floralwhite | #FFFAF0 | 1.04 / 20.18 | |
| honeydew | #F0FFF0 | 1.04 / 20.27 | |
| ivory | #FFFFF0 | 1.01 / 20.81 | |
| lavenderblush | #FFF0F5 | 1.10 / 19.03 | |
| seashell | #FFF5EE | 1.07 / 19.55 | |
| whitesmoke | #F5F5F5 | 1.09 / 19.26 | |
| gainsboro | #DCDCDC | 1.37 / 15.31 |
회색 계열 (5)
| 색 | 이름 | HEX | 흰/검 대비 |
|---|---|---|---|
| lightgray (lightgrey) | #D3D3D3 | 1.50 / 14.03 | |
| silver | #C0C0C0 | 1.82 / 11.54 | |
| darkgray (darkgrey) | #A9A9A9 | 2.35 / 8.94 | |
| gray (grey) | #808080 | 3.95 / 5.32 | |
| dimgray (dimgrey) | #696969 | 5.49 / 3.83 |
검정 계열 (1)
| 색 | 이름 | HEX | 흰/검 대비 |
|---|---|---|---|
| black | #000000 | 21.00 / 1.00 |
CSS 색 이름 148개를 한눈에
CSS에서는 color: tomato;처럼 색을 이름으로 쓸 수 있어요. W3C CSS Color 4 명세의 이름 있는 색 표에는 148개의 이름이 있고, 그중 철자만 다른 grey 계열 7쌍과 aqua·cyan, fuchsia·magenta 두 쌍이 같은 값을 가리켜서 서로 다른 색은 139가지예요. 이 목록은 각 색의 HSL 색상각과 밝기로 계열을 나눴고, 계열 안에서는 밝은 색부터 놓았어요.
‘흰/검 대비’는 WCAG 공식으로 계산한 흰색·검은색과의 명도 대비예요. 139가지 중 흰 배경에 글자색으로 써도 일반 글자 AA(4.5:1)를 넘는 색은 30가지, 검은 배경에서 4.5:1을 넘는 색은 109가지예요. 각 색 페이지에서 HEX·RGB·HSL·HSV·CMYK 값, 비슷한 색, 밝기 단계, CSS 예시를 보고 바로 다른 색 코드로 바꿔 볼 수 있어요.
원하는 색 코드를 직접 넣어 변환하려면 색상 코드 변환을, 어울리는 색 조합을 만들려면 색상 팔레트 만들기를 쓰세요.
참고한 자료
- W3C CSS Color Module Level 4 — 6.1 Named Colors, HSL 변환 알고리즘 (색 이름과 값, 확인 2026-11-12)
- W3C WCAG 2.2 — contrast ratio·relative luminance 정의, 1.4.3·1.4.6 기준 (대비 계산 공식)
자주 묻는 질문
CSS 색 이름은 대소문자를 구분하나요?
아니요. CSS 키워드라서 Tomato, TOMATO, tomato 모두 같은 색이에요.
transparent도 이름 있는 색인가요?
CSS에서 쓸 수 있는 키워드지만, 명세의 이름 있는 색 표(불투명한 색 148개)에는 들어 있지 않아서 이 목록에서는 뺐어요.
함께 쓰면 좋은 도구
- 색상 코드 변환 (HEX·RGB·HSL·CMYK)HEX·RGB·HSL·HSV·CMYK를 서로 바꾸고, 글자 대비(WCAG) 검사, 밝게·어둡게 단계 표
- 색상 팔레트 만들기 (어울리는 색 조합·사진에서 색 뽑기)대표 색 하나로 보색·유사색·삼각 배색·단계색 팔레트, 사진에서 주요 색 뽑기, CSS·PNG로
- JSON 정리 (보기 좋게 들여쓰기·검증·압축)JSON을 보기 좋게 들여쓰기, 오류 위치 표시, 한 줄 압축, 키 정렬, 문자열 이스케이프
- 정규식 테스트 (정규표현식 매칭 확인)패턴과 플래그로 일치하는 부분을 강조 표시, 그룹 값 표, 바꾸기 미리보기, 자주 쓰는 패턴
- Base64 인코딩·디코딩 (글자·파일 ↔ Base64)글자(한글 UTF-8)를 Base64로, Base64를 글자로, 파일·이미지를 data URI로, Base64를 파일로 저장
- 이메일 제목·본문 인코딩 풀기 (=?UTF-8?B?·Quoted-Printable·Base64)=?UTF-8?B?…?=, =?ks_c_5601-1987?…, =EC=95=88 같은 메일 제목·본문을 읽을 수 있는 한글로