회색 대 회색: 철자법, 음영 및 색상 코드

"회색"인가요 아니면 "회색"인가요? 대답은 전적으로 대서양의 어느 쪽에 있는지에 따라 달라집니다. 그리고 코드에서 무엇을 선택하는지, 어떤 규칙을 따르는지에 따라 다른 결과가 나올 수 있습니다. 이는 두 단어가 모두 동일한 시각적 현상(흑백 사이의 무채색 중립성, 그리고 그 주변에 모여 있는 중립에 가까운 모든 따뜻하고 차가운 변형)을 나타내더라도 기술적인 맥락에서 철자가 실제로 중요한 색상 질문 중 하나입니다.

이 문서에서는 철자 문제, CSS 규칙, 색상을 "회색"으로 만드는 기술적 현실, 따뜻한 회색과 차가운 회색 중에서 선택하는 실용적인 가이드, 전체 밝기 스펙트럼에 걸친 주요 회색 16진수 코드에 대한 참조 테이블을 다룹니다.

미국식 대 영국식 철자법: 회색 대 회색

철자 차이는 미국 영어와 영국 영어의 차이를 보여주는 가장 명확한 예 중 하나입니다.

다양성	선호하는 철자법
미국 영어	회색
영국 영어	회색
캐나다 영어	그레이(영국 영향)
호주 영어	그레이(영국 영향)
남아프리카 영어	그레이(영국 영향)

두 철자 모두 오래되었습니다. 이 단어는 고대 영어 grϣg로 거슬러 올라가며 "회색"과 "회색"은 모두 중세 시대의 영어 텍스트에 나타납니다. 철자가 지배적인 차이는 미국 영어가 한 변형을 중심으로 표준화하는 반면 영국 영어는 다른 변형을 유지하는 일반적인 패턴을 따랐습니다.

유용한 니모닉: grAy는 미국식, 회색은 유럽식입니다. 모음 A와 E는 대륙을 나타냅니다.

일상적인 사용에서는 철자가 모두 틀리지 않습니다. 동일한 색상을 나타냅니다. 스타일 가이드와 브랜드 가이드라인은 일반적으로 일관성을 위해 하나의 철자를 지정합니다. 명확한 지역적 선호 없이 국제적인 청중을 위해 글을 쓰는 경우 "회색"은 CSS 사양에서 선호하는 철자이기 때문에 웹 컨텍스트에서 약간의 이점이 있습니다(자세한 내용은 아래 참조).

CSS 명명된 색상: 회색이 표준입니다

HTML 및 CSS 색상 표준이 확립되면 어떤 철자를 인코딩할지 결정이 내려졌습니다. CSS에서는 두 철자가 모두 허용되지만 항상 동일한 색상을 나타내지는 않으므로 미묘한 기술적 위험이 발생합니다.

CSS 그레이 제품군

CSS에는 명명된 여러 회색 색상이 포함되어 있습니다. 다음은 해당되는 경우 철자 변형이 모두 포함된 전체 세트입니다.

CSS 이름	16진수	메모
`gainsboro`	#DCDCDC	매우 밝은 회색
`lightgray` / `lightgrey`	#D3D3D3	같은 색상, 철자 두 개
`silver`	#C0C0C0	중간 밝은 회색
`darkgray` / `darkgrey`	#A9A9A9	같은 색상, 철자 두 개
`gray`	#808080	중간 회색 — "회색" 철자만 사용
`grey`	#808080	CSS의 `gray`와 동일
`dimgray`/`dimgrey`	#696969	같은 색상, 철자 두 개
`slategray`/`slategrey`	#708090	약간 청회색
`darkslategray` / `darkslategrey`	#2F4F4F	다크 블루 그레이
`lightslategray`/`lightslategrey`	#778899	라이트 블루 그레이

중요한 참고 사항: 대부분의 화합물(lightgray, darkgray, dimgray, slategray)에 대해 두 철자가 모두 존재하며 동일한 16진수 값을 나타냅니다. 기본 gray/grey의 경우 둘 다 #808080에도 매핑됩니다. 브라우저 기본값을 사용하는 개발자에게는 차이점이 가장 중요합니다. 실제로 CSS는 두 철자를 모두 올바르게 처리합니다.

더 중요한 기술 규칙: 16진수 코드 및 RGB 값에서 "회색"과 "회색"이라는 단어는 관련이 없습니다. 숫자만 중요합니다. #808080는 뭐라고 부르든 #808080입니다.

회색을 "회색"으로 만드는 것은 무엇입니까? 기술적 현실

기술적으로 무채색 색상이라고 하는 순수 회색은 세 가지 RGB 채널 모두에서 동일한 값을 갖습니다. 빨간색, 녹색, 파란색이 동일한 경우 결과는 색조가 없는 중간색이 됩니다.

RGB 패턴	16진수	색상
`rgb(255, 255, 255)`	#FFFFFF	화이트
`rgb(192, 192, 192)`	#C0C0C0	실버
`rgb(128, 128, 128)`	#808080	중간 회색
`rgb(64, 64, 64)`	#404040	다크 그레이
`rgb(0, 0, 0)`	#000000	블랙

HSL 용어로 말하면, 진정한 무채색 회색은 채도가 0%이고 색상이 정의되지 않습니다. 밝기 비율에 따라 밝기가 얼마나 밝거나 어둡게 결정됩니다.

그러나 실제 디자인에서 대부분의 "회색" 색상은 완벽하게 무채색이 아닙니다. "따뜻함" 또는 "시원함"을 느끼게 하는 약간의 색상 경향이 있습니다.

50가지 회색 음영: 스펙트럼 전체에 걸친 주요 16진수 코드

흰색에 가까운 것부터 검은색에 가까운 것까지 전체 범위를 포괄하는 실용적인 참고 자료:

그늘	16진수	RGB	설명
거의 흰색	#F8F8F8	`rgb(248, 248, 248)`	회색빛 흰색
고스트 화이트	#F5F5F5	`rgb(245, 245, 245)`	공통 페이지 배경
게인즈버러	#DCDCDC	`rgb(220, 220, 220)`	클래식 라이트 그레이
라이트 그레이	#D3D3D3	`rgb(211, 211, 211)`	CSS `lightgray`
실버	#C0C0C0	`rgb(192, 192, 192)`	금속 참조
진한 회색(CSS)	#A9A9A9	`rgb(169, 169, 169)`	CSS `darkgray`
그레이(CSS)	#808080	`rgb(128, 128, 128)`	트루 미드 그레이
희미한 회색	#696969	`rgb(105, 105, 105)`	CSS `dimgray`
접근성 회색	#767676	`rgb(118, 118, 118)`	흰색에 대한 AA 텍스트의 최소
숯	#36454F	`rgb(54, 69, 79)`	쿨한 다크 그레이
제트 블랙	#343434	`rgb(52, 52, 52)`	니어 블랙
거의 검은색	#1A1A1A	`rgb(26, 26, 26)`	퓨어블랙보다 부드러움

중요한 접근성 회색: #767676

이 특정 회색은 웹 디자인에서 매우 중요합니다. 일반 텍스트에 대한 WCAG AA 최소값인 흰색#FFFFFF에 대해 4.5:1 명암비를 달성하는 가장 밝은 회색입니다. #767676보다 밝은 회색은 흰색 배경의 텍스트로 WCAG AA에 실패합니다.

이는 CSS gray(#808080)가 기술적으로 WCAG AA에 실패했음을 의미합니다. 이는 흰색에 대해 약 3.95:1의 명암비만 달성합니다. "회색"이라고 불리고 상대적으로 어두운 느낌에도 불구하고, 본문 텍스트에 접근할 만큼 어둡지는 않습니다. 액세스할 수 있는 텍스트에는 #767676 이상을 사용하세요.

쿨 vs 웜 그레이: 디자이너의 진짜 질문

실제로 디자이너에게 더 중요한 구별은 "회색 대 회색"이 아니라 따뜻한 회색 대 차가운 회색입니다.

쿨 그레이 연한 파란색, 녹색 또는 보라색입니다. 매끄럽고 현대적이며 임상적인 느낌을 줍니다. 다른 멋진 색상과 잘 어울리며 기술을 선도하는 미학을 만들어냅니다.

따뜻한 회색 연한 빨간색, 주황색 또는 노란색입니다. 그들은 자연스럽고 접근하기 쉽고 소박한 느낌을 줍니다. 목재 톤, 테라코타 및 기타 따뜻한 천연 소재와 잘 어울립니다.

중성 회색(색조 없이 완벽하게 무채색)은 둘 사이에 위치합니다. 실제로 진정한 중성 회색은 주변 색상에 따라 다르게 인식됩니다(동시 대비라고 알려진 상황 효과).

따뜻한 회색과 차가운 회색의 예

카테고리	16진수	RGB 분석	캐릭터
쿨 블루 그레이	#708090	파란색이 약간 더 높음	슬레이트, 기업
쿨 퍼플 그레이	#9E9EAE	녹색 위의 파란색+빨간색	현대적이고 최소한의
뉴트럴 그레이	#808080	R=G=B	순수, 무채색
따뜻한 노란색 - 회색	#9B9B8A	파란색 위의 빨간색+녹색	소박하고 자연스러운
따뜻한 갈색 회색	#8A8070	빨간색 최고, 파란색 최저	그레이지, 유기농
따뜻한 핑크 그레이	#9E8F8F	빨간색 최고	홍당무 인접

16진수 코드로 따뜻한 회색과 차가운 회색을 식별하는 방법

RGB 값을 살펴보십시오. - 세 채널 중 파란색이 가장 높음인 경우 → 쿨 그레이 - 빨간색이나 녹색이 가장 높음 → 따뜻한 회색인 경우 - 세 개 모두 동일인 경우 → 중성 회색

예를 들어: - #708090 = rgb(112, 128, 144) → 파란색(144)이 가장 높음 → 쿨그레이 - #9B9B8A = rgb(155, 155, 138) → 파란색(138)이 가장 낮음 → 따뜻한 회색 - #808080 = rgb(128, 128, 128) → 모두 동일 → 중성 회색

현대 웹 디자인의 회색

회색은 웹 디자인에서 가장 중요한 색상이라고 할 수 있습니다. 다음 위치에 나타납니다. - 페이지 배경 — 흰색 대신 밝은 회색을 사용하면 눈의 피로가 줄어들고 시각적 계층 구조가 만들어집니다. - UI 구성 요소 — 테두리, 구분선, 입력 필드 배경 및 카드 배경이 거의 전체적으로 회색입니다. - 타이포그래피 — 웹의 본문 텍스트는 순수한 검정색이 아닌 어두운 회색인 경우가 많으므로 거친 느낌이 줄어듭니다. - 비활성화 상태 — 회색으로 표시된 대화형 요소는 일반적으로 사용할 수 없음을 나타냅니다.

웹 디자인 시스템을 위한 실용적인 회색 값

사용 사례	추천 헥스	메모
페이지 배경(밝은 모드)	#F5F5F5	간신히 회색, 매우 깨끗함
카드 배경	#F9F9F9	페이지 bg보다 약간 가벼움
테두리 색상	#E5E5E5	눈에 보이지만 미묘함
음소거된 텍스트/캡션	#6B7280	Tailwind의 grey-500
본문(접근 가능)	#374151	Tailwind의 grey-700
제목 텍스트	#111827	검정색에 가까운 따뜻한
다크 모드 배경	#1F2937	Tailwind의 grey-800
다크 모드 표면	#374151	Tailwind의 grey-700

Tailwind CSS 그레이 스케일(#F9FAFB ~ #030712)은 웹 디자인 시스템에 널리 채택되는 참조가 되었습니다. 음영 생성기를 사용하여 기본 회색 값에서 Tailwind 스타일의 50~950 회색 스케일을 만듭니다.

다크 모드 그레이 전략

다크 모드 디자인에는 신중한 회색 선택이 필요합니다. 대부분의 경우 순수 검정색 #000000을 어두운 모드 배경으로 사용하려는 유혹을 물리쳐야 합니다. 순수 검정색은 흰색 텍스트와 불편할 정도로 거친 대비를 만듭니다. 대신에:

다크 모드 배경은 #121212 ~ #1E1E1E 범위에서 가장 잘 작동합니다. 어둡지만 검은색은 아닙니다.
다크 모드 표면(카드, 대화상자)은 배경보다 한두 단계 더 밝아야 합니다: #2C2C2C ~ #3A3A3A
어두운 배경의 텍스트는 순백색보다는 따뜻한 황백색(#E8E8E8 ~ #F5F5F5)에서 가장 잘 작동합니다.

색상 모델 간 회색 음영 변환

모든 회색의 경우 무채색 속성은 CMYK 및 기타 모델이 예상대로 작동한다는 것을 의미하므로 변환이 간단합니다.

그레이	16진수	RGB	HSL	CMYK
화이트	#FFFFFF	`rgb(255,255,255)`	`hsl(0,0%,100%)`	`C:0 M:0 Y:0 K:0`
라이트 그레이	#D3D3D3	`rgb(211,211,211)`	`hsl(0,0%,83%)`	`C:0 M:0 Y:0 K:17`
미디엄 그레이	#808080	`rgb(128,128,128)`	`hsl(0,0%,50%)`	`C:0 M:0 Y:0 K:50`
다크 그레이	#404040	`rgb(64,64,64)`	`hsl(0,0%,25%)`	`C:0 M:0 Y:0 K:75`
니어 블랙	#1A1A1A	`rgb(26,26,26)`	`hsl(0,0%,10%)`	`C:0 M:0 Y:0 K:90`

진정한 무채색 회색(R, G, B와 동일)의 경우 CMYK 값은 항상 C:0 M:0 Y:0 K:{X}입니다. 여기서 K는 100에서 밝기 백분율을 뺀 것과 같습니다. 색상 변환기를 사용하면 CMYK 값이 더 복잡해지는 0이 아닌 색조의 따뜻한 회색과 차가운 회색을 처리할 수 있습니다.

주요 내용

철자법: "Gray"는 미국 영어입니다. "회색"은 영국식 영어입니다. CSS에서는 두 철자가 모두 명명된 색상에 유효합니다. 대부분은 동일한 16진수 값에 매핑됩니다. 기본 gray 및 grey는 모두 #808080와 같습니다.
기술적 정의: 진정한 무채색 회색은 동일한 RGB 채널(R=G=B)과 0% HSL 채도를 갖습니다. 채널의 불균형은 따뜻한(빨간색/녹색 높음) 또는 차가운(파란색 높음) 회색을 생성합니다.
접근성 중요 임계값: #767676는 흰색 텍스트로 WCAG AA(4.5:1)를 통과하는 가장 밝은 회색입니다. CSS gray #808080 실패 - ~3.95:1 대비만 달성합니다.
따뜻한 vs 차가운 식별: 파란색 채널이 가장 높을 경우 → 차가운 회색입니다. 빨간색/녹색이 가장 높으면 → 따뜻한 회색입니다. 동일한 채널 → 중립
웹 디자인: 회색 배경, 테두리 및 텍스트 변형은 거의 모든 웹 UI의 구조적 레이어를 형성합니다. #F5F5F5 주변에는 밝은 모드 배경을 사용하고 #121212~#1E1E1E 주변에는 어두운 모드 배경을 사용하세요.
음영 생성기를 사용하여 완전한 회색조를 만들고 변환기를 사용하여 회색을 CMYK, HSL, RGB 또는 OKLCH로 변환합니다.