• 가이드

웹 컬러에 대해 알아보기 : HEX(16진수), RGB, RGBA

웹 색상 표현법


w3school.com Color picker

웹디자인 시 텍스트, 배경 등에 색상을 추가할 때는 16진수(HEX), RGB, RGBA 와 같은 색상 표현법을 사용합니다.

아임웹은 사용자가 색상 표현법을 몰라도, 디자인 모드 곳곳에 배치된 컬러피커(Color Picker)를 통해 직접 색상을 선택할 수 있도록 제작되었습니다. 또한, 한 번 색상을 사용하면, 선택한 색상들이 히스토리에 최대 8개까지 기록되어 이전에 사용한 색상을 다시 찾아보지 않아도 되는 편리함도 갖추고 있습니다.

다만 색상 표현법을 이해하고, 또 어떻게 사용하는지 알아두면 다양한 부문에서 응용이 가능합니다. 예를 들어 우리 회사의 정확한 브랜드 웹 컬러값을 알아두면, 블로그, 카페, Facebook 페이지 등을 꾸밀 때 일관된 색상으로 브랜드 아이덴티티를 유지해갈 수 있습니다.

참고 : 디지털 색상 표현법으로 HSL, HSLA 와 같은 표현법도 존재하지만, 많이 사용되진 않아 16진수, RGB, RGBA 만 알아도 충분합니다.

16진수(HEX)

16진수는 웹에서 가장 많이 사용되는 색상 표현법입니다. 특수 기호 #을 입력하고, 그 뒤에 여섯 자리의 16진수를 입력하여 표기합니다. 예를 들어 토마토색#FF6347 로 표현할 수 있습니다.

RGB와 RGBA

RGB는 R(적), G(녹), B(청) 색상을 혼합하여 색상을 표현하는 방법입니다. rgb를 선언한 다음 괄호 안에 각 R, G, B 값을 0~255 사이로 입력해 표기합니다. 예를 들어 rgb(255, 99, 71)을 입력하면, 위에서 입력한 토마토색(#FF6347)과 같은 색상을 표현할 수 있습니다.

RGBA는 기본 RGB 값에 알파(A)값이 더해진 색상 표현법입니다. 알파(A)값은 투명도를 가리키며, 0에서 1 사이 숫자 또는 소수점을 입력하여 투명도를 조절할 수 있습니다.

위 토마토 색상을 30% 불투명하게 표현하려면 rgb(255, 99, 71, 0.3)으로 입력합니다. 아임웹 컬러피커에서는 색상 입력칸 위에 투명도 슬라이더를 움직여 조절할 수도 있습니다. 투명도 상세 조절방법

  • 알파(A) 값을 0으로 지정하면 100% 투명한 상태를 의미합니다. 색상이 숨겨집니다.
  • 알파(A) 값을 1로 지정하면 100% 불투명한 상태를 의미합니다.
  • 알파(A) 값을 소수점으로도 입력할 수 있습니다. 예를 들어 0.110% 불투명한 상태를 의미합니다.
목록으로

아임웹 디자이너가 되어주세요!

개인 디자이너, 1인 기업을 위한 아임웹 디자이너 프로그램

리셀러/디자이너 신청

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.

218.7K

누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.

315

일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.

2.2K

전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 나이스페이, 엑심베이 공식파트너입니다.