왜 "눈으로 비슷하게"가 아니라 코드로 기록해야 할까요
모니터나 기기마다 색 보정 상태가 달라서, 같은 색이라도 화면마다 조금씩 다르게 보여요. 눈으로만 비교해서 "이 정도 색"으로 고르면 나중에 다른 화면이나 인쇄물에서 색이 달라 보일 수 있어요. 반면 HEX·RGB·HSL 같은 숫자 코드는 어디에 입력해도 항상 똑같은 색을 정확히 재현할 수 있어요. 그래서 브랜드 색, 자주 쓰는 배경색은 꼭 코드로 기록해 두는 게 좋아요.
세 가지 코드 방식 이해하기
- HEX: #FF5A36처럼 16진수 6자리로 표현해요. 웹사이트 CSS, 디자인 도구 대부분에서 가장 널리 쓰여요.
- RGB: 빨강(R)·초록(G)·파랑(B) 빛을 0~255 숫자로 섞는 방식이에요. rgb(255, 90, 54)처럼 적어요.
- HSL: 색상(Hue, 0~360도)·채도(Saturation)·밝기(Lightness)로 표현해요. "이 색에서 밝기만 낮추기" 같은 조정이 직관적이에요.
사진에서 색 뽑는 순서
- 이미지 색상 추출·색상 코드 변환에 사진을 올려요.
- 마우스를 사진 위에 올려 색을 실시간으로 확인하고, 원하는 위치를 눌러 색을 고정·복사해요.
- 사진의 대표 색을 한눈에 보고 싶다면 자동 추출 기능으로 5~8가지 색을 뽑아요.
- 뽑은 HEX 코드를 메모장이나 디자인 파일에 적어 보관해요.
- 다른 코드(RGB, HSL)로도 보고 싶다면 변환기에 HEX를 입력하면 자동으로 바뀌어요.
정확하게 뽑는 요령
사진 안에서도 같은 물체라도 조명이나 그림자 때문에 위치마다 색이 조금씩 달라요. 가장 평평하고 그림자가 없는 부분, 광택이 덜한 부분에서 색을 찍으면 더 "순수한" 색에 가까워요. 로고나 상품의 정확한 브랜드 색이 필요하다면, 가능하면 압축이 적은 PNG 원본에서 뽑는 게 JPG보다 정확해요. JPG는 저장 과정에서 색이 아주 미세하게 바뀔 수 있기 때문이에요.
뽑은 색을 어디에 쓸까요
HEX 코드는 CSS 배경색, 디자인 도구의 색상 입력란에 그대로 붙여 넣을 수 있어요. 비슷한 계열에서 더 밝거나 어두운 색이 필요하면 HSL로 바꿔서 L(밝기) 값만 조정하면 같은 색감을 유지한 채 밝기만 바꿀 수 있어요. 배경·글자 색을 정했다면 색상 추출·변환 도구의 대비 확인 기능으로 두 색의 명암비를 꼭 확인하세요. 색이 예뻐도 밝기 차이가 부족하면 글자가 잘 안 읽혀요.
좋은 예 vs 나쁜 예
- 좋은 예: 브랜드 로고에서 뽑은 메인 색을 HEX로 적어두고 모든 디자인에 똑같이 써요.
- 나쁜 예: 매번 "비슷해 보이는 색"을 손으로 새로 골라서 디자인마다 색이 조금씩 달라요.
- 좋은 예: 글자색을 정할 때 배경과의 명암비를 확인해서 읽기 편한 조합을 선택해요.
- 나쁜 예: 색감만 보고 정해서 막상 완성하면 글자가 배경에 묻혀요.
흔한 실수
- 광택이나 그림자가 있는 부분에서 색을 찍어서 실제 색과 다르게 나와요.
- HEX 앞에 #을 빼고 기록해서 나중에 다른 도구에 붙여 넣을 때 오류가 나요.
- 압축된 JPG에서 뽑은 색을 정확한 브랜드 색으로 착각해요.
중요한 브랜드 색은 한 번만 뽑지 말고, 사진 속 같은 영역 2~3곳에서 찍어 비교한 뒤 대표값을 정하면 더 정확해요.
체크리스트
- 그림자·광택이 적은 평평한 부분에서 색을 뽑았나요?
- HEX 코드를 #까지 포함해서 기록했나요?
- 배경·글자 조합이라면 명암비를 확인했나요?
- 정확도가 중요하면 압축이 적은 원본에서 뽑았나요?
자주 묻는 질문
HEX 코드 앞의 #은 꼭 써야 하나요?
CSS나 대부분의 디자인 도구에서는 #을 포함해서 적어야 정상적으로 인식돼요. #FF5A36처럼 #을 붙인 형태로 기록해두는 걸 추천해요.
사진 압축(JPG) 때문에 색이 조금 달라질 수 있나요?
네. JPG는 압축 과정에서 색이 아주 조금 바뀔 수 있어요. 정확한 브랜드 색이 중요하다면 원본 디자인 파일이나 무손실 형식(PNG)에서 색을 뽑는 게 더 정확해요.
한 사진에서 같은 색인데 다른 코드가 나와요. 왜 그런가요?
사진은 조명, 그림자, 압축 때문에 같은 물체라도 위치마다 픽셀 색이 조금씩 달라요. 눈으로 보기에 같은 색이어도 정확히는 비슷한 색 여러 개인 경우가 많아요. 대표 색 추출 기능을 쓰면 비슷한 색을 하나로 묶어서 보여줘요.
모니터마다 색이 다르게 보이는데 어떡하죠?
맞아요, 모니터의 색 보정 상태에 따라 같은 코드도 조금 다르게 보일 수 있어요. 그래서 눈으로 보는 것보다 코드(숫자)로 기록해 다른 도구에 그대로 입력하는 방법이 훨씬 정확해요.