회색 색상 코드 (회색 계열)

회색은 인터페이스의 뼈대입니다. 글자, 테두리, 배경, 비활성 상태에 쓰입니다. 이 페이지는 gray, silver, gainsboro, slategray, dimgray 같은 CSS 이름 회색 10가지에 애시, 배틀십, 차콜, 건메탈, 플래티넘, 토프 그레이 등 차갑고 따뜻한 회색을 더한 31가지를 HEX, RGB, HSL, HSV, CMYK, OKLCH 코드와 함께 보여 주고, 명도 10% 단계의 중성 회색 표도 제공합니다. CSS에서는 gray와 grey 두 철자가 같은 색입니다.

사용 방법

1. 목록에서 회색 계열 색을 고릅니다.
2. HEX, RGB 또는 HSL 코드를 복사합니다.
3. 명도 10% 단계 표로 간격이 고른 회색 스케일을 만듭니다.
4. 회색을 배경으로 쓰기 전에 읽기 좋은 글자색을 확인하세요.

계산식

HSL 명도 L%의 중성 회색 = 세 채널 모두 round(L × 2.55)

중성 회색은 R = G = B입니다. 파랑이 조금 더 많은 회색(슬레이트, 캐뎃)은 차갑게, 빨강과 노랑이 더 많은 회색(그레이지, 시네리어스)은 따뜻하게 느껴집니다. HSL 단계는 숫자로는 고르지만 지각적으로는 고르지 않으며, OKLCH 열이 각 단계의 지각 명도를 보여 줍니다.

예시

슬레이트 그레이(slategray)는 #708090 = rgb(112, 128, 144), hsl(210, 12.6%, 50.2%)로, 빨강에서 파랑까지 32단계만큼 파랗게 기운 회색입니다. 10% 단계 표에서 명도 50%는 127.5 → #808080, 곧 CSS gray이고 30%는 76.5 → #4D4D4D입니다.