색상 코드 변환

색상 코드, 같은 색을 다섯 가지로 적는 법

언제 쓰나요

같은 초록색이라도 디자인 프로그램은 #2F6B3F, 파워포인트의 사용자 지정 색 창은 빨강·초록·파랑 숫자, CSS 작업자는 hsl 값을 원하곤 해요. 협력 업체에서 받은 브랜드 가이드의 색을 내 문서에 옮기거나, 홈페이지 버튼 색이 글자를 읽기에 충분히 진한지 확인하거나, 기준 색 하나로 진하고 연한 변형 색을 몇 개 뽑아야 할 때 이 도구를 열어요.

사용 방법

1단계색 넣기

1. 1① 색 고르기 상자를 누르면 브라우저 색상 선택 창이 열려요. 고르는 동안 아래 표가 계속 따라 바뀌어요.
2. 2② 이미 아는 코드가 있으면 여기에 붙여 넣어요. 앞의 #을 빼고 2f6b3f만 적거나, 47 107 63처럼 숫자 세 개만 적어도 RGB로 알아봐요.

2단계코드 복사하기

1. 3③ 줄마다 ‘복사’ 버튼이 있어요. 맨 아래 CSS 변수 줄은 --color-main: 형태로 바로 붙여 쓸 수 있게 만들어 줘요.

3단계대비와 단계 색 보기

1. 4④ 기본 색 #2F6B3F는 흰 글자와 6.37:1로 AA를 통과하고, 검은 글자와는 3.30:1이라 큰 글자에만 써야 한다고 나와요.
2. 5⑤ 단계 색을 누르면 그 코드가 바로 복사돼요.

계산 기준

화면 색은 빛의 세 가지 색을 0~255로 섞은 RGB가 기본이고, 나머지는 모두 여기서 계산해 낸 값이에요. HSL은 RGB의 가장 큰 값과 가장 작은 값으로 색상각과 채도를 구하고, 둘의 평균을 밝기(L)로 써요. CMYK는 가장 밝은 채널로 검정(K)을 먼저 정한 뒤 나머지를 비율로 나누는 단순 공식이에요.

대비 검사는 각 채널을 사람 눈 감도에 맞춰 보정한 상대 휘도를 구해서 (밝은 쪽+0.05)÷(어두운 쪽+0.05)로 나눠요. 초록 채널 가중치가 0.7152로 가장 커서, 같은 숫자라도 초록이 많은 색일수록 밝게 계산돼요.

CMYK로 적힌 값을 넣을 때는 반대 방향으로 R = 255 × (1 − C) × (1 − K)처럼 계산해요. 예를 들어 cmyk(0%, 50%, 100%, 0%)를 넣으면 rgb(255, 128, 0), 즉 #FF8000이 돼요.

도움말인쇄물 색을 맞출 때는 CMYK 줄을 출발점으로만 쓰고, 인쇄소에서 시험 인쇄를 한 번 받아 보는 편이 안전해요.

주의할 점

• 단계 색은 HSL 밝기만 바꾼 값 — 90%부터 10%까지 10%씩 내려가요.
• HSL 숫자는 반올림 값 — 기본 색의 밝기는 30%로 나오지만, 단계 색의 30% 칸은 #2F6A3F로 초록이 1 낮아요. 반올림한 HSL로 되돌려 계산했기 때문이라, 원본은 HEX로 보관하세요.
• 세 자리 HEX — #2F3은 #22FF33으로 늘려 읽어요. #2F3F처럼 네 자리나 여덟 자리 HEX는 이 입력 칸의 직접 해석 대상이 아니라 브라우저 해석에 맡겨지고, 그 경우 투명도는 버려져요.

더 궁금한 점