색상 선택 개요

글꼴, 배경, 테두리 또는 기타 요소에 대한 음영을 선택하는 것은 웹 사이트를 만들 때 일상적인 작업입니다. 색상 선택기를 활용하여 음영을 선택하고 투명도를 조정하세요. 또한 사이트에서 색상 변수를 정의하고 색상 선택기를 활용하여 선택할 수 있습니다.

색상을 선택하고 투명도를 조정하세요

다음 방법 중 하나를 사용하여 색조를 선택할 수 있습니다.

• 색상 선택 도구 활용
• 색상 스펙트럼 및 컨트롤 활용
• 해당 입력 필드에 값 입력

색상 선택기에서 사이트의 텍스트 명암비를 직접 검토할 수 있습니다. 이는 텍스트의 명암비뿐만 아니라 해당 명암비에 해당하는 WCAG 수준 등급도 표시합니다.

명암비는 사이트의 접근성에 영향을 미칩니다. 충분한 명암비는 전경(텍스트)과 배경색(텍스트 뒤의 배경), 글꼴 크기 및 글꼴 두께의 영향을 받습니다.

"를 전환할 수도 있습니다.눈' 아이콘을 클릭하면 WCAG에서 AA, AAA 및 실패 등급 간의 전환을 볼 수 있습니다.

색상 선택 도구 활용

캔버스 또는 현재 브라우저 창 외부의 요소에서 색상을 선택하려면 색상 선택 도구를 활용하세요. 스페이스바를 눌러 대상 색상의 RGB 숫자를 표시하거나 숨길 수 있습니다. 

참고: 색상 선택 도구에 액세스하려면 Chrome 또는 Edge를 브라우저(예: Chromium 기반 브라우저)로 사용해야 합니다. Webflow가 지원하는 브라우저 목록을 살펴보세요..

색상 스펙트럼 및 컨트롤 활용

스펙트럼에서 색상을 선택하려면 색조 슬라이더 색상을 선택한 다음 컬러 평면 적합한 그늘을 선택합니다. 색상의 투명도를 낮추고 싶다면 투명도 슬라이더.

컬러 평면

색상 평면을 사용하면 사용하려는 색조의 음영을 선택할 수 있습니다. 색상의 채도를 변경하려면 x축을 따라 선택기를 이동하고 밝기를 수정하려면 y축을 따라 이동할 수 있습니다. 색조를 변경하려면 색조 슬라이더 아래에.

색조 슬라이더

색조 슬라이더를 사용하면 색조 스펙트럼에서 사용하려는 색조의 색조를 선택할 수 있습니다. 그런 다음 다음을 활용하여 적절한 색상을 선택할 수 있습니다. 컬러 평면 위에.

투명도 슬라이더

투명도 슬라이더를 사용하면 색상의 투명도 수준을 지정할 수 있습니다. 100%는 색조를 완전히 불투명하게 만들고, 그보다 낮은 값은 색조를 투명하게 만듭니다. 이는 이미지에 색조 오버레이를 추가하거나 투명한 배경을 설정할 때 유용합니다.

해당 입력 필드에 값 입력

색상을 더 정확하게 선택하려면 웹 색상 이름, Hex 코드, HSB/HSBA 값 또는 RGB/RGBA 값을 활용할 수 있습니다. 스타일 패널이나 HEX 입력 필드 색상 선택기에서 또는 코드를 분해하여 지정된 필드에 각 값을 입력할 수 있습니다.

• 16진수 값 HEX 필드
• HSBA 값은 다음과 같습니다. HSB 및 A 필드
• RGBA 값은 분리되어 있습니다. RGB 및 A 필드

레이블을 클릭하면 HSB와 RGB 간에 전환할 수 있습니다.

HEX 입력 필드

이 입력 필드는 모든 웹 색상 형식을 지원하므로 HTML 색상 값을 입력할 수 있습니다. 모든 값은 HEX로 변환됩니다. HEX 코드 및 웹 색상 형식에 대해 자세히 알아보세요.

HSB 및 RGB 입력

HEX 입력 필드 옆에는 "HSB"라고 표시된 3개의 입력 필드가 있습니다. 라벨을 클릭하면 “RGB”로 전환됩니다. 되돌리려면 라벨을 다시 클릭하세요.

"H"는 색상을 나타냅니다. 사용하여 색조를 조정하면 색조 슬라이더, "H"로 표시된 필드의 값이 업데이트됩니다. "S"는 채도를 나타내고 "B"는 밝기를 나타냅니다. 이 값은 선택기를 이동하면 변경됩니다. 컬러 평면. 사용하려는 색상의 HSB 값을 알고 있는 경우 해당 필드에 값을 입력할 수 있습니다.

색상의 RGB 값을 알고 있는 경우 HSB 라벨을 클릭하고 빨간색 "R", 녹색 "G" 및 파란색 "B" 값을 입력합니다. 이 필드는 색상을 선택하는 데 사용된 도구에 관계없이 자동으로 올바른 값을 표시합니다.

“A” 또는 Alpha 입력 필드

"A"는 알파 채널을 나타냅니다. 알파 채널은 색상의 투명도를 결정합니다. 이 값은 다음의 영향을 받습니다. 투명도 슬라이더. 알파 값의 범위는 0에서 100% 사이입니다. 색상의 알파 값을 알고 있는 경우 100을 곱하여 이 입력 필드에 입력하세요.

더 발견하다

• 색상 형식 HEX, RGB 및 RGBA
• HTML 색상 이름