웹 색상 이름 사전

한눈에 보기

CSS 색상 이름은 tomato처럼 HEX 코드 대신 쓸 수 있는 키워드입니다. 이 페이지는 그중 25가지의 HEX·RGB 값과, 흰색·검정 글자를 올렸을 때의 WCAG 명암비를 빌드 시 계산해 보여 줍니다. 아래에서는 이름이 어디서 왔는지, 이름과 실제 색이 어긋나는 사례, 명암비를 읽는 법과 한계를 확인된 자료 기준으로 설명합니다. 색은 화면·환경에 따라 다르게 보일 수 있고 접근성 판단의 최종 기준은 실제 화면 측정입니다.

• CSS 명명 색은 CSS Color Module Level 4 표에서 148개 키워드로 나열되며, 별칭 쌍을 빼면 서로 다른 색은 139개입니다.
• 이름의 상당수는 X11 색상 목록에서 왔고, 이름과 색의 인상이 어긋나는 경우가 있습니다.
• 명암비는 본문 4.5:1, 큰 글자 3:1(AA)이 최소 기준으로 널리 쓰입니다.
• 같은 색도 흰 글자와 검정 글자에서 결과가 크게 갈립니다. 이 표의 두 열을 함께 보세요.

이름은 어디서 왔나: X11에서 CSS Color 4까지

위키백과(Web colors 항목) 기준으로, 초기 웹 브라우저인 Mosaic과 Netscape Navigator는 X Window System 응용으로 출발했기 때문에 X11 색상 이름을 바탕으로 색 목록을 만들었습니다. HTML 4.01(1999년 확정)은 기본 16색을 정의했고, CSS는 이 16색에 Netscape의 X11 목록에서 124색을 더해 140개 이름을 인식했습니다. CSS Color Module Level 4 명세의 명명 색 표는 현재 148개 키워드를 나열하며 (transparent, currentcolor 제외), 그중 aqua/cyan, fuchsia/magenta와 gray/grey 계열 철자 쌍 등 9쌍이 같은 값이라 서로 다른 sRGB 색은 139개입니다. 명세는 이 목록 대부분이 X11 색상 체계의 한 버전에서 왔다고 설명합니다. 키워드는 ASCII 대소문자를 구분하지 않습니다.

실제 사례: 이름과 색이 어긋날 때, 그리고 새 이름이 생길 때

사례 1. green은 왜 어두운 초록일까

CSS의 green은 #008000이고, 가장 밝은 초록 #00FF00은 lime이라는 이름입니다. 위키백과는 X11 목록의 green이 HTML의 green과 충돌했다고 설명합니다. 그래서 우리가 흔히 "초록"이라 떠올리는 쨍한 색은 green이 아니라 lime입니다. 직접 계산하면 green은 흰 배경 위에서 약 5.14:1로 본문 기준을 넘지만, lime은 약 1.37:1로 흰 배경 위 글자색으로는 거의 쓸 수 없습니다. 이름만 보고 색을 고르면 접근성이 정반대로 나올 수 있다는 점이 배울 점입니다.

사례 2. 2014년에 추가된 rebeccapurple

2014년 6월 21일 CSS 워킹 그룹은 Colors Level 4 편집 초안에 rebeccapurple을 추가했습니다. 위키백과에 따르면 이 이름은 웹 표준 전문가 Eric Meyer의 딸 Rebecca를 기리는 것으로, Rebecca는 2014년 6월 7일, 여섯 번째 생일에 세상을 떠났습니다. 색값은 #663399입니다(CSS Color 4 명세 표 기준). 이 색은 흰 배경 위에서 약 8.41:1로 AAA(7:1)까지 넘습니다(이 페이지와 같은 식으로 계산한 값). 명명 색 목록이 고정된 유산이 아니라 표준화 과정에서 실제로 늘어나는 목록이라는 점을 보여 주는 사례입니다.

사례 3. 계산식 속의 작은 숫자 0.03928

이 페이지의 계산은 WCAG 2.x 정의대로 채널값이 0.03928 이하일 때 12.92로 나눕니다. W3C의 상대 휘도 설명 문서는 IEC sRGB 표준의 정확한 경계값은 0.04045이고 0.03928은 정오표에서 수정 대상이라고 적으면서, 8비트 색에서는 실질적 차이가 거의 없다고 덧붙입니다. 따라서 표의 값은 WCAG 2.x 문서의 식을 따른 것이며, 4.5:1 같은 기준선 바로 근처의 색은 도구마다 소수점 둘째 자리가 다르게 나올 수 있습니다.

웹 색상 이름이란?

CSS에서는 #FF6347 같은 HEX 코드 대신 tomato처럼 사람이 읽기 쉬운 색상 이름(키워드)을 그대로 쓸 수 있습니다. 이런 이름은 CSS Color Module에 정의되어 있어 주요 브라우저가 같은 값으로 해석합니다. 이름은 대소문자를 구분하지 않으므로 Tomato, tomato, TOMATO는 모두 같은 색입니다. 이 페이지는 그중 자주 마주치는 25가지를 따뜻한 색 계열 10개, 차가운 색 계열 9개, 중성·무채색 계열 6개로 나누어 보여 줍니다. 계열 구분은 이 페이지가 보기 편하도록 나눈 편집상의 분류이며 CSS 표준에 있는 분류가 아닙니다. 예를 들어 Orchid와 Plum은 보라 계열이라 차가운 색 쪽에 넣었고, Chartreuse(연두)는 노랑에 가깝다고 보아 따뜻한 색 쪽에 넣었습니다. 보는 사람과 디자인 전통에 따라 다르게 나눌 수 있습니다.

이 페이지의 색은 전체 중 얼마나 되나요?

이 페이지의 데이터 파일에는 색이 25개 들어 있고(위 계열별 개수는 데이터에서 직접 센 값입니다), CSS Color Module Level 4의 명명 색은 gray와 grey처럼 철자만 다른 쌍을 따로 세면 일반적으로 148개로 셉니다. 따라서 여기에 실린 색은 전체의 약16.9%입니다. 나머지를 더 알고 싶다면 CSS Color Module 명세의 색상 이름 목록을 참고하세요. 개수는 명세 개정에 따라 바뀔 수 있으므로 정확한 최신 목록은 명세 문서를 기준으로 확인하는 것이 안전합니다. 이름이 두 개인 색도 있습니다. gray와 grey, aqua와 cyan, fuchsia와 magenta는 각각 같은 색을 가리키는 별칭입니다.

HEX 코드는 어떻게 읽나요?

HEX 코드는 #RRGGBB 형식으로, 두 자리씩 빨강(R), 초록(G), 파랑(B)의 세기를 16진수(00~FF, 즉 0~255)로 나타냅니다.Tomato의 #FF6347는 R=FF(255), G=63(99), B=47(71)이므로 rgb(255, 99, 71)와 같습니다. #000000은 세 채널이 모두 0인 검정, #FFFFFF는 모두 255인 흰색입니다. 위 카드에 함께 적은 rgb 값은 HEX를 10진수로 바꾼 것이며, HSL 같은 다른 표기가 필요하면 색상 변환기를 이용하세요.

글자색 명암비 표 (빌드 시 계산)

웹 접근성 지침(WCAG 2.x)은 글자와 배경의 밝기 차이를 명암비로 측정합니다. 먼저 R, G, B 각각을 255로 나눈 값 s에서 선형 값을 구합니다. s가 0.03928 이하이면 s÷12.92, 그보다 크면 ((s+0.055)÷1.055)의 2.4제곱입니다. 그 뒤 상대 휘도를 L = 0.2126R + 0.7152G + 0.0722B 로 계산하고, 두 색의 명암비를 (밝은 쪽 L + 0.05) ÷ (어두운 쪽 L + 0.05)로 구합니다. 흰색의 L은 1, 검정은 0이므로 흰색과의 비는 1.05 ÷ (L+0.05), 검정과의 비는 (L+0.05) ÷ 0.05 입니다. 아래 표는 이 식을 빌드할 때 모든 색에 적용한 결과입니다. 본문 글자는 4.5:1 이상(AA), 큰 글자(대략 24px 이상 또는 굵은 18.66px 이상)는 3:1 이상이 최소 기준으로 널리 쓰이고, 더 엄격한 AAA는 본문 7:1 이상입니다.

표에서 읽을 수 있는 요약입니다. 흰 배경에서 본문 기준(4.5:1)을 넘는 색은 25개 중 8개, 큰 글자 기준(3:1)까지 넓히면10개이며 7:1(AAA)을 넘는 색은 4개입니다. 검정 배경에서 4.5:1을 넘는 색은 17개입니다. 가장 어두운 색은 Black(L=0.000), 가장 밝은 색은 Ivory(L=0.991)입니다.이 표의 모든 색은 흰색과 검정 중 한쪽 글자로는 4.5:1을 넘습니다. 다만 한쪽만 통과하는 색이 많으니 어느 쪽인지 위 표에서 확인해야 합니다.

검산된 예시 세 가지

첫째, Tomato(#FF6347)은 많은 사람이 "진한 색"이라 느끼지만 흰 배경 위에서는 2.95:1로 큰 글자 기준 3:1에도 못 미쳐 글자색으로는 부족합니다. 반대로 같은 색 위에 검정 글자를 올리면 7.13:1이 되어 읽기 쉽습니다. 버튼 배경으로 쓸 때는 흰 글자보다 검정 글자가 더 안전한 경우가 있다는 뜻입니다.

둘째, Crimson(#DC143C)은 흰 배경 위 4.99:1로 4.5:1을 간신히 넘습니다. 기준선 바로 위이므로, 폰트가 가늘거나 화면 밝기에 따라 읽기 불편할 수 있고 여유가 크지는 않습니다. 같은 색에 검정 글자를 쓰면 4.21:1로 오히려 기준에 못 미칩니다. 이런 경우는 4.5:1을 최소선으로 보고 흰 배경에서는 한 단계 어두운 색을 고르는 편이 낫습니다.

셋째, Gray(#808080)은 중간 회색이라 흰 배경에서 3.95:1로 본문 기준(4.5:1)에 못 미치지만 검정 배경에서는 5.32:1로 통과합니다. 설명 글이나 비활성 텍스트에 흔히 쓰이는 회색을 흰 바탕의 본문으로 쓰면 접근성 기준을 통과하지 못할 수 있다는 뜻입니다. 반면 Teal(#008080)은 흰 배경 위 4.77:1로 통과하지만, 본문 기준을 넘는 색 중 가장 낮은 값은 Teal의 4.77:1이라 여유가 크지 않습니다.

흔한 오해와 한계

• 이름에서 색이 연상되는 대로 나오는 것은 아닙니다. Navy(#000080)는 남색, Indigo(#4B0082)는 진한 보라에 가깝고, Olive(#808000)는 어두운 황록색입니다. 이름은 역사적인 이유로 붙은 키워드이므로 예상과 다를 수 있습니다.
• 명암비는 글자색 선택의 한 요소일 뿐입니다. 글자 두께, 크기, 배경 무늬, 사용자의 시력과 화면 환경이 읽기 편함에 영향을 줍니다. 4.5:1 통과가 곧 모든 사람에게 읽기 쉽다는 뜻은 아닙니다.
• 색만으로 의미를 구분하지 마세요. 빨강/초록처럼 색각 이상이 있는 사람이 구분하기 어려운 조합이 있으므로, 아이콘이나 문구를 함께 쓰는 것이 좋습니다. 자세한 내용은 색각 이상 친화 디자인 가이드를 참고하세요.
• 화면마다 실제 색이 조금씩 다릅니다. HEX 값은 같아도 모니터 보정과 밝기, 야간 모드에 따라 보이는 색이 달라질 수 있고, 인쇄물(CMYK)에서는 같은 색이 정확히 재현되지 않을 수 있습니다.
• 이 표의 명암비는 단색 배경 위 단색 글자 기준입니다. 반투명 색, 그라데이션, 사진 위 글자에는 그대로 적용되지 않으니 실제 화면에서 가장 불리한 지점을 직접 재야 합니다.

이 표를 활용하는 방법

버튼이나 배지 색을 고를 때는 먼저 위 표에서 배경이 될 색의 "더 읽기 쉬운 글자색" 열을 확인하세요. 흰 글자와 검정 글자 중 어느 쪽이 명암비가 더 높은지 바로 알 수 있습니다. 링크나 본문 글자에 쓸 색이라면 흰 배경 열이 4.5:1을 넘는 색(예: Navy, Indigo, Maroon, DimGray)부터 후보로 삼으면 됩니다. 임의의 두 색 조합을 직접 확인하려면 명암비 검사기를, 색을 조합해 팔레트를 만들려면컬러 팔레트 생성기를 이용하세요. 색의 기본 원리가 궁금하다면 색채 이론 기초 가이드도 도움이 됩니다.

자주 묻는 질문