색상 변환기
어떤 CSS 형식의 색상이든 붙여넣으면 다른 모든 형식과 대비를 알려드립니다.
HEX, rgb(), hsl(), hwb() 또는 CSS 색상 이름을 붙여넣거나 색을 고르세요
밝은 색과 어두운 색
값
- HEX
- #3a5bd9
- RGB
- rgb(58, 91, 217)
- HSL
- hsl(227.5, 67.7%, 53.9%)
- HSV / HSB
- hsv(227.5, 73.3%, 85.1%)
- HWB
- hwb(227.5 22.7% 14.9%)
- CMYK
- cmyk(73%, 58%, 0%, 15%)
- 근삿값입니다. 인쇄 색상은 잉크와 용지에 따라 달라지므로 정확한 값은 인쇄소에 문의하세요.
- OKLCH
- oklch(52.35% 0.1965 267.75)
- 가장 가까운 CSS 이름
- royalblue
대비(WCAG)
이 색의 텍스트를 각 배경 위에 놓았을 때입니다. 일반 텍스트는 AA에 4.5:1, AAA에 7:1이 필요하고, 큰 텍스트(18pt 또는 굵은 14pt)는 3:1과 4.5:1이 필요합니다.
흰색 위
큰 텍스트
다람쥐 헌 쳇바퀴에 타고파
5.71:1
- AA 일반 통과
- AAA 일반 미달
- AA 큰 글자 통과
- AAA 큰 글자 통과
검은색 위
큰 텍스트
다람쥐 헌 쳇바퀴에 타고파
3.68:1
- AA 일반 미달
- AAA 일반 미달
- AA 큰 글자 통과
- AAA 큰 글자 미달
#ffffff 위
큰 텍스트
다람쥐 헌 쳇바퀴에 타고파
5.71:1
- AA 일반 통과
- AAA 일반 미달
- AA 큰 글자 통과
- AAA 큰 글자 통과
다음: 배경 투명하게 만들기 · 차트 만들기
색상 코드 변환기 사용 방법
색상 입력
HEX 코드, rgb(), hsl(), hwb() 또는 tomato 같은 이름을 붙여넣거나 색상 선택기로 고르세요.
필요한 형식 복사
입력하는 대로 모든 형식이 바뀝니다. 각 버튼으로 복사하거나, 자주 쓰는 형식을 큰 복사 버튼에 지정하세요.
대비 확인
흰색, 검은색, 원하는 배경에서의 WCAG 대비율을 일반 텍스트와 큰 텍스트의 AA, AAA 결과와 함께 확인하세요.
Utils365를 선택해야 하는 이유
모든 CSS 색상 인식
3, 4, 6, 8자리 HEX, 예전 쉼표 구문과 새 공백 구문의 rgb()와 hsl(), hwb(), 백분율, 색상각 단위, 148개 색상 이름을 모두 읽습니다.
최신 형식까지
디자인 시스템과 넓은 색 영역 CSS용 OKLCH, 색상 선택기용 HWB와 HSV, 반투명 색상용 알파 포함 HEX도 얻을 수 있습니다.
접근성 검사 내장
대비율은 WCAG 2를 정확히 따르며 통과 쪽으로 반올림하지 않으므로, 4.49:1이 4.5:1로 통과되는 일은 없습니다.
밝은 색과 어두운 색
견본 아래에 더 밝은 5단계와 더 어두운 5단계가 있습니다. 하나를 클릭하면 현재 색상이 됩니다.
자주 묻는 질문
HEX와 RGB는 무엇이 다른가요?
색 자체는 같습니다. 둘 다 빨강, 초록, 파랑을 0부터 255까지로 나타냅니다. HEX는 각각을 16진수 두 자리로 써서 rgb(58, 91, 217)은 #3a5bd9가 됩니다. HEX는 더 짧고, rgb()는 읽고 손으로 조정하기 쉽습니다.
HSL이란 무엇인가요?
색상(Hue), 채도(Saturation), 명도(Lightness)입니다. 색상은 색상환에서의 위치를 각도로 나타내고(0은 빨강, 120은 초록, 240은 파랑), 채도는 선명한 정도, 명도는 0%의 검정부터 100%의 흰색까지입니다. 색을 더 밝게, 어둡게, 차분하게 바꾼 버전을 쉽게 쓸 수 있습니다.
CMYK가 인쇄된 색과 다른 이유는?
화면은 빛을, 프린터는 잉크를 섞으며, 결과는 잉크, 용지, 프린터 프로필에 따라 달라집니다. 표시되는 CMYK는 간단한 표준 공식을 쓰므로 출발점으로 삼고 정확한 값은 인쇄소에 문의하세요.
WCAG 대비율이란 무엇인가요?
두 색의 밝기 차이를 나타내는 값으로, 1:1(같은 색)부터 21:1(흰 바탕에 검정)까지입니다. WCAG AA는 일반 텍스트에 4.5:1 이상, 큰 텍스트에 3:1 이상을, AAA는 7:1과 4.5:1을 요구합니다.
OKLCH란 무엇인가요?
사람이 색을 보는 방식을 바탕으로 명도, 채도(크로마), 색상으로 색을 쓰는 새로운 CSS 방식입니다. 명도를 바꿔도 색상이 같아 보이기 때문에 디자인 시스템과 색상 스케일에서 많이 쓰입니다.
색상 이름은 어떻게 정해지나요?
148개 CSS 색상 이름 중 하나와 정확히 일치하면 그 이름을 보여줍니다. 그렇지 않으면 눈으로 보기에 가장 비슷한 이름을 보여주므로 색을 말로 설명할 때 편리합니다.