200가지 색상표로 원하는 색상 코드를 빠르게 찾아보세요

이 색상표는 웹 디자인과 그래픽 작업에 자주 사용하는 20가지 색상 계열을 총 200개의 세부 색상으로 정리한 온라인 컬러 차트입니다.

로즈, 레드, 오렌지, 옐로우, 그린, 블루, 퍼플, 브라운, 그레이 등 다양한 계열을 밝은 색부터 어두운 색까지 한눈에 비교할 수 있습니다.

원하는 색상 칩을 선택하면 해당 HEX 색상 코드가 자동으로 복사되어 HTML, CSS, 블로그 꾸미기, 문서 작성 및 디자인 작업에 바로 활용할 수 있습니다.

색상표 사용 방법

모바일에서는 화면 상단의 원형 색상 버튼을 눌러 원하는 색상 계열로 빠르게 이동할 수 있습니다.

각 색상 계열에는 밝기와 채도가 다른 10가지 색상이 단계별로 배치되어 있어 비슷한 색을 비교하거나 조화로운 색상 조합을 찾기 편리합니다.

필요한 색상을 찾았다면 해당 색상 칩을 클릭하세요. 화면에 표시된 #FFFFFF, #3B82F6과 같은 HEX 코드가 클립보드에 자동으로 복사됩니다.

복사한 코드는 CSS의 배경색, 글자색, 테두리색 등에 붙여 넣어 사용할 수 있습니다.

HEX 색상 코드는 웹에서 색상을 표현하는 대표적인 방식으로, # 기호와 여섯 자리의 영문 또는 숫자로 구성됩니다.

앞의 두 자리는 빨간색, 가운데 두 자리는 초록색, 마지막 두 자리는 파란색의 강도를 나타냅니다.

예를 들어 흰색은 #FFFFFF, 검은색은 #000000, 선명한 파란색은 #3B82F6처럼 표시됩니다.

HEX 코드는 HTML과 CSS에서 널리 사용되며, 대부분의 웹 제작 도구와 그래픽 프로그램에서도 동일하게 적용할 수 있습니다.

CSS에서는 background-color, color, border-color 등의 속성에 HEX 코드를 입력하면 됩니다.

같은 색상 계열에서 밝은 단계는 배경에, 중간 단계는 버튼이나 아이콘에, 어두운 단계는 제목과 본문에 사용하면 자연스럽고 통일감 있는 화면을 만들 수 있습니다.

깔끔한 웹 디자인을 만들려면 너무 많은 색상을 한 화면에 사용하기보다 기본색, 강조색, 배경색을 중심으로 조합하는 것이 좋습니다.

먼저 브랜드나 페이지 분위기를 나타내는 대표 색상을 하나 선택하고, 같은 계열의 밝은 색은 배경에, 진한 색은 버튼과 강조 요소에 활용해 보세요.

서로 다른 계열을 조합할 때는 한 색상을 중심으로 두고 나머지 색상을 보조적으로 사용하는 것이 안정적입니다.

예를 들어 블루 계열을 대표 색상으로 사용한다면 밝은 슬레이트 색상을 배경으로, 오렌지 계열을 알림이나 중요 버튼의 강조색으로 활용할 수 있습니다.