색상 코드 변환

HEX, RGB, HSL, HSV, CMYK, OKLCH, CSS 색 이름 가운데 한 칸에 색을 넣으면 나머지 형식으로 바로 바꿔 줍니다. 디자인 시안의 색을 CSS로 옮기거나 글자와 배경의 대비가 충분한지 확인할 때 씁니다.

사용 방법

1. '색 고르기'로 색을 고르거나 HEX, RGB 같은 칸 하나에 값을 넣습니다. 다른 칸이 함께 바뀌고, 각 칸 옆 버튼으로 복사합니다.
2. '불투명도'로 투명도를 정하면 HEX는 8자리, RGB는 rgba로 나옵니다.
3. '밝게·어둡게'와 '색 조화'의 견본을 누르면 그 색으로 바뀝니다.
4. '대비 검사'에서 '글자색'과 '배경색'을 정하고 '대비율'과 AA, AAA 통과 여부를 확인합니다.

계산 방식과 참고

• HEX는 빨강·초록·파랑 값(0~255)을 각각 16진수 두 자리로 쓴 것입니다. 예를 들어 rgb(255, 99, 71)은 #FF6347입니다.
• 대비율 = (밝은 색의 상대 휘도 + 0.05) ÷ (어두운 색의 상대 휘도 + 0.05)이며 WCAG 2.2 기준 1.4.3과 1.4.6으로 판정합니다. 대비율은 내림해서 보여 줍니다.
• CMYK는 인쇄 프로파일 없이 단순 공식으로 바꾼 값이라 실제 인쇄 색과 다릅니다. 최근 색과 마지막 색은 이 기기에 저장됩니다.

자주 묻는 질문

HEX를 RGB로 바꾸려면?

두 자리씩 끊어 16진수를 10진수로 바꿉니다. #3B82F6은 3B = 59, 82 = 130, F6 = 246이라 rgb(59, 130, 246)입니다. HEX 칸에 넣으면 바로 나옵니다.

글자 대비율은 얼마 이상이어야 하나요?

WCAG AA는 일반 글자 4.5:1, 큰 글자 3:1 이상이고, AAA는 일반 글자 7:1, 큰 글자 4.5:1 이상입니다. 큰 글자는 24px 이상 또는 굵은 18.66px 이상입니다.

3자리 HEX는 무엇인가요?

각 자리를 두 번 쓴 6자리의 줄임말입니다. #F80은 #FF8800과 같은 색입니다.

색 이름도 알 수 있나요?

148개 CSS 색 이름과 정확히 같으면 그 이름이, 아니면 가장 가까운 CSS 이름과 HEX 값이 나옵니다.