HTML CSS 색상표｜RGB HEX CMYK 컬러코드 변환기와 색상표 사용법

블로그나 홈페이지를 꾸미다 보면 가장 자주 만나는 것이 색상코드입니다. 눈으로 보기에는 같은 파란색처럼 보여도 실제 코드로 보면 #0000FF, rgb(0, 0, 255), hsl(240, 100%, 50%), hsv(240, 100%, 100%), cmyk(100%, 100%, 0%, 0%)처럼 표현 방식이 달라집니다.

특히 워드프레스, 티스토리, 홈페이지 CSS 작업을 할 때는 HTML 색상표, CSS 컬러코드, RGB HEX 변환, CMYK 변환을 자주 찾게 됩니다. 단순히 색상표만 보는 것보다 직접 색상판에서 원하는 색을 찍고, 바로 코드값을 확인할 수 있으면 훨씬 편합니다.

이번 글에서는 HTML CSS 색상표의 기본 개념부터 RGB, HEX, HSL, HSV, CMYK 차이, 웹디자인에서 색상코드 넣는 방법, 그리고 직접 클릭해서 색상을 고를 수 있는 색상 선택기까지 함께 정리해보겠습니다.

.title {
  color: #1f5f8b;
}

.button {
  background-color: #d35400;
  color: #ffffff;
}

.notice-box {
  background: #f8fbfd;
  border: 1px solid #dce8f2;
  color: #263238;
}

<p style="color:#1f5f8b">파란색 글자입니다.</p>

<span style="background:#fff4e8;color:#d35400">
  강조 문구
</span>

<div style="border:1px solid #dce8f2;background:#f8fbfd">
  안내 박스입니다.
</div>

HTML 색상표와 CSS 컬러코드 차이

HTML 색상표라고 부르는 것은 웹에서 사용할 수 있는 색상코드 목록을 말합니다.

예전에는 HTML 태그 안에서 색상을 직접 지정하는 일이 많았지만, 요즘은 대부분 CSS에서 색상을 관리합니다. 그래서 실제 작업에서는 HTML 색상표보다 CSS 컬러코드라고 이해하는 것이 더 정확합니다.

예를 들어 글자색을 바꾸고 싶다면 CSS에서 color 속성을 사용하고, 배경색은 background-color, 테두리색은 border 또는 border-color를 사용합니다. 색상값은 HEX, RGB, RGBA, HSL, 색상 이름 등을 사용할 수 있지만 블로그나 웹디자인에서는 HEX와 RGB가 가장 많이 쓰입니다.

HEX RGB HSL HSV CMYK 색상코드 차이

HEX 색상코드

HEX는 #000000처럼 샵 기호와 6자리 문자로 표현하는 색상코드입니다. 앞의 두 자리는 빨강, 가운데 두 자리는 초록, 마지막 두 자리는 파랑 값을 의미합니다. CSS에서 가장 많이 쓰는 방식이라 웹사이트 색상을 지정할 때 가장 익숙한 형태입니다.

RGB 색상코드

RGB는 Red, Green, Blue의 약자입니다. 각각 0부터 255까지 숫자로 표현하고, 값이 높을수록 해당 색의 빛이 강해집니다. 예를 들어 rgb(255, 0, 0)은 빨강, rgb(0, 0, 255)는 파랑입니다.

HSL 색상코드

HSL은 Hue, Saturation, Lightness의 약자입니다. 색상, 채도, 밝기를 기준으로 색을 조절합니다. 색을 조금 더 밝게 만들거나 채도를 낮춰 부드럽게 만들 때 RGB보다 직관적으로 느껴질 수 있습니다.

HSV 색상코드

HSV는 Hue, Saturation, Value의 약자입니다. 색상 선택기에서 많이 쓰는 방식입니다. 오른쪽 색상바에서 Hue를 고르고, 큰 색상판에서 Saturation과 Value를 조절하는 구조가 바로 HSV 방식에 가깝습니다.

CMYK 색상코드

CMYK는 Cyan, Magenta, Yellow, Key Black의 약자입니다. 화면이 아니라 인쇄물에서 많이 사용합니다. 웹에서 보던 RGB 색상을 CMYK로 변환할 수는 있지만, 화면 색과 인쇄 색이 완전히 같지는 않을 수 있습니다.

색상 선택기 사용방법

위 색상 선택기는 오른쪽 세로 색상바에서 빨강, 노랑, 초록, 청록, 파랑, 보라 계열을 먼저 선택하고, 왼쪽 큰 색상판에서 채도와 밝기를 선택하는 방식입니다. 색상판의 오른쪽으로 갈수록 채도가 강해지고, 아래쪽으로 갈수록 어두워집니다.

• 오른쪽 세로 바에서 원하는 색상 계열을 먼저 고릅니다.
• 큰 색상판에서 원하는 밝기와 채도를 클릭합니다.
• Name, RGB, HSL, HSV, HEX, CMYK 값이 자동으로 표시됩니다.
• 웹디자인이나 CSS 작업에는 HEX 또는 RGB 값을 복사해서 사용합니다.
• 인쇄물 색상 참고가 필요할 때는 CMYK 값을 확인합니다.
• 자주 쓰는 색은 아래 팔레트 버튼을 눌러 빠르게 선택할 수 있습니다.

블로그와 홈페이지 색상 고르는 방법

색상표를 보면 예쁜 색이 너무 많아서 오히려 고르기 어렵습니다. 이럴 때는 메인 컬러 1개, 강조 컬러 1개, 배경 컬러 1개 정도로 제한하는 것이 좋습니다. 색을 많이 쓰면 화려해 보이기보다 글이 산만해질 수 있습니다.

• 메인 컬러 : 제목, 링크, 주요 버튼에 사용합니다.
• 강조 컬러 : 구매 버튼, 주의 문구, CTA 영역에 사용합니다.
• 배경 컬러 : 안내 박스, 표 배경, 카드형 박스에 사용합니다.
• 본문 컬러 : 검정보다 약간 부드러운 진회색을 사용하면 눈이 덜 피곤합니다.
• 경고 컬러 : 빨강은 꼭 필요한 곳에만 사용해야 효과가 큽니다.

색상코드 사용할 때 주의할 점

색상코드는 보기 좋게 쓰는 것도 중요하지만, 가독성이 더 중요합니다. 배경색과 글자색의 대비가 약하면 모바일에서 글이 잘 보이지 않고, 검색엔진이나 AI 검색이 페이지 품질을 평가할 때도 사용자 경험이 떨어지는 글로 보일 수 있습니다.

• 흰 배경에는 너무 연한 회색 글자를 피합니다.
• 노란색 배경에 흰 글자처럼 대비가 약한 조합은 피합니다.
• 빨강, 파랑, 초록을 한 문단에 과하게 섞지 않습니다.
• 버튼 색상은 본문 링크 색상과 구분되게 사용합니다.
• 모바일 화면에서도 글자가 잘 보이는지 확인합니다.
• 인쇄용 색상은 CMYK 변환값만 믿지 말고 샘플 출력으로 확인합니다.

색상표 관련 글

HTML CSS 색상표 마무리 정리

HTML 색상표와 CSS 컬러코드는 블로그와 홈페이지 디자인에서 기본적으로 알아두면 좋은 내용입니다.

웹에서는 보통 HEX와 RGB를 사용하고, 색상 선택기에서는 HSL이나 HSV 방식으로 색을 고르는 경우가 많습니다. 인쇄물에서는 CMYK를 참고하지만, 실제 출력 색상은 종이와 인쇄 환경에 따라 달라질 수 있습니다.

블로그 디자인에서는 예쁜 색을 많이 쓰는 것보다 메인 컬러, 강조 컬러, 배경 컬러를 정해두고 반복해서 사용하는 것이 더 깔끔합니다.

특히 글자색과 배경색의 대비를 충분히 확보해야 모바일에서도 읽기 좋고, 검색엔진 입장에서도 사용자 경험이 좋은 페이지로 평가받기 쉽습니다.