CSS 색 이름

CSS 명세에 정의된 이름 있는 색 148가지를 색상별로 묶고 밝은 색부터 어두운 색 순으로 정렬했습니다. 이름이나 HEX 값을 클릭하면 복사됩니다.

빨강

장미색

분홍

마젠타

같은 값: magenta
같은 값: fuchsia

자주

보라

남색

파랑

같은 값: lightslategrey
같은 값: lightslategray
같은 값: slategrey
같은 값: slategray

하늘색

시안

같은 값: cyan
같은 값: aqua
같은 값: darkslategrey
같은 값: darkslategray

청록

에메랄드

초록

라임

노랑

호박색

주황

갈색

베이지

흰색

회색

같은 값: lightgrey
같은 값: lightgray
같은 값: darkgrey
같은 값: darkgray
같은 값: grey
같은 값: gray
같은 값: dimgrey
같은 값: dimgray

검정

자주 묻는 질문

CSS에는 이름 있는 색이 몇 가지인가요?

CSS Color 4는 aliceblue부터 yellowgreen까지 이름 있는 색 148가지를 정의합니다. gray와 grey, aqua와 cyan처럼 같은 값을 가진 동의어도 몇 개 있습니다. transparent와 currentcolor 키워드도 있지만 고정된 색은 아닙니다.

CSS에서 gray와 grey는 같은가요?

네. 모든 gray 이름에는 값이 완전히 같은 grey 표기가 있습니다. 예를 들어 darkgray와 darkgrey는 둘 다 #a9a9a9입니다. darkgray가 gray보다 밝다는 점에 주의하세요. X11 색 목록에서 물려받은 특이한 점입니다.

실제 서비스 CSS에서 색 이름을 써도 되나요?

이름 있는 색은 모든 브라우저에서 작동하므로 프로토타입, 데모, 일회성 스타일에는 문제없습니다. 제품에는 OKLCH나 HEX로 만든 자체 토큰을 쓰는 편이 좋습니다. 스케일로 조정하기 쉽고 테마 간 일관성을 유지하기도 쉽습니다.