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

제슬린 예

Twitter GitHub 홈페이지

소피아 에멜리아노바

GitHub

색상 선택 도구는 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() 함수 옆에 교차하는 두 개의 원()을 보여줍니다. 교집합은 결과 색상의 미리보기입니다.

계산된 값을 검사하려면 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. 색상 팔레트 전환 도구. 클릭하여 다음 중 하나를 선택할 수 있습니다.

    • 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. 가이드라인을 준수하는 추천 색상을 사용하세요.

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

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

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

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

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

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

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

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

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