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

Jecelyn Yeen

Sofia Emelianova

색상 선택 도구는 color 및 *-color 선언을 변경하는 GUI를 제공하며 클릭 한 번으로 비HD 및 HD 색상을 만들고, 변환하고, 디버그할 수 있습니다.

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

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

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

색상 선택 도구를 사용하여 클릭 한 번으로 색상 값을 변경합니다.

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

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

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

   

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

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

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

색상 선택 도구 요소

다음은 색상 선택기의 각 UI 요소에 대한 설명입니다.

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

13. 색상 팔레트 전환기 클릭하여 다음 간에 전환합니다.

    • Material Design 팔레트
    • 맞춤 팔레트 현재 색상을 이 팔레트에 수동으로 추가하려면 를 클릭합니다.
    • 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. 가이드라인을 준수하는 추천 색상을 사용합니다.

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

기본적으로 색상 선택 도구는 APCA를 준수하는 값을 제안합니다.

또는 WebAIM 가이드라인을 준수하는 값을 제안하도록 설정할 수 있습니다. 설정 > 환경설정 > 요소에서 고급 지각 대비 알고리즘 (APCA)… 체크박스를 선택 해제합니다.

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

스포이트로 어디서나 색상 샘플링

스포이트는 페이지와 화면의 어느 곳에서나 색상을 샘플링할 수 있습니다.

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

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

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

이 예에서 색상 선택기는 현재 색상 값 rgb(224 255 255 / 15%)를 보여줍니다. Chrome 외부를 클릭하면 이 색상이 분홍색으로 변경됩니다.