색상 변환기

HEX, RGB 및 HSL 형식

색상 선택

또는 아래 값 입력

HEX

RGB

HSL

이해 색상 형식

디지털 색상은 다양한 형식으로 표현될 수 있으며 각각 다른 장점이 있습니다. 이 도구 가장 일반적인 세 가지 웹 색상 형식인 HEX, RGB 및 HSL 간에 원활하게 변환됩니다. 모두 처리는 브라우저에서 이루어지며 색상 선택은 추적되거나 저장되지 않습니다.

#️⃣ HEX(16진수)

형식: #RRGGBB (6 문자) 또는 #RGB (3자 약어)
예: #2563EB 또는 #F00 (빨간색)
적합한 용도: CSS, HTML 속성, 디자인 도구. 가장 컴팩트한 형식 웹 개발.

🔴🟢🔵 RGB(빨간색, 녹색, 파란색)

형식: rgb(R, G, B) 각 값은 0-255입니다.
예: rgb(37, 99, 235)
적합한 용도: CSS 함수, JavaScript 색상 조작, 프로그래밍 방식 컬러세대. 가벼운 혼합으로 이해하기 쉽습니다.

🌈 HSL (색조, 채도, 밝기)

형식: hsl(H, S%, L%) 여기서 H는 0-360°, S와 L은 0-100%입니다.
예: hsl(221, 83%, 53%)
적합한 용도: 색 구성표 만들기, 밝기/채도 조정. 대부분 인간의 지각에는 직관적이다.

일반적인 사용 사례

CSS 스타일링: 형식 간 변환 다양한 CSS 속성 및 브라우저 호환성을 위해
디자인 전달: 코드 친화적인 형식의 디자인 도구(종종 HEX)
색 구성표: HSL을 사용하여 생성 변형(호버 상태의 밝기 조정)
접근성: 대비 계산 RGB 값을 사용한 비율
브랜드 지침: 문서 색상 다양한 사용 사례에 대한 다양한 형식

색상 이론 빠른 팁

만들기 호버 상태

HSL 사용: 더 어두운 호버 효과의 경우 밝기를 10-15% 줄이거나 더 밝은 경우 증가합니다. 것들. RGB 변경 사항을 계산하는 것보다 훨씬 쉽습니다.

보장 대비

WCAG AA 규정을 준수하려면 텍스트에 4.5:1의 대비 비율이 필요합니다. HSL 밝기 차이 40% 이상이 일반적으로 이 요구 사항을 충족합니다.

자주 묻는 질문

어떤 형식을 사용해야 합니까? CSS에서?

세 가지 모두 최신 브라우저에서 작동합니다. HEX는 가장 일반적이고 컴팩트합니다. 필요할 때 RGB/HSL을 사용하세요 투명성(rgba() 또는 hsla()) 또는 동적 색상 조작.

HEX의 #은 무엇을 의미합니까? 무슨 뜻인가요?

# 기호는 16진수 색상 값을 나타냅니다. CSS에서는 필수이지만 CSS에서는 선택사항인 경우가 많습니다. 디자인 도구. 다음 6개 문자는 16진수(00-FF =)의 빨간색, 녹색, 파란색을 나타냅니다. 0-255).

HSL Hue는 어떻게 작동하나요?

색조는 색상환의 각도입니다. 0° = 빨간색, 60° = 노란색, 120° = 녹색, 180° = 청록색, 240° = 파란색, 300° = 마젠타색, 360° = 빨간색으로 돌아갑니다. 보색(180°)을 선택하게 해줍니다. 별개로) 직관적입니다.

투명도를 추가할 수 있나요?

네! A가 0-1인 경우 rgba(R, G, B, A) 또는 hsla(H, S%, L%, A) 을 사용합니다. 최신 CSS는 8자 HEX도 지원합니다. #RRGGBBAA.

CSS 색상 참조

                            /* HEX */

                            color: #2563EB;

                            /* RGB */

                            color: rgb(37, 99, 235);

                            /* HSL */

                            color: hsl(221, 83%, 53%);

                            /* With transparency */

                            color: rgba(37, 99, 235, 0.5);

                            color: hsla(221, 83%, 53%, 0.5);