색상 코드 변환기

색상코드변환 사용 방법

1. 위쪽 색상 선택기를 눌러 색을 직접 고르거나, 이미 알고 있는 코드가 있다면 아래의 HEX, RGB, HSL 칸 중 하나에 값을 적습니다.
2. 한 칸에 올바른 값을 넣으면 나머지 다섯 칸이 같은 색의 다른 표기로 즉시 바뀝니다. HEX는 샾 기호 없이 여섯 자리로, RGB는 52, 152, 219 처럼 쉼표로 구분해 적습니다.
3. 각 칸 오른쪽의 복사 버튼으로 그 값 하나만 가져가거나, 아래의 모든 형식 복사 버튼으로 여섯 가지를 한꺼번에 복사합니다.
4. 색상 분석에서 밝기와 채도, 대비 예시를 확인합니다. 텍스트 예시 칸은 그 색을 배경으로 썼을 때 검은 글자와 흰 글자 중 어느 쪽이 나은지 보여 줍니다.
5. 아래 추천 색상 팔레트의 색 조각을 클릭하면 그 색으로 바뀌면서 여섯 칸이 다시 계산됩니다. 랜덤 색상 버튼으로 임의의 색을 띄워 볼 수도 있습니다.

지원 형식과 입력 조건

표시 형식

HEX, RGB, HSL, HSV, CMYK, CSS (rgb 표기) 여섯 가지

입력 가능 칸

HEX, RGB, HSL 세 칸. 나머지 세 칸은 결과 표시용입니다

HEX 입력 형식

여섯 자리(예: 3498db). 세 자리 축약형(#abc)은 인식하지 않습니다

처음 값

#3498db (초기화 버튼을 누르면 이 색으로 돌아갑니다)

추천 배색

유사 색상, 보색, 삼각 배색 각 5색

처리 위치

브라우저 내부. 서버로 전송되는 값이 없습니다

여섯 가지 표기법이 각각 쓰이는 곳

• HEX — 웹에서 가장 널리 쓰이는 표기로 빨강, 초록, 파랑을 각각 두 자리 16진수로 적습니다. CSS와 디자인 도구 대부분이 이 형태를 받습니다.
• RGB — 빨강, 초록, 파랑의 세기를 0에서 255 사이 숫자로 적습니다. HEX와 같은 값을 사람이 읽기 쉽게 풀어 쓴 형태입니다.
• HSL — 색조, 채도, 명도로 나눠 적습니다. 같은 색 계열에서 조금 더 밝거나 흐린 색을 만들 때 숫자 하나만 바꾸면 되어 편리합니다.
• HSV — HSL과 비슷하지만 마지막 값이 명도가 아니라 명채도입니다. 포토샵 같은 그래픽 프로그램의 색 선택 창이 이 방식을 씁니다.
• CMYK — 인쇄용 표기입니다. 다만 여기 나오는 값은 화면 색을 수식으로 환산한 참고치이므로, 실제 인쇄 결과와는 종이와 잉크에 따라 차이가 납니다. 정확한 인쇄 색이 필요하면 인쇄소에서 쓰는 색상 프로파일로 다시 변환해야 합니다.
• CSS — 스타일시트에 그대로 붙여 넣을 수 있는 rgb(52, 152, 219) 형태로 보여 줍니다.

색상 분석 값을 읽는 법

• 밝기는 사람 눈이 초록을 가장 밝게, 파랑을 가장 어둡게 느끼는 특성을 반영해 계산한 값입니다. 그래서 순수한 노랑은 밝기가 높게, 순수한 파랑은 낮게 나옵니다.
• 이 밝기가 50%를 넘으면 텍스트 예시가 검은 글자로, 넘지 않으면 흰 글자로 바뀝니다. 그 색을 배경으로 쓸 때 어느 쪽 글자색이 나은지 판단하는 기준이 됩니다.
• 아래의 등급은 밝기 70% 초과면 매우 밝음, 50% 초과면 밝음, 30% 초과면 보통, 그 아래는 어두움으로 표시됩니다.
• 채도는 색이 얼마나 선명한지를 나타냅니다. 0%에 가까우면 회색에 가깝고 100%에 가까울수록 원색에 가깝습니다.

추천 색상 팔레트가 만들어지는 방식

• 유사 색상은 지금 색의 색조를 기준으로 좌우 15도와 30도씩 돌린 색들입니다. 서로 비슷해 차분하게 어울립니다.
• 보색은 색조를 180도 돌린 정반대 색으로, 강조 색을 고를 때 씁니다.
• 삼각 배색은 색상환을 삼등분한 120도와 240도 위치의 색입니다.
• 세 팔레트 모두 색조만 지금 색에서 가져오고 채도와 명도는 정해진 값으로 그립니다. 그래서 아주 연하거나 아주 어두운 색을 넣어도 팔레트 조각은 비슷한 선명도로 나옵니다. 지금 색의 밝기까지 반영한 조합이 필요하면 색상팔레트생성을 쓰세요.

자주 묻는 질문

색상·디자인 분류의 다른 도구

• 색상팔레트생성 기준 색 하나로 어울리는 색 조합을 뽑아 줍니다