📇 CSS 색상 이름표
CSS 표준 색 이름 140개를 한눈에 보고, 검색해서 이름이나 HEX를 바로 복사하세요.
사용 방법
- 전체 색상표를 훑어보거나 검색창에 이름 일부(예: blue) 또는 HEX 일부를 입력합니다.
- 원하는 색 카드에서 HEX 버튼을 눌러 복사합니다.
- CSS에는 color: tomato 처럼 이름 그대로 쓸 수 있습니다.
이럴 때 유용해요
- 데모·프로토타입 코드에서 기억하기 쉬운 색 이름을 골라 쓸 때
- tomato, rebeccapurple 같은 이름이 실제 어떤 색인지 확인할 때
- CSS 강의·교재에서 색 이름 예시를 찾을 때
알아두면 좋은 팁
- gray와 grey 두 철자 모두 브라우저가 인식합니다. 이 표에는 gray 표기로 통일해 실었습니다.
- darkgray(#a9a9a9)가 gray(#808080)보다 밝은 함정이 유명합니다. 이름만 믿지 말고 실제 색을 확인하세요.
- rebeccapurple은 CSS 창시에 기여한 에릭 마이어의 딸 레베카를 기리기 위해 2014년에 추가된 특별한 색입니다.
자주 묻는 질문
CSS 색 이름은 모든 브라우저에서 똑같나요?
네. CSS Color Module 표준에 정의된 색이라 크롬·사파리·파이어폭스·엣지 모두 동일한 HEX 값으로 해석합니다. 호환성 걱정 없이 사용할 수 있습니다.
색 이름과 HEX 중 무엇을 쓰는 게 좋나요?
빠른 데모나 교육용 코드에는 읽기 쉬운 이름이, 실제 서비스에는 디자인 시스템과 정확히 일치하는 HEX·변수가 적합합니다. 이름은 140개뿐이라 세밀한 색 조정이 불가능하기 때문입니다.
transparent와 currentColor도 색 이름인가요?
둘 다 CSS 키워드지만 성격이 다릅니다. transparent는 완전 투명(rgba(0,0,0,0)), currentColor는 그 요소의 글자색을 그대로 참조하는 동적 키워드로, 이 표의 고정 색 이름 140개와는 별개입니다.
검색해도 원하는 색이 없어요.
표준 이름은 140개뿐이라 모든 색을 담지 못합니다. 특정 색과 가장 비슷한 이름을 찾으려면 '색상 이름 찾기' 도구에 색을 직접 입력해 유사도 순으로 확인하는 것이 빠릅니다.
