CSS 색상 이름 목록 완벽 정리 - 이름만으로 쓰는 140여 가지 컬러 총정리
red, skyblue, rebeccapurple까지. 외우기 쉬운 CSS 색상 이름과 헥스 코드를 표 하나로 정리하고, 실무에서 헷갈리는 별칭과 사용 팁까지 알려드립니다.
CSS로 글자 색을 바꾸려고 #3498db 같은 헥스 코드를 일일이 검색해 본 경험, 한 번쯤 있으실 겁니다. 사실 자주 쓰는 색은 헥스 코드 대신 red, blue, gray 같은 이름으로 바로 쓸 수 있습니다. CSS는 사람이 읽고 외우기 쉬운 색상 이름을 표준으로 정해두고 있고, 그 수가 생각보다 많습니다.
CSS 색상 이름이란
CSS 색상 이름은 헥스 코드(#ffffff)나 rgb() 함수 대신, 영어 단어로 색을 지정하는 방식입니다. 예를 들어 color: tomato; 라고 쓰면 토마토 색(#ff6347)이 그대로 적용됩니다. 브라우저가 이름과 색상값을 미리 매핑해두기 때문에 가능한 일입니다.
이 색상 이름들은 W3C의 CSS Color Module 명세에 정의돼 있습니다. CSS Color Module Level 4 기준으로 총 148개의 이름이 등록돼 있으며, W3School 등에서는 모든 브라우저가 동일하게 지원하는 140개를 표준 목록으로 안내합니다. 차이가 나는 이유는 뒤에서 설명할 별칭(같은 색의 다른 이름) 때문입니다.
색상 이름은 대소문자를 구분하지 않습니다.Red,red,RED모두 같은 색으로 동작합니다.
기본 16색에서 140여 색까지
역사적으로 보면 색상 이름은 단계적으로 늘어났습니다.
- 기본 16색: 초기 HTML과 CSS1 시절부터 쓰던 색입니다. black, white, red, green, blue, yellow, aqua, fuchsia, gray, lime, maroon, navy, olive, purple, silver, teal 입니다.
- 확장 색상(X11 기반): 이후 운영체제와 X11 색상에서 가져온 이름들이 추가돼 약 140여 개로 늘었습니다. skyblue, tomato, coral, gold, salmon 같은 직관적인 이름이 여기에 속합니다.
- rebeccapurple: 2014년에 추가된 특별한 색(#663399)입니다. 웹 표준에 기여한 개발자 Eric Meyer의 딸 Rebecca를 기리기 위해 등록된, 사연 있는 색상 이름입니다.
자주 쓰는 CSS 색상 이름 목록
140여 개를 전부 외울 필요는 없습니다. 실무에서 손이 자주 가는 색상 이름과 헥스 코드를 묶어 정리했습니다.
| 색상 이름 | 헥스 코드 | 특징 |
|---|---|---|
| black | #000000 | 완전한 검정 |
| white | #ffffff | 완전한 흰색 |
| red | #ff0000 | 순수 빨강 |
| tomato | #ff6347 | 부드러운 주황빛 빨강 |
| coral | #ff7f50 | 산호색, 포인트 컬러로 인기 |
| gold | #ffd700 | 금색, 강조 텍스트용 |
| lime | #00ff00 | 밝은 형광 초록 |
| green | #008000 | 이름과 달리 어두운 초록 |
| teal | #008080 | 청록, 차분한 톤 |
| skyblue | #87ceeb | 하늘색 |
| royalblue | #4169e1 | 선명한 파랑, 링크색으로 적합 |
| navy | #000080 | 어두운 남색 |
| rebeccapurple | #663399 | 사연 있는 보라색 |
| gray | #808080 | 중간 회색 |
| silver | #c0c0c0 | 밝은 회색 |
전체 목록이 필요하다면 MDN이나 W3School의 색상 표를 즐겨찾기에 두면 편합니다. 디자인 시안에서 여러 색을 무작위로 테스트해 보고 싶을 때는 랜덤 숫자 생성기로 RGB 값을 무작위로 뽑아 비교해 보는 방법도 의외로 쓸만합니다.
같은 색, 다른 이름 - 별칭 정리
148개와 140개의 차이를 만드는 핵심이 바로 별칭입니다. 영국식과 미국식 철자, 혹은 같은 색의 다른 표현이 중복으로 등록돼 있습니다.
- gray = grey: 회색 계열은 두 철자가 모두 동작합니다. darkgray/darkgrey, lightgray/lightgrey 등도 마찬가지입니다.
- aqua = cyan: 둘 다 #00ffff 입니다.
- fuchsia = magenta: 둘 다 #ff00ff 입니다.
색상 이름 외의 특수 키워드
실제 색 이름은 아니지만 색상이 들어갈 자리에 쓸 수 있는 키워드도 알아두면 좋습니다.
- transparent: 완전 투명. 배경을 비우거나 테두리를 숨길 때 씁니다.
- currentColor: 현재 요소의 글자색(color 값)을 그대로 가져옵니다. 아이콘 색을 텍스트와 자동으로 맞출 때 유용합니다.
- inherit: 부모 요소의 색상값을 상속받습니다.
실무에서 색상 이름 쓸 때 주의점
색상 이름은 가독성이 좋지만 한계도 있습니다. 정해진 148개 외의 색은 표현할 수 없고, 투명도(알파)를 조절할 수도 없습니다. 미세한 브랜드 컬러나 그라데이션이 필요하면 헥스 코드나 rgb(), hsl()을 써야 합니다.
또한 같은 색 이름이라도 모니터에 따라 다르게 보일 수 있습니다. 색감이 중요한 작업이라면 여러 화면에서 확인하는 것이 안전하며, 디자인이 다양한 해상도에서 어떻게 보이는지 점검할 때 화면 크기 확인 도구로 해상도별 레이아웃을 함께 검토하면 색과 배치를 동시에 잡을 수 있습니다.
정리하면, 빠른 프로토타이핑이나 임시 색 지정에는 색상 이름이 편하고, 정확한 브랜드 컬러나 투명도가 필요한 본 작업에는 헥스 코드와 함수형 표기를 쓰는 것이 좋습니다. 자주 쓰는 색 이름 10여 개만 외워두면 코딩 속도가 눈에 띄게 빨라집니다. 지금 즐겨 쓰는 색의 영어 이름부터 하나씩 익혀 보세요.
