CSS 색상 이름 목록 완벽 정리 - 148개 색상 키워드와 실무 활용법 총정리
tomato, gold, teal 같은 CSS 색상 이름은 총 148개입니다. 기본 16색부터 계열별 색상 그룹, darkgray가 gray보다 밝은 이유까지 실무에서 바로 쓰는 정보만 모았습니다.
CSS를 처음 배울 때 color: red;라고 쓰면 글자가 빨갛게 변하는 걸 보고 신기했던 기억, 다들 있으실 겁니다. 그런데 red 말고 어떤 이름이 더 있는지 물어보면 대부분 10개를 넘기지 못합니다. 16진수 코드는 외우기 어렵고, 색상 이름은 몇 개나 되는지 감이 안 잡히는 상황. 이 글에서 CSS 색상 이름 목록을 체계적으로 정리해 드립니다.
CSS 색상 이름이란 무엇인가
CSS 색상 이름(named color)은 #FF6347 같은 16진수 코드 대신 tomato처럼 사람이 읽을 수 있는 단어로 색을 지정하는 방식입니다. 현재 CSS Color Module Level 4 표준 기준으로 브라우저가 인식하는 색상 이름은 총 148개입니다.
이 목록의 뿌리는 두 갈래입니다. 기본 16색은 HTML 4.01 시절부터 정의된 색이고, 나머지 확장 색상은 유닉스 그래픽 시스템인 X11 색상 목록에서 가져온 것입니다. lavenderblush, papayawhip 같은 독특한 이름이 많은 이유가 여기에 있습니다.
색상 이름의 진짜 가치는 기억이 아니라 소통에 있습니다. 코드 리뷰에서 #FF6347보다 tomato가 훨씬 빨리 읽히고, 프로토타입 단계에서는 색상 피커를 열 필요 없이 바로 타이핑할 수 있습니다.
반드시 외워야 할 기본 16색
148개를 전부 외울 필요는 없습니다. 하지만 아래 16개는 모든 브라우저에서 20년 넘게 동일하게 동작해 온 기본 색상이므로 알아두면 두고두고 씁니다.
| 색상 이름 | 16진수 코드 | 색상 이름 | 16진수 코드 |
|---|---|---|---|
| black | #000000 | green | #008000 |
| white | #FFFFFF | lime | #00FF00 |
| red | #FF0000 | olive | #808000 |
| blue | #0000FF | yellow | #FFFF00 |
| silver | #C0C0C0 | navy | #000080 |
| gray | #808080 | teal | #008080 |
| maroon | #800000 | aqua | #00FFFF |
| purple | #800080 | fuchsia | #FF00FF |
여기서 많이 헷갈리는 부분 하나. green은 #00FF00이 아니라 #008000입니다. 완전한 초록(#00FF00)은 lime입니다. 디자이너가 말하는 '초록색'과 CSS의 green이 다르게 보이는 이유가 바로 이것입니다.
계열별 CSS 색상 이름 목록
148개 색상은 계열로 묶어서 기억하는 것이 효율적입니다. 실무에서 자주 쓰이는 이름 위주로 정리했습니다.
빨강, 주황 계열
- crimson(#DC143C), tomato(#FF6347), coral(#FF7F50), salmon(#FA8072), orangered(#FF4500), darkorange(#FF8C00)
노랑, 갈색 계열
- gold(#FFD700), khaki(#F0E68C), chocolate(#D2691E), sienna(#A0522D), tan(#D2B48C), wheat(#F5DEB3)
초록, 파랑, 보라 계열
- seagreen(#2E8B57), mediumseagreen(#3CB371), dodgerblue(#1E90FF), royalblue(#4169E1), steelblue(#4682B4), slateblue(#6A5ACD), orchid(#DA70D6), hotpink(#FF69B4)
이 밖에도 아주 연한 색을 원하면 앞에 light가 붙은 이름(lightblue, lightgreen, lightcoral), 어두운 색을 원하면 dark가 붙은 이름(darkblue, darkgreen, darkred)을 먼저 시도해 보면 대부분 존재합니다. 이름 규칙 자체가 검색 도구 역할을 하는 셈입니다.
알아두면 좋은 특이한 사실들
darkgray가 gray보다 밝습니다
CSS에서 가장 유명한 함정입니다. gray는 #808080인데 darkgray는 #A9A9A9로 오히려 더 밝습니다. 기본 16색은 HTML에서, 확장 색상은 X11에서 따로 왔기 때문에 두 체계의 기준이 어긋난 결과입니다. 어두운 회색이 필요하면 dimgray(#696969)를 쓰는 것이 맞습니다.
rebeccapurple에 담긴 이야기
148번째 색상인 rebeccapurple(#663399)은 2014년에 추가되었습니다. CSS 표준화에 크게 기여한 개발자 에릭 마이어(Eric Meyer)의 딸 레베카를 기리기 위해 웹 커뮤니티가 제안한 색으로, 웹 표준 역사에서 의미가 깊은 색상입니다.
transparent와 currentColor
색상 이름은 아니지만 함께 쓰이는 키워드입니다. transparent는 완전 투명, currentColor는 현재 요소의 글자색을 그대로 가져오는 값입니다. 특히 currentColor는 SVG 아이콘 색을 텍스트와 맞출 때 매우 유용합니다.
실무에서 색상 이름 활용하는 법
실무 프로젝트의 최종 코드에서는 브랜드 컬러를 16진수나 CSS 변수로 관리하는 것이 정석입니다. 색상 이름이 진가를 발휘하는 순간은 따로 있습니다.
- 프로토타입과 디버깅: 레이아웃 확인용으로
background: tomato;를 임시로 넣으면 어떤 요소인지 한눈에 구분됩니다. - 교육과 문서화: 예제 코드에서 색상 이름을 쓰면 읽는 사람이 코드만 보고도 결과를 상상할 수 있습니다.
- 이메일 템플릿: 일부 오래된 메일 클라이언트에서도 기본 색상 이름은 안정적으로 렌더링됩니다.
참고로 CSS에서 작은 아이콘이나 패턴 이미지를 별도 파일 없이 넣을 때는 이미지를 Base64로 변환해 data URI로 삽입하는 방법을 함께 씁니다. 이때 Base64 인코더 같은 브라우저 기반 도구를 쓰면 설치 없이 바로 변환할 수 있어서 색상 작업과 병행하기 편합니다.
오늘 할 일은 두 가지입니다. 첫째, 기본 16색 표를 한 번 직접 타이핑해 보면서 green과 lime의 차이를 눈으로 확인해 보세요. 둘째, 지금 진행 중인 프로젝트의 임시 색상을 색상 이름으로 바꿔서 디버깅 속도가 얼마나 빨라지는지 체감해 보시기 바랍니다.
