CSS colors

Colors 작용

아래의 색상 구문 변환기는 현재 선택된 색상의 값을 빨강-초록-파랑 (RGB), 16진수 (HEX), 색상, 채도, 명도 (HSL), 그리고 색상, 백색, 검은색 (HWB) CSS 색상 형식으로 표시합니다. 이 모든 RGB, HEX, HSL 그리고 HWB 색상 값들은 다르게 표기되었으나, 동일한 색상 값을 나타냅니다.

색상 선택기 로 색상을 선택하고 슬라이더 로 투명도를 선택하면 RGB, HEX, HSL 및 HWB 값들이 업데이트됩니다. 새로운 색상이나 투명도 값을 선택하면, 배경의 색상과 슬라이더의 색상이 각각 background-color 과 accent-color CSS 속성을 통해 업데이트됩니다.

이 색상 구문 변환기의 코드를 보려면, GitHub 에서 소스 보기 를 클릭하세요.

참고서

속성

• color
• opacity

@규칙과 설명자

• @color-profile
  • components descriptor
  • rendering-intent descriptor
  • src descriptor

함수

• 절대 색상 함수:
  • rgb() 별칭 rgba()
  • hsl() 별칭 hsla()
  • hwb()
  • lab()
  • lch()
  • oklab()
  • oklch()
  • color()
• color-contrast() Experimental
• color-mix()

자료형

• <color>
• <color-function>
• <hex-color>
• <named-color>
• <alpha-value>
• <hue>
• <system-color>
• <colorspace-params>

용어 사전과 키워드

• color space
• currentcolor
• transparent

인터페이스

• CSSColorProfileRule Experimental

안내서

CSS를 사용하여 HTML 요소에 색상 적용하기

CSS를 사용하여 <color>를 값으로 허용하는 모든 CSS 속성을 포함하여 다양한 유형의 콘텐츠에 색상을 적용하는 방법에 대한 안내서입니다.

CSS 색상 값

CSS에서 사용할 수 있는 색상 공간 및 다양한 <color> 기능 표기법에 대한 개요입니다.

색상을 현명하게 사용하기

색상 이론 및 자료, 접근 가능한 색상 팔레트, 대비 및 색상 인쇄에 적합한 색상을 찾는 방법을 포함합니다.

상대적인 색상 사용

이 문서는 상대적인 CSS 색상 구문을 설명하며, 각 옵션의 차이를 보여주고, 몇 가지 예시를 살펴봅니다.

색상과 휘도 이해하기

색상 인식 및 불감증 (색맹) 사용자, 시력 저하 및 전정 또는 기타 신경학적 장애를 가진 사용자를 위해 색상을 인지하고 사용하는 것에 대한 문서입니다.

WCAG 1.4.1: 색상 대비

가독성을 보장하기 위한 배경과 전경 컨텐츠 간의 대비 요구 사항에 대한 설명입니다.

관련 개념

• 다른 명세서의 일부인 CSS 속성들:
  • accent-color
  • background-color
  • background-image
  • border-color
  • box-shadow
  • caret-color
  • color
  • color-scheme
  • column-rule-color
  • outline-color
  • scrollbar-color
  • text-decoration-color
  • text-emphasis-color
  • text-shadow
  • -webkit-tap-highlight-color
• 다른 명세서의 일부인 SVG 색상 속성들:
  • fill
  • flood-color
  • lighting-color
  • stop-color
  • stroke
• SVG color 속성
• Color wheel 용어 사전
• Interpolation 용어 사전
• @font-palette-values @규칙 override-colors 설명자
• @color-profile @규칙
• color-gamut @미디어 규칙
• forced-colors @미디어 규칙

명세서

같이 보기

• CSS 색상 조정 모듈과 print-color-adjust 속성.
• CSS 이미지, CSS <gradient> 이미지가 정의되어 있는 곳의 모듈
• VideoColorSpace 인터페이스
• SVG <feColorMatrix> 요소
• Canvas API: 스타일과 색상 적용
• 색상 선택 도구: 이 도구는 사용자 정의 색상을 만들고, 조정하고 실험하는 것을 쉽게 만들어줍니다.