색 코드 하나 확인하려고 무거운 툴 켜지 마세요
HEX · RGB · HSL
| HEX | #C8FF3E — 웹·CSS·디자인 툴 공통. 3자리(#ff0)는 6자리의 축약 |
|---|---|
| RGB | rgb(200, 255, 62) — 빨강·초록·파랑 0~255. 코드로 색을 계산할 때 |
| HSL | hsl(79, 100%, 62%) — 색상·채도·명도. "조금 더 밝게", "톤 맞추기"는 이걸로 조절하는 게 편해요 |
HEX 칸에 어떤 형식을 붙여 넣어도 나머지 두 형식으로 바로 바뀌고, 값 옆 복사 버튼으로 CSS나 디자인 툴에 그대로 붙일 수 있어요. 3자리 HEX는 자릿수를 두 번씩 늘려(#ff0 → #FFFF00) 6자리로 만들고, RGB↔HSL은 표준 변환식으로 계산해 화면에는 정수로 반올림해 보여줘요.
사용법
- 색 고르기 — 큼직한 색 칩을 누르면 기기의 색 선택기가 열리고, HEX 칸에는
#ff0·rgb(255,0,0)·hsl(200,50%,50%)어느 형식이든 붙여 넣을 수 있어요. 아래 H(0~360)·S(0~100)·L(0~100) 슬라이더로 미세 조정합니다. 고른 색은 최근 색 줄에 12개까지 남아 다시 누르면 불러와져요. - 사진에서 — 사진을 고르면 대표색 8개가 HEX 값과 함께 칩으로 나열돼요. 칩을 누르면 그 색이 현재 색이 되면서 복사되고, 사진 위를 직접 탭하면 그 지점 픽셀 색을 정확히 찍어요(스포이드).
- 배색 — 현재 색을 기준으로 여섯 가지 배색이 자동으로 만들어져요. 칩을 누르면 HEX가 복사됩니다.
- 대비 체크 — 글자색과 배경색을 넣으면 그 조합으로 그린 미리보기(큰 글자와 14px 작은 글자), 대비 비율, 세 가지 기준의 통과 여부가 나와요. 색 바꾸기로 둘을 맞바꿔 비교할 수 있어요.
배색 여섯 가지는 어떻게 만드나
모두 현재 색의 색상(H)을 색상환 위에서 돌려 만들고, 채도와 명도는 그대로 둬요.
| 보색 | 기준색 + 180° 반대편 색. 강조 버튼·포인트 색에 |
|---|---|
| 유사색 | −30° · 기준 · +30° 세 색. 차분하고 통일감 있는 조합 |
| 3색 조화 | 120° 간격 세 색. 선명하지만 균형 잡힌 조합 |
| 분할 보색 | 기준 · +150° · +210°. 보색보다 부드러운 대비 |
| 4색 | 90° 간격 네 색. 카테고리별로 색을 구분해야 할 때 |
| 명도 단계 | 색상·채도는 유지하고 명도만 90 · 75 · 60 · 45 · 30 · 20 · 10% 일곱 단계. 버튼 호버색, 배경 톤, 그라데이션에 |
명도 대비는 왜 보나
웹 접근성 기준(WCAG)에서 본문 글자는 배경과 4.5:1 이상, 큰 글자·버튼은 3:1 이상 대비여야 읽기 편하다고 봐요. 예쁜 파스텔 배경에 흰 글씨가 안 읽히는 이유가 이겁니다. 대비 체크 탭에 글자색·배경색을 넣으면 비율과 통과 여부를 바로 알려줘요.
대비 비율은 이렇게 계산해요
WCAG 2의 상대 휘도 공식을 그대로 써요. 각 채널 값을 0~1로 만든 뒤 sRGB 감마를 풀고(0.03928 이하는 12.92로 나누고, 그 위는 ((v+0.055)/1.055)의 2.4제곱), 빨강 0.2126 · 초록 0.7152 · 파랑 0.0722 가중치로 합쳐 휘도를 구합니다. 두 색의 휘도에 각각 0.05를 더해 밝은 쪽을 어두운 쪽으로 나눈 값이 대비 비율이고, 1:1(같은 색)부터 21:1(검정과 흰색)까지 나와요. 판정은 본문 AA 4.5:1, 큰 글자·UI AA 3:1, 본문 AAA 7:1 세 줄로 표시돼요. WCAG에서 큰 글자는 18pt(약 24px) 이상 또는 굵은 14pt(약 18.7px) 이상을 뜻해요.
사진에서 색을 뽑는 방식
사진은 긴 쪽 900px 이내로 줄여 읽고, 네 픽셀마다 하나씩 표본을 뽑아 R·G·B를 각각 16단계로 묶은 칸에 넣어 빈도를 세요(반투명 픽셀은 제외). 빈도 상위 칸들의 평균색을 구한 뒤, 이미 뽑힌 색과 RGB 거리가 40 이내인 비슷한 색은 건너뛰어 서로 구별되는 8색만 남겨요. 그래서 하늘 사진에서 파랑만 여덟 개 나오는 대신 파랑·구름 흰색·땅 색이 골고루 나옵니다.
자주 묻는 질문
rgba나 hsla 값을 넣으면 투명도는요
숫자 세 개만 읽고 알파 값은 무시해요. 반투명 색이 배경 위에서 실제로 어떻게 보이는지는 대비 체크로 판단할 수 없으니, 합성된 결과색을 따로 확인하세요.
최근 색은 어디에 저장되나요
이 브라우저의 저장 공간에만 남고 서버로 가지 않아요. 브라우저 데이터를 지우거나 다른 기기에서 열면 비어 있어요.
대비는 통과인데 왜 읽기 힘들까요
대비 비율은 밝기 차이만 재요. 색상만 다르고 밝기가 비슷한 조합(예: 빨강 글자에 초록 배경)은 비율이 낮게 나오지만, 반대로 비율이 높아도 글자가 너무 가늘거나 작으면 읽기 힘들 수 있어요. 미리보기의 14px 문장을 실제 기기에서 눈으로 확인하는 이유예요.
CMYK나 Pantone 값도 되나요
안 돼요. 화면용 색 체계인 HEX·RGB·HSL 세 가지만 다뤄요.
함께 쓰면 좋은 앱
- 퍼스널 컬러 진단 — 내 피부·머리색과 어울리는 색 계열을 먼저 찾기.
- 픽셀아트 · 도트 변환기 — 색 수를 줄인 팔레트로 사진을 도트 그림으로.
- QR코드 생성기 — 브랜드 색으로 QR을 만들 때 전경·배경 대비를 먼저 체크.
- 다른 색 찾기 — 미묘한 색 차이를 얼마나 구별하는지 테스트.