컬러 팔레트 모음 ― 웹 표준 색상과 Material Design 색상을 복사해서 쓰기
웹 표준 색상, Material Design 색상 시스템, 그레이스케일 램프 등 디자인에서 자주 찾는 정평 있는 팔레트를 HEX 코드와 함께 모아 보여줍니다. 클릭 한 번으로 HEX 코드를 복사할 수 있습니다.
웹 표준 색상(기본 색상)
Material Design 팔레트
그레이스케일(중성 색상)
컬러 팔레트란
이 페이지는 디자인에서 흔히 쓰이는 대표적인 컬러 팔레트를 HEX 코드와 함께 일람으로 표시하는 컬러 팔레트 모음입니다. CSS 초기부터 쓰여 온 웹 표준색 16색, 구글이 체계화한 머티리얼 디자인 컬러 시스템의 대표색, 그리고 흰색에서 검정까지를 10단계로 나눈 그레이스케일 램프의 세 가지를 모아 두었으며, 마음에 든 색의 코드(예: #2196F3)를 한 번의 클릭으로 복사해 CSS나 디자인 도구에 그대로 붙여 넣을 수 있습니다.
배색을 한 색씩 떠오르는 대로 골라 가면 비슷한 색조가 난립해 정돈되지 않은 디자인이 되기 쉽습니다. 이 페이지에 실린 색은 모두 「체계로서 설계된 색」이며, 머티리얼 디자인의 명도 번호(50〜900)나 그레이스케일의 계조(90% 그레이·80% 그레이 등)를 따라 고르기만 해도 색상·명도가 갖추어진 일관된 배색을 짜기 쉬워집니다. 배색의 이론(보색·유사색 등의 조합 방식)은 용어집 절에서 풀이합니다.
컬러 팔레트 사용법
- 목적에 맞는 그룹을 고릅니다 웹 표준색·머티리얼 디자인·그레이스케일의 세 그룹이 세로로 늘어서 있습니다. 용도에 가까운 그룹까지 스크롤해 찾습니다.
- 견본으로 색감을 확인합니다 색 견본(스와치)과 색 이름·HEX 코드가 나란히 표시되므로, 화면에서 실제로 보이는 모습을 확인하며 후보를 좁힙니다.
- 「복사」 버튼을 누릅니다 마음에 든 색 아래의 「복사」 버튼을 클릭하면, HEX 코드가 클립보드에 자동으로 복사됩니다.
-
CSS나 디자인 도구에 붙여 넣습니다
복사한 HEX 코드를 CSS의
color속성이나 피그마·어도비 XD 등의 컬러 피커에 그대로 붙여 넣어 씁니다.
더 잘 활용하기 위한 팁
- 색상 견본 아래의 "복사" 버튼을 누르면 HEX 코드(예: #F44336)가 즉시 클립보드에 복사됩니다.
- 복사한 코드는 별도 변환 없이 CSS나 Figma, Adobe XD 같은 디자인 도구에 그대로 붙여넣을 수 있습니다.
- Material Design의 색상은 "색상 이름 + 명도 번호"(예: Red 500)로 관리되며, 번호가 클수록 더 어두운 색조를 의미합니다.
- 그레이스케일 램프는 텍스트, 배경, 테두리 등 UI 전반의 색조 단계를 통일하고 싶을 때 참고하기 좋습니다.
- 색 조합이 고민된다면 웹 표준 색상 16색부터 조합해 보면 가독성이 높고 대비가 뚜렷한 팔레트를 얻기 쉽습니다.
컬러 팔레트의 활용 상황
웹 배색의 바탕 고르기
사이트 전체의 기조색을 정할 때, 머티리얼 디자인의 명도 램프에서 같은 계열 색의 짙고 옅음을 고르면 헤더·본문·버튼의 색 구분이 자연스럽게 어우러집니다.
UI 구성 요소의 상태색
버튼의 보통·호버·눌렀을 때의 색을, 같은 색상의 명도 차이(예: Blue 500→Blue 700)로 마련하면, 통일감을 지킨 채 상태 변화를 나타낼 수 있습니다.
텍스트·배경의 대비 설계
그레이스케일 램프에서 배경색과 글자색을 고를 때는, 멀리 떨어진 계조끼리 짝지으면 가독성이 높아집니다. 엄밀한 판정에는 별도의 대비 검사 도구를 쓰는 것이 유효합니다.
발표 자료·도표의 배색 통일
슬라이드나 그래프의 배색을 매번 감각으로 고르는 대신, 이 페이지의 색 이름과 HEX 코드를 사내 배색 지침으로 전용하면 자료 사이에서 색이 흔들리지 않게 됩니다.
배색의 용어집
- HEX 코드
- 색을 「#RRGGBB」처럼 16진수 6자리로 나타내는 표기법입니다. R(빨강)·G(초록)·B(파랑) 각각을 두 자리씩 지정하며, CSS나 디자인 도구에서 가장 널리 쓰입니다.
- 머티리얼 디자인
- 구글이 2014년에 발표한 디자인 시스템입니다. 색상마다 50〜900의 명도 번호로 컬러 팔레트를 체계화하고 있으며, 번호가 클수록 어두운 색조를 나타냅니다.
- 보색
- 색상환에서 정반대 위치에 있는 색의 조합입니다. 서로를 돋보이게 하므로, 강한 대비를 내고 싶은 강조색을 고르는 방식으로 쓰입니다.
- 유사색
- 색상환에서 서로 이웃한 색끼리의 조합입니다. 색상의 차이가 작아 정돈되고 차분한 배색이 되기 쉬워, 웹사이트의 기조색 고르기에 자주 쓰입니다.
- 3색 배색
- 색상환을 삼등분하는 위치에 있는 세 색을 짝짓는 배색 기법입니다. 보색보다 부드럽고, 유사색보다 변화가 있어 균형을 잡기 쉬운 조합입니다.
- 그레이스케일
- 색상을 지니지 않고, 흰색부터 검정까지의 밝고 어두움만으로 이루어진 계조입니다. 배경색과 글자색의 명도 차를 조정해 가독성을 확보하는 바탕으로 쓰입니다.
- HSL
- 색을 색상(Hue)·채도(Saturation)·명도(Lightness)의 세 요소로 나타내는 표현 방법입니다. HEX보다 「같은 색상에서 밝기만 바꾼다」 같은 직관적인 조정이 쉽다는 특징이 있습니다.
자주 묻는 질문
color: #F44336;처럼 CSS 속성 값으로 그대로 사용할 수 있습니다. 대부분의 디자인 도구와 프로그래밍 언어에서도 동일한 표기를 그대로 사용할 수 있습니다.
여담 ― 디자이너가 "감으로" 색을 고르지 않는 이유
Google이 2014년에 선보인 "Material Design"은 단순한 시각적 스타일 가이드가 아니라, 색상·타이포그래피·모션·레이아웃을 하나의 일관된 규칙으로 통일하기 위한 디자인 시스템이었습니다. 그중에서도 컬러 팔레트는 특히 체계적으로 설계되어, 각 색상(Red, Blue, Green 등)마다 50부터 900까지의 명도 번호를 마련함으로써 디자이너가 감각에만 의존하지 않고도 앱 전체에서 통일감 있는 배색을 구성할 수 있게 했습니다.
색을 그때그때 즉흥적으로 고르다 보면 비슷해 보이지만 미묘하게 다른 색조가 앱 곳곳에 흩어지게 되어 디자인이 통일감 없이 느껴지기 쉽습니다. 미리 체계화된 팔레트에서 고르면 배색의 일관성을 유지하면서도, 버튼의 상태 변화(기본·호버·눌림 등)를 같은 색상 내 명도 차이만으로 자연스럽게 표현할 수 있다는 장점도 있습니다.
CSS에서 색을 지정하는 방식은 역사적으로 여러 차례 확장되어 왔습니다. 1996년에 등장한 CSS1에서는 16가지 기본 색상 이름과 HEX 코드만 사용할 수 있었지만, 지금은 사람의 지각에 가까운 HSL, HWB, LAB 같은 색 공간도 지정할 수 있습니다. 그럼에도 실무에서는 HEX 코드가 여전히 가장 널리 쓰이고 있으며, 디자이너와 엔지니어를 잇는 공통 언어로서 지금도 빠질 수 없는 존재입니다.