색상 코드 변환기
웹 개발에서 색상은 여러 형식으로 지정할 수 있습니다: hex, RGB, HSL, 이름 색상. 이 도구는 모든 형식 간 변환, 시각적 미리보기 표시, 접근성을 위한 대비율 계산, 보색 팔레트 생성을 수행합니다.
사양
주요 사용 사례
- 디자이너가 제공한 hex 색상을 조작이 쉬운 HSL로 변환
- 텍스트 색상이 WCAG 접근성 기준을 충족하는지 확인
- UI 디자인을 위한 색상 팔레트 생성
- 예상대로 렌더링되지 않는 CSS 색상 값 디버깅
- CSS 이름 색상의 hex 값 찾기
기능
- hex (#RGB, #RRGGBB, #RRGGBBAA), RGB, RGBA, HSL, HSLA, 이름 색상 파싱
- 모든 색상 형식 간 즉시 변환
- HEX8 출력 (알파를 포함한 8자리 hex)
- 어두운/밝은 배경 전환이 가능한 시각적 색상 미리보기
- 흰색 및 검은색 배경에서의 샘플 텍스트 미리보기
- 검정 및 흰색 대비 WCAG 대비율 계산
- 밝은/어두운 색상 분류
- 보색, 유사색, 삼색, 사색, 단색 팔레트 생성
- 휘도 및 접근성 권장 사항 표시
예제
팁
- HSL이 작업하기 더 쉬운 경우가 많습니다: H는 색조, S는 채도, L은 밝기입니다.
- 접근성 있는 텍스트를 위해 최소 4.5:1 대비율(WCAG AA)을 목표로 하세요.
- 8자리 hex 형식(#RRGGBBAA)은 알파 투명도를 포함합니다.
- CSS4는 더 나은 지각적 균일성을 위해 oklch() 같은 새로운 색상 공간을 도입합니다.
이해하기 색상 코드 변환기
CSS 색상 값은 여러 표기법 시스템을 사용하여 웹 스타일링을 위한 색상을 정의합니다. 가장 일반적인 것은 16진수(#RRGGBB)로, 각 hex 숫자 쌍이 00(0)에서 FF(255)까지의 빨강, 초록, 파랑 채널을 나타냅니다. 단축형 #RGB는 각 자릿수를 두 배로 합니다(#F00은 #FF0000과 동일). 8자리 형식 #RRGGBBAA는 알파 투명도 채널을 추가합니다.
함수 표기법은 더 직관적인 색상 지정을 제공합니다. RGB(rgb(255, 0, 0))는 채널을 0-255 정수 또는 백분율로 지정합니다. HSL(hsl(0, 100%, 50%))은 색조(0-360도 색상환), 채도(0-100%), 밝기(0-100%)를 사용하며, 많은 디자이너가 색상 팔레트를 만들고 색상을 조정하는 데 더 직관적이라고 느낍니다. RGB와 HSL 모두 rgba()와 hsla() 또는 최신 구문 rgb(255 0 0 / 50%)로 알파 투명도를 지원합니다.
색상 접근성은 웹 개발에서 중요한 관심사입니다. WCAG 2.1은 최소 대비율을 정의합니다: 일반 텍스트는 4.5:1(Level AA), 큰 텍스트는 3:1, 향상된 대비는 7:1(Level AAA). 불충분한 대비는 저시력이나 색각 이상이 있는 사용자에게 텍스트를 읽기 어렵거나 불가능하게 만듭니다.
CSS는 또한 148개의 이름 색상(rebeccapurple, cornflowerblue, tomato 등), currentColor 키워드, HWB(색조-백색도-흑색도), LAB, LCH, OKLCH 같은 지각적으로 균일한 색상 조작을 제공하는 새로운 색상 공간을 지원합니다. 새로운 공간은 특히 조화로운 색상 팔레트와 부드러운 그라데이션을 생성하는 데 유용합니다.
Hex(#FF0000)와 RGB(rgb(255,0,0))는 모두 빨강, 초록, 파랑 채널 값을 지정합니다. hex는 16진수를 사용하고 RGB는 10진수 정수를 사용합니다. HSL(hsl(0,100%,50%))은 색조(0-360도 색상환에서의 색상 자체), 채도(강도), 밝기를 사용하여 색상을 표현하며, 많은 개발자가 변형을 만드는 데 더 직관적이라고 느낍니다. 세 형식 모두 같은 색상을 표현할 수 있지만, HSL은 단일 값을 조정하여 더 밝거나, 더 어둡거나, 더 부드러운 변형을 만드는 것이 간단합니다.
알파 채널은 0(완전 투명)에서 1(완전 불투명)까지의 투명도를 제어합니다. hex 표기법에서 알파는 두 자릿수가 추가됩니다. #FF000080은 50% 투명 빨강을 나타냅니다(80 hex = 128 십진수). 함수 표기법에서 구문은 rgba(255,0,0,0.5) 또는 최신 형식 rgb(255 0 0 / 50%)입니다. 알파 투명도는 오버레이, 워터마크, 레이어드 UI 요소에 필수적입니다. WCAG 준수를 위해, Level AA는 일반 텍스트에 최소 4.5:1, 큰 텍스트(18px+ 굵게 또는 24px+ 일반)에 3:1의 대비율을 요구하고, Level AAA는 일반 텍스트에 7:1, 큰 텍스트에 4.5:1을 요구합니다. 아이콘, 테두리, 폼 컨트롤 같은 비텍스트 요소는 인접한 색상에 대해 최소 3:1 대비가 필요합니다.
LAB과 OKLCH는 지각적으로 균일한 색상 공간으로, 동일한 수치 변화가 시각적으로 동일한 색상 차이를 생성하여 팔레트와 부드러운 그라데이션 생성에 우수합니다. OKLCH(밝기, 채도, 색조)는 밝기를 조정하면 자연스럽고 예측 가능한 결과를 생성하기 때문에 CSS에서 특히 유용합니다. 둘 다 oklch() 및 lab() 함수로 최신 CSS에서 지원됩니다.