색상 선택 도구를 사용하여 HD 및 HD가 아닌 색상 검사 및 디버그

Jecelyn Yeen

Sofia Emelianova

색상 선택 도구는 color 및 *-color 선언 변경을 위한 GUI를 제공하며, 클릭 한 번으로 HD가 아닌 색상과 HD 색상을 생성, 변환, 디버그할 수 있습니다.

핵심사항: 이 동영상에서는 Chrome DevTools 버전 112 미만을 보여줍니다. 이후 버전의 Styles 창에서는 CSS 색상 수준 4 사양의 새로운 12가지 색상 공간과 7개의 새로운 색 영역, CSS 색상 수준 5의 color-mix() 함수를 지원합니다.

새로운 색상 공간에 대한 자세한 내용은 고화질 CSS 색상 가이드를 참조하세요.

색상 선택 도구를 열고 색상 변경

색상 선택 도구를 사용하면 클릭 한 번으로 색상 값을 변경할 수 있습니다.

1. 요소 패널에서 요소를 선택합니다.

2. Styles 창에서 변경하려는 color 또는 *-color 선언을 찾습니다.

   각 color 또는 *-color 값 왼쪽에는 해당 색상의 미리보기가 포함된 작은 정사각형 아이콘이 있습니다.

   

   참고: 이 예에서는 color-mix() 함수 옆에 교차된 두 개의 원()을 표시합니다. 교차는 결과 색상의 미리보기입니다.

계산된 값을 검사하려면 Computed 창을 사용하세요.

1. 색상 옆에 있는 미리보기 정사각형을 클릭하여 색상 선택 도구를 엽니다.
2. 색상을 변경하려면 색상 선택 도구의 UI 요소를 사용합니다.

색상 선택 도구 요소

다음은 색상 선택 도구의 각 UI 요소에 관한 설명입니다.

1. 명암.
2. 스포이트. 스포이트로 어디서나 색상 샘플링을 참고하세요.
3. 클립보드에 복사. 표시 값을 클립보드에 복사합니다.
4. 표시 값. 선택한 색 공간의 인수입니다.
5. 대비율. color 값에만 사용할 수 있습니다. color와 background-color의 차이입니다.
6. 색상 팔레트. 정사각형을 클릭하여 색상을 정사각형으로 변경합니다.
7. 색 영역 경계. 이 줄은 새 색상 공간과 color() 함수에만 사용할 수 있습니다. HD 색상과 HD가 아닌 색상을 모두 생성할 수 있습니다. 이 선을 통해 HD와 HD가 아닌 동영상을 구분할 수 있습니다.
8. 색상 원. 음영에서 이 원을 드래그하여 표시 값을 변경합니다.
9. 색조 슬라이더.
10. 불투명도 슬라이더.
11. 표시 값 전환기. 드롭다운 목록에서 색상 공간을 선택합니다. 색상 변환을 참고하세요.
    참고: 또는 드롭다운 메뉴를 직접 열려면 Shift 키를 누른 상태에서 색상 값 옆에 있는 색상 미리보기 아이콘을 클릭합니다.
12. 명암비 확장. 대비 수정을 선택할 수 있는 해당 섹션이 열립니다.

13. 색상 팔레트 전환 도구. 이 버튼을 클릭하여 다음 간에 전환할 수 있습니다.

    • 머티리얼 디자인 팔레트.
    • 맞춤 팔레트 현재 색상을 이 팔레트에 수동으로 추가하려면 를 클릭합니다.
    • CSS 변수 팔레트 페이지에서 모든 맞춤 CSS 변수 (--이 추가됨)를 나열합니다.
    • 페이지 색상 팔레트 이 팔레트를 생성하기 위해 DevTools는 스타일시트에서 모든 색상을 검색합니다.

색상 공간 선택

색상 공간을 선택하려면 다음 단계를 따르세요.

1. 색상 값 옆에 있는 미리보기 아이콘을 Shift 키를 누른 상태에서 클릭합니다. 드롭다운 목록이 열립니다.

   참고: 또는 색상 선택 도구에서 표시 값 전환 도구를 클릭합니다.

   

2. 다음 색상 공간 중 하나를 선택합니다.

   • #<hex-color>
   • rgb(X X X / .X).
   • hsl(X X X / X).
   • hwb(X X X / .X).

   또는 새 스페이스 중 하나:

   • lch(X X X / .X)
   • oklch(X X X / .X)
   • lab(X X X / .X)
   • oklab(X X X / .X)

   또는 color(<color_space> X X X) 함수로 정의된 공백입니다.

색상 변환

표시 값 전환기를 사용하여 색상 공간 간에 전환하면 DevTools가 자동으로 값을 변환합니다.

주의: HD에서 비 HD로 변환할 때 DevTools는 공간에 맞게 색 영역을 자르고 경고 아이콘으로 잘린 값을 표시합니다.

아이콘 위로 마우스를 가져가면 원래 값을 볼 수 있습니다.

다음 동영상에서는 실제 전환 과정을 보여줍니다.

대비 수정

핵심 사항: 색상 선택 도구는 color 값에 대해서만 그리고 각 background-color 값을 기준으로 한 대비율을 계산합니다. 따라서 color 값에만 대비율 섹션이 있습니다.

color 선언의 대비 문제를 해결하려면 다음 안내를 따르세요.

1. color 값 옆에 있는 색상 선택 도구를 엽니다.
2. 대비율 섹션을 펼칩니다.

3. 가이드라인을 준수하는 추천 색상을 사용하세요.

   • 가이드라인 옆에 있는 를 클릭합니다.
   • 상단의 명암 미리보기에서 해당하는 선 아래로 색상 원을 드래그합니다.

참고: 기본적으로 색상 선택 도구에서는 WebAIM 가이드라인을 따르는 것이 좋습니다. 또는 APCA를 준수하는 값을 제안하도록 설정할 수도 있습니다. 설정 > 실험에서 새로운 고급 지각 대비 알고리즘 사용 설정...

을 선택합니다.

모든 대비 문제의 목록을 한 번에 확인하려면 웹사이트의 가독성 높이기 가이드를 따르세요.

스포이트로 어디서나 색상을 샘플링하세요

스포이트는 페이지와 화면의 모든 위치에서 색상을 샘플링할 수 있습니다.

화면의 아무 곳에서나 색상을 선택하려면 다음 단계를 따르세요.

1. 색상 선택 도구를 열고 다음 중 하나를 수행합니다.
   • 버튼을 클릭합니다.
   • C를 눌러 스포이트를 활성화합니다. 비활성화하려면 Esc 키를 누릅니다.
2. 스포이트가 활성화된 상태에서 타겟 색상 위로 마우스를 가져간 후 클릭하여 샘플링합니다.

참고: 스포이트는 sRGB 색공간에서만 색상을 샘플링합니다. 이 공간 외부에서 샘플링하면 스포이트가 가장 가까운 색상으로 자릅니다. 색상 변환을 참고하세요.

이 예에서 색상 선택 도구는 현재 색상 값 rgb(224 255 255 / 15%)를 표시합니다. Chrome 외부를 클릭하면 이 색상이 분홍색으로 바뀝니다.