색상표
색 이름을 한국어나 영문으로 찾으세요. 누르면 HEX 코드가 복사됩니다.
CSS 색상표
102색
이름·한국어·HEX로 검색하고 눌러서 복사하세요
예: 하늘 · 초록 · red · 파랑 · ff00
무채색 12색
빨강 9색
분홍 6색
주황·노랑 10색
갈색 7색
초록 15색
청록·하늘 12색
파랑 9색
보라 14색
아이보리·베이지 8색
견본 위 글자색은 그 배경에서 대비가 더 나은 쪽으로 자동 선택했습니다. 배경색을 고를 때 글자색을 함께 정하는 참고로 쓰세요.
사용법
- 색 이름을 한국어나 영문으로 검색하세요. HEX 일부(
ff00)로도 찾습니다. - 견본을 누르면 HEX 코드가 복사됩니다.
- 견본 안 글자는 그 배경에서 읽히는 색으로 표시됩니다. 배경색 후보를 고를 때 참고하세요.
- 표에 없는 색이 필요하면 색상 변환기에서 직접 지정하고 변환하세요.
CSS 이름 색을 쓸 때
이름 색은 CSS 표준에 정의돼 있어 어느 브라우저에서나 같은 값으로 해석됩니다. 시안을 빠르게 그리거나 디버깅용으로 눈에 띄는 색을 넣을 때 편합니다. 다만 개수가 정해져 있어 실제 제품 색은 대부분 그 안에 없습니다. 브랜드 색은 HEX나 디자인 시스템 토큰으로 관리하세요.
이름과 밝기가 어긋난 색이 있습니다. darkgray(#a9a9a9)가 gray(#808080)보다 밝습니다. HTML 초기 16색과 X11 색 이름이 서로 다른 시기에 들어와 합쳐진 결과인데, 이름만 믿지 말고 값을 확인해야 하는 이유입니다. gray와 grey처럼 두 철자를 모두 인정하는 것도 같은 사연에서 왔습니다.
배경색은 글자색과 함께 정해야 합니다. 아무리 예쁜 색이라도 그 위에 올릴 글자가 안 읽히면 못 씁니다. 이 표는 각 견본에 대비가 나은 글자색을 자동으로 적용했고, 정확한 수치는 색상 변환기에서 확인할 수 있습니다. 웹 접근성 기준은 본문 4.5:1, 큰 글자 3:1입니다.
자주 묻는 질문
- 이름 색을 코드에 그대로 써도 되나요?
- 됩니다. CSS 표준에 정의된 이름이라 모든 브라우저에서 같은 값으로 해석됩니다. 다만 이름은 148개로 제한돼 있고 디자인에 필요한 정확한 색은 대부분 그 안에 없습니다. 시안이나 임시 표시에는 편하지만, 실제 제품 색은 HEX나 디자인 시스템의 토큰으로 관리하는 편이 낫습니다.
- gray와 grey 중 무엇이 맞나요?
- 둘 다 됩니다. CSS는 미국식 gray와 영국식 grey를 모두 인정하며 같은 색입니다. lightgray/lightgrey, darkgray/darkgrey도 마찬가지입니다. 다만 코드 안에서는 한쪽으로 통일하는 편이 검색과 일관성에 좋습니다.
- darkgray가 gray보다 밝은 이유는?
- CSS 이름 색이 서로 다른 시기에 서로 다른 출처에서 들어왔기 때문입니다. gray는 HTML 초기 16색에서, darkgray는 X11 색 이름에서 왔는데 두 계통이 합쳐지며 이름과 밝기가 어긋난 채로 굳었습니다. darkgray(#a9a9a9)가 gray(#808080)보다 실제로 밝습니다. 이름만 믿지 말고 값을 확인해야 하는 대표적인 예입니다.
- 흰 글자와 검은 글자 중 어느 쪽을 써야 하나요?
- 각 색 견본에 대비가 더 좋은 쪽으로 글자를 그려 뒀습니다. 배경색을 정할 때 그 위에 올릴 글자색을 함께 결정해야 읽히는 화면이 됩니다. 정확한 대비 수치가 필요하면 색상 변환기에서 확인하세요. 본문은 4.5:1, 큰 글자는 3:1 이상이어야 합니다.
- 이 표에 없는 색은 어떻게 찾나요?
- 이름 색은 정해진 목록이라 그 밖의 색은 HEX나 RGB로 직접 지정해야 합니다. 색상 변환기에서 원하는 색을 고르면 HEX·RGB·HSL로 바꿔 주고 밝기 단계도 만들어 줍니다.
이 도구는 브라우저 안에서만 계산하며 입력값을 서버로 보내지 않습니다. 분류: 개발 · 마지막 수정 2026-09-08