웹 색상, 헥스 코드·색 이름·인쇄 색상 차이
온라인 쇼핑몰의 버튼 색을 골랐는데 노트북에서는 선명하고 휴대전화에서는 탁하게 보인 적이 있나요? 또는 화면에서 예쁘게 보인 디자인을 인쇄했더니 색이 어둡거나 붉게 바뀌어 당황할 수 있습니다. 이런 차이는 단순히 모니터 품질만의 문제가 아니라 색을 표현하는 방식이 서로 다르기 때문에 생깁니다.
웹 색상을 이해하면 화면용 색을 고를 때 어떤 숫자를 확인해야 하는지, 글자와 배경이 충분히 읽히는지, 인쇄 색상과 왜 달라지는지를 판단할 수 있습니다. 이 글을 읽으면 헥스 코드, 색 이름, 에이치에스엘 방식의 차이와 함께 실제 웹페이지에 적용하기 전 점검할 기준을 알게 됩니다.
웹 색상이란 무엇인가
웹 색상은 웹사이트와 앱 화면에서 색을 표시하기 위해 정한 값입니다. 화면은 빛을 내는 빨강, 초록, 파랑을 섞어 색을 만듭니다. 이 방식을 알지비라고 부르며, 각 색의 밝기를 보통 0부터 255 사이의 값으로 나타냅니다.
예를 들어 알지비 값이 255, 0, 0이면 빨강이고, 0, 0, 0이면 검정입니다. 세 값이 모두 255이면 흰색이 됩니다. 웹페이지에서는 이 숫자를 여러 방식으로 적을 수 있습니다.
- 헥스 코드: 우물표 뒤에 여섯 자리 문자를 적는 방식입니다. 예를 들어 순수한 빨강은
#FF0000으로 표시합니다. - 알지비 표기: 빨강, 초록, 파랑의 값을 직접 적습니다. 투명도까지 넣을 때는 별도의 투명도 값을 함께 사용합니다.
- 색 이름: 흰색, 검정, 파랑처럼 미리 정해진 이름을 쓰는 방식입니다. 기억하기 쉽지만 아주 세밀한 색 조정에는 불리합니다.
- 에이치에스엘 표기: 색상, 채도, 밝기로 색을 설명합니다. 같은 색에서 밝기만 낮추거나 높일 때 비교적 편리합니다.
실무에서는 헥스 코드를 가장 자주 보지만, 어떤 표기법이 더 좋은지는 상황에 따라 다릅니다. 브랜드 색처럼 정확히 같은 색을 반복해서 써야 한다면 헥스 코드가 편하고, 마우스를 올렸을 때 밝기만 바꾸는 효과를 만들 때는 에이치에스엘이 이해하기 쉬울 수 있습니다.
색을 고르기 전 확인할 기준
예쁜 색을 고르는 것과 읽기 좋은 색을 고르는 것은 다릅니다. 특히 배경 위에 글자를 올릴 때는 색의 이름보다 두 색 사이의 밝기 차이를 먼저 살펴야 합니다.
- 용도를 먼저 정하기: 본문 글자, 버튼, 링크, 경고 문구, 장식 색은 서로 역할이 다릅니다. 모든 요소에 강한 색을 쓰면 중요한 정보가 눈에 띄지 않습니다.
- 배경과 함께 보기: 같은 회색도 흰 배경에서는 진하게 보이고 검은 배경에서는 밝게 보입니다. 색상표의 작은 칸만 보고 결정하지 말고 실제 문장과 버튼에 넣어 봅니다.
- 글자 크기 확인하기: 작은 글자는 색 대비가 조금만 부족해도 읽기 어렵습니다. 큰 제목에서 괜찮아 보인 색을 본문에 그대로 쓰지 않는 편이 안전합니다.
- 명도 차이 살피기: 색맹이나 저시력 사용자는 색상 차이만으로 정보를 구분하기 어려울 수 있습니다. 오류 표시를 빨간색 하나로만 나타내지 말고 아이콘이나 문구도 함께 제공합니다.
- 여러 화면에서 시험하기: 같은 값이라도 화면의 밝기, 색온도, 주변 조명에 따라 느낌이 달라집니다. 휴대전화와 큰 모니터에서 모두 확인합니다.
접근성 검사를 할 때는 글자와 배경의 대비 비율을 확인하는 도구를 사용할 수 있습니다. 다만 도구의 통과 표시만 믿기보다 실제 문장 길이, 글자 굵기, 배경 이미지 유무까지 함께 살펴야 합니다.
웹 색상과 인쇄 색상은 왜 다를까
웹 색상은 빛을 더해 색을 만드는 알지비 방식이고, 인쇄 색상은 잉크를 이용해 빛을 흡수하는 방식입니다. 인쇄에서는 보통 시안, 마젠타, 노랑, 검정 잉크를 조합합니다. 화면에서 밝게 빛나던 형광 계열 색이 종이에서는 차분하거나 어둡게 보이는 이유입니다.
| 구분 | 화면용 색 | 인쇄용 색 |
|---|---|---|
| 색을 만드는 방법 | 빛을 더함 | 잉크로 빛을 흡수함 |
| 주요 방식 | 알지비 | 시엠와이케이 |
| 주로 쓰는 곳 | 웹사이트, 앱, 영상 | 명함, 전단지, 책자 |
| 확인 방법 | 기기별 화면 점검 | 용지와 인쇄 조건까지 점검 |
화면용 디자인을 인쇄할 계획이라면 처음부터 인쇄소가 요구하는 파일 방식과 색상 조건을 확인해야 합니다. 같은 헥스 코드를 인쇄 파일에 넣는다고 화면과 같은 결과가 보장되지는 않습니다. 종이 종류, 코팅 여부, 인쇄 기계에 따라서도 차이가 생길 수 있으므로 중요한 작업은 인쇄소의 공식 안내와 교정 인쇄 결과를 함께 확인해야 합니다.
웹페이지에 적용하는 순서
- 기준 색을 정합니다. 로고나 기존 브랜드 자료가 있다면 그 색의 공식 값을 먼저 확인합니다. 눈대중으로 비슷한 색을 새로 만들면 페이지마다 색이 조금씩 달라집니다.
- 역할별로 색을 나눕니다. 기본 글자, 보조 글자, 배경, 주요 버튼, 보조 버튼, 링크 색을 따로 정합니다. 색을 열 개 이상 늘리기보다 명도와 채도를 조절해 체계를 만듭니다.
- 상태별 색을 추가합니다. 버튼은 기본 상태뿐 아니라 마우스를 올린 상태, 눌린 상태, 사용할 수 없는 상태도 확인합니다. 색만 바꾸지 말고 테두리나 모양 변화도 함께 고려합니다.
- 실제 문장으로 검사합니다. 색상표 속 견본보다 긴 문단, 가격, 오류 안내, 입력창처럼 실제 화면과 비슷한 내용으로 확인합니다.
- 접근성과 반응형 화면을 점검합니다. 대비 검사 도구를 사용하고, 작은 화면에서 줄바꿈이 생겼을 때 색 구분이 여전히 분명한지 살핍니다.
- 사용할 값을 기록합니다. 색 이름과 헥스 코드, 사용 위치를 간단한 목록으로 남깁니다. 나중에 여러 사람이 작업해도 임의의 색이 늘어나는 일을 줄일 수 있습니다.
자주 하는 실수와 수정 방법
첫째, 색상표에서 가장 예쁜 색만 고르는 경우입니다. 견본은 주변 색과 글자 크기를 보여 주지 않습니다. 파스텔 노랑은 넓은 배경으로는 부드럽지만 흰 배경 위의 본문 글자로 쓰면 흐릿할 수 있습니다. 이때는 글자를 더 진하게 하거나 배경을 옅게 바꿉니다.
둘째, 헥스 코드의 앞뒤 문자를 헷갈리는 경우입니다. 헥스 코드는 보통 앞 두 자리가 빨강, 가운데 두 자리가 초록, 뒤 두 자리가 파랑을 뜻합니다. #336699처럼 각 쌍을 나누어 보면 색의 방향을 파악하기 쉽습니다. 다만 표기 방식과 투명도 표기는 사용하는 도구의 안내를 확인해야 합니다.
셋째, 빨강과 초록만으로 상태를 구분하는 경우입니다. 색을 잘 구별하기 어려운 사람은 성공과 실패를 같은 색처럼 볼 수 있습니다. 성공에는 확인 표시와 문구를, 오류에는 경고 아이콘과 수정 방법을 함께 넣는 방식이 더 분명합니다.
넷째, 화면 색을 인쇄 결과의 기준으로 삼는 경우입니다. 인쇄가 목적이면 모니터에서 가장 가까워 보이는 색을 고르는 데서 끝내지 말아야 합니다. 파일의 색상 모드, 종이, 인쇄 조건을 확인하고 필요한 경우 교정본을 봅니다.
자주 묻는 질문
헥스 코드와 알지비 값은 서로 다른 색인가요?
같은 색을 다른 방식으로 적은 경우가 많습니다. 예를 들어 헥스 코드의 각 두 자리를 알지비 값으로 바꾸면 같은 색을 확인할 수 있습니다. 다만 투명도나 색상 프로필이 함께 적용되면 보이는 결과가 달라질 수 있습니다.
웹 안전 색상만 사용해야 하나요?
오늘날에는 다양한 화면이 색을 표현하므로 오래된 환경을 위해 정해진 웹 안전 색상만 고집할 필요는 없습니다. 대신 사용하는 서비스의 지원 범위와 접근성, 실제 기기에서의 표현을 확인하는 것이 더 중요합니다.
가장 좋은 웹 색상 조합은 무엇인가요?
모든 사이트에 통하는 하나의 조합은 없습니다. 브랜드 분위기와 정보의 우선순위를 정한 뒤, 본문 가독성, 버튼의 눈에 띄는 정도, 오류와 성공 상태의 구분을 함께 검사해야 합니다.
인쇄 색상을 웹페이지에 그대로 써도 되나요?
인쇄용 색상 값을 화면에 적용할 수는 있지만 같은 모습이 된다고 단정하기 어렵습니다. 웹에서는 화면용 값으로 다시 확인하고, 인쇄 작업에서는 인쇄소가 안내한 파일 조건과 교정 결과를 기준으로 판단하는 것이 안전합니다.