색상 코드 변환기

세 가지 표기법

• HEX #2f6fed — 웹·CSS에서 가장 흔한 표기. 빨강·초록·파랑을 각각 00~ff로.
• RGB rgb(47, 111, 237) — 각 채널 0~255. 포토샵·디자인 툴 값과 바로 대응.
• HSL hsl(221, 84%, 56%) — 색상(0~360°)·채도·명도. "같은 색을 조금 더 밝게"처럼 조정할 때 직관적입니다.

대비(Contrast) 수치

이 색을 배경으로 흰 글씨를 올렸을 때의 명도 대비입니다. 웹 접근성 기준(WCAG)은 본문 4.5:1 이상, 큰 글씨(18pt 이상) 3:1 이상을 요구합니다. 미달이면 어두운 글씨를 쓰거나 배경을 더 진하게 하세요.

HEX 3자리 축약형

#f00 은 #ff0000 과 같은 색입니다. 각 자리를 두 번 반복한 것으로, 여섯 자리가 모두 같은 글자 쌍일 때만 줄여 쓸 수 있습니다. #2f6fed 처럼 쌍이 맞지 않으면 축약할 수 없습니다.

투명도(알파) 표기

CSS에서는 세 가지 방법으로 투명도를 줍니다.

• rgba(47, 111, 237, 0.5) — 마지막 값이 0(완전 투명)~1(불투명)
• #2f6fed80 — HEX 뒤 두 자리가 알파. 80 은 약 50%, ff 는 불투명
• hsl(221 84% 56% / 50%) — 최신 CSS 표기

HSL로 색을 다루면 쉬워집니다

"이 파란색을 조금 더 밝게"를 HEX로 하려면 세 채널을 모두 손봐야 하지만, HSL은 세 번째 값(명도)만 올리면 됩니다. 실무에서 팔레트를 만들 때 자주 쓰는 방법입니다.

• 보색 — 색상(H)에 180을 더합니다. 221° 의 보색은 41° (주황)
• 유사색 — H를 ±30° 안에서 움직입니다. 조화로운 배색이 나옵니다
• 밝은/어두운 변형 — S는 두고 L만 조절하면 같은 계열이 유지됩니다

대비 4.5:1 을 왜 지켜야 하나

웹 접근성 지침(WCAG AA)이 요구하는 최소 기준입니다. 이 수치를 넘기면 저시력자나 밝은 야외에서도 글씨가 읽힙니다. 회색 배경에 연회색 글씨 같은 조합은 대비가 2:1 근처라 기준 미달입니다.

본문은 4.5:1, 18pt(또는 굵은 14pt) 이상의 큰 글씨는 3:1, 더 엄격한 AAA 등급은 본문 7:1을 요구합니다. 버튼·아이콘 같은 UI 요소도 3:1 이상이 권장됩니다.

색맹을 고려한 배색

남성 약 8%가 적록색약입니다. 빨강과 초록만으로 상태를 구분하면 이들에게는 같은 색으로 보입니다. 색 외에 아이콘·굵기·밑줄 같은 두 번째 단서를 함께 주는 것이 원칙입니다. 명도 차이를 크게 두면 색약 여부와 무관하게 구분됩니다.