CSS 색상 이름표

이 도구로 무엇을 할 수 있나

CSS 표준에 정식 등록된 색상 이름(named color) 중 실무에서 자주 쓰는 30선을 HEX 코드와 함께 한 화면에서 눈으로 확인하고, 원하는 색 타일을 클릭 한 번으로 복사합니다. red, tomato, skyblue처럼 브라우저가 그대로 알아듣는 이름들이라, 색상 이름을 color나 background 속성에 붙여넣으면 별도 변환 없이 바로 렌더링됩니다. 이름이 헷갈리는 색은 실제 색 견본을 나란히 보며 구분할 수 있습니다.

표에 나오는 값이 어떻게 대응되나

CSS 색상 이름은 W3C가 정한 고정 목록이라 이름마다 HEX 값이 정해져 있습니다. 이 페이지는 각 색상 이름을 브라우저 표준 값 기준의 HEX(예: #FF6347)로 보여줍니다. HEX의 두 자리씩(RR·GG·BB)은 각각 0~255의 빨강·초록·파랑 세기와 1:1로 대응하므로, HEX만 알면 rgb(255, 99, 71) 같은 RGB 표기로도 그대로 옮겨 적을 수 있습니다. 색 견본 칸은 그 값을 실제로 칠해 보여주므로, 코드값과 눈에 보이는 색을 동시에 대조할 수 있습니다.

이럴 때 쓰면 좋다

디자인 시안 없이 빠르게 프로토타입을 만들 때 이름만으로 색을 지정하면 코드 가독성이 좋습니다. 또 팀원에게 "그 주황 뭐였지"를 물을 때 coral·darkorange·tomato를 견본으로 비교해 정확한 이름을 고를 수 있습니다. 반대로 디자이너가 준 HEX가 어떤 표준 이름과 가까운지 감을 잡거나, 임의 색 대신 표준 이름으로 통일해 협업 문서를 정리할 때도 유용합니다.

알아두면 좋은 팁

이름 색은 편하지만 미세 조정이 안 됩니다. 브랜드 컬러처럼 정확한 값이 필요하면 이름 대신 HEX를 복사해 쓰세요. CSS 이름은 대소문자를 구분하지 않아 SteelBlue와 steelblue가 같게 동작합니다. 투명도가 필요하면 이름으로는 표현할 수 없으므로 RGB 값을 가져와 rgba(...) 형태로 알파값을 덧붙이면 됩니다.

자주 묻는 질문