컬러 팔레트 모음 ― 웹 표준 색상과 Material Design 색상을 복사해서 쓰기
웹 표준 색상, Material Design 색상 시스템, 그레이스케일 램프 등 디자인에서 자주 찾는 정평 있는 팔레트를 HEX 코드와 함께 모아 보여줍니다. 클릭 한 번으로 HEX 코드를 복사할 수 있습니다.
웹 표준 색상(기본 색상)
Material Design 팔레트
그레이스케일(중성 색상)
사용 팁
- 색상 견본 아래의 "복사" 버튼을 누르면 HEX 코드(예: #F44336)가 즉시 클립보드에 복사됩니다.
- 복사한 코드는 별도 변환 없이 CSS나 Figma, Adobe XD 같은 디자인 도구에 그대로 붙여넣을 수 있습니다.
- Material Design의 색상은 "색상 이름 + 명도 번호"(예: Red 500)로 관리되며, 번호가 클수록 더 어두운 색조를 의미합니다.
- 그레이스케일 램프는 텍스트, 배경, 테두리 등 UI 전반의 색조 단계를 통일하고 싶을 때 참고하기 좋습니다.
- 색 조합이 고민된다면 웹 표준 색상 16색부터 조합해 보면 가독성이 높고 대비가 뚜렷한 팔레트를 얻기 쉽습니다.
자주 묻는 질문
color: #F44336;처럼 CSS 속성 값으로 그대로 사용할 수 있습니다. 대부분의 디자인 도구와 프로그래밍 언어에서도 동일한 표기를 그대로 사용할 수 있습니다.
여담 ― 디자이너가 "감으로" 색을 고르지 않는 이유
Google이 2014년에 선보인 "Material Design"은 단순한 시각적 스타일 가이드가 아니라, 색상·타이포그래피·모션·레이아웃을 하나의 일관된 규칙으로 통일하기 위한 디자인 시스템이었습니다. 그중에서도 컬러 팔레트는 특히 체계적으로 설계되어, 각 색상(Red, Blue, Green 등)마다 50부터 900까지의 명도 번호를 마련함으로써 디자이너가 감각에만 의존하지 않고도 앱 전체에서 통일감 있는 배색을 구성할 수 있게 했습니다.
색을 그때그때 즉흥적으로 고르다 보면 비슷해 보이지만 미묘하게 다른 색조가 앱 곳곳에 흩어지게 되어 디자인이 통일감 없이 느껴지기 쉽습니다. 미리 체계화된 팔레트에서 고르면 배색의 일관성을 유지하면서도, 버튼의 상태 변화(기본·호버·눌림 등)를 같은 색상 내 명도 차이만으로 자연스럽게 표현할 수 있다는 장점도 있습니다.
CSS에서 색을 지정하는 방식은 역사적으로 여러 차례 확장되어 왔습니다. 1996년에 등장한 CSS1에서는 16가지 기본 색상 이름과 HEX 코드만 사용할 수 있었지만, 지금은 사람의 지각에 가까운 HSL, HWB, LAB 같은 색 공간도 지정할 수 있습니다. 그럼에도 실무에서는 HEX 코드가 여전히 가장 널리 쓰이고 있으며, 디자이너와 엔지니어를 잇는 공통 언어로서 지금도 빠질 수 없는 존재입니다.