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

Jecelyn Yeen

Sofia Emelianova

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

핵심사항: 이 동영상에서는 112보다 이전 버전의 Chrome DevTools를 보여줍니다. 이후 버전에서는 스타일 창이 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 palette
    • 맞춤 팔레트입니다. 현재 색상을 이 팔레트에 수동으로 추가하려면 아이콘을 클릭합니다.
    • 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. 가이드라인을 준수하는 추천 색상을 사용하세요.

   • 가이드라인 옆에 있는 를 클릭합니다.
   • 상단의 Shades 미리보기에서 해당 선 아래에 있는 Color circle를 드래그합니다.

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

을 선택합니다.

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

아이드롭퍼로 어디서나 색상 샘플링하기

스포이트를 사용하면 페이지와 화면 어디서나 색상을 샘플링할 수 있습니다.

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

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

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

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