색 코드 HEX·RGB·HSL 읽는 법과 글자가 잘 보이는 색 대비
디자인 프로그램이나 웹사이트에서 색을 정할 때 '#FF5A1F', 'rgb(255, 90, 31)' 같은 코드가 나와요. 처음엔 암호 같지만 규칙은 단순해요. 코드를 읽을 줄 알면 마음에 드는 색을 정확히 옮기고, 같은 계열의 색을 쉽게 만들 수 있어요.
RGB: 빛의 세 가지 양
화면의 모든 색은 빨강(R)·초록(G)·파랑(B) 빛을 얼마나 섞느냐로 만들어요. 각각 0부터 255까지예요. 셋 다 0이면 검정, 셋 다 255면 흰색, 빨강만 255면 새빨간색이에요.
HEX: RGB를 16진수로 쓴 것
HEX는 RGB 세 숫자를 16진수 두 자리씩 붙여 쓴 거예요. #FF5A1F는 FF(255)·5A(90)·1F(31)이라서 rgb(255, 90, 31)과 같은 색이에요. 코드가 다르게 생겼을 뿐 같은 정보예요. 웹·디자인 도구에서 가장 많이 주고받는 형식이라, 색을 다른 사람에게 알려 줄 때는 HEX를 쓰면 편해요.
HSL: 사람이 생각하는 방식에 가까운 표현
HSL은 색상(H, 0~360도의 색 바퀴), 채도(S, 얼마나 선명한지), 밝기(L, 얼마나 밝은지)로 색을 나타내요. 이 방식의 장점은 색상은 그대로 두고 밝기만 바꿀 수 있다는 거예요. 브랜드 색이 정해져 있을 때 L 값만 올리고 내리면 배경용 연한 색, 강조용 진한 색을 같은 계열로 만들 수 있어요.
글자가 잘 보이는 대비
예쁜 색 조합이 꼭 잘 읽히는 건 아니에요. 웹 접근성 기준(WCAG)에서는 글자색과 배경색의 밝기 대비를 비율로 재요.
- 본문 글자: 4.5:1 이상
- 큰 글자(굵은 제목 등): 3:1 이상
- 검정과 흰색은 21:1로 가장 높아요.
연한 회색 글자, 노란 배경의 흰 글자처럼 밝기가 비슷한 조합은 색이 달라도 대비가 낮아 읽기 어려워요. 썸네일처럼 작게 보이는 그림일수록 대비를 더 높여야 해요.
사진에서 색을 가져올 때
사진 속 색은 빛과 그림자 때문에 한 물체 안에서도 조금씩 달라요. 한 점의 색을 집으면 의도보다 어둡거나 탁한 색이 나올 수 있어요. 사진 전체에서 대표 색 몇 가지를 뽑아 그중에 고르면 사진의 분위기를 더 잘 옮길 수 있어요. 팔레트를 정한 뒤에는 3~5가지 색만 쓰는 게 깔끔해요. 색이 많아질수록 무엇을 강조하는지 흐려져요.
예시: 브랜드 색 하나로 다섯 가지 만들기
브랜드 색이 주황색 #FF5A1F라고 해 봐요. HSL로 바꾸면 색상은 약 16도, 채도는 100%, 밝기는 56% 정도예요. 색상과 채도는 그대로 두고 밝기만 95%, 85%, 56%, 40%, 25%로 바꾸면 아주 연한 배경색부터 진한 글자색까지 같은 계열 다섯 가지가 나와요. 연한 쪽은 카드 배경, 가운데는 버튼, 진한 쪽은 버튼 위 글자나 강조 글자로 쓰면 색이 많아 보이지 않으면서도 단계가 생겨요.
에이치와이 색상 추출은 사진에서 대표 색을 1~20가지로 뽑아 HEX·RGB·HSL 코드를 누르는 대로 복사하고, 사진의 한 점을 집거나 밝기 단계를 만들 수 있어요. CSS 변수나 팔레트 그림으로도 저장해요.