컬러 피커: 브라우저에서 11가지 색상 형식 가져오기
기본 피커로 색상을 선택하거나, 지원되는 경우 화면 스포이트를 사용하세요. 컬러 피커는 선택한 색상을 hex, RGB, HSL, HSV, HWB, CMYK, LAB, LCH, OKLab을 포함한 11가지 형식으로 보여 줍니다. 원하는 형식을 한 번의 클릭으로 복사하고, 값 옆에 가장 가까운 CSS 색상 이름도 확인하세요.
컬러 피커는 색상을 선택하고 11가지 형식을 한 번에 볼 수 있는 브라우저 기반 도구입니다. 기본 피커로 색상을 선택하거나, 지원되는 경우 화면 스포이트를 사용하세요. 가장 가까운 CSS 색상 이름도 표시하므로, 숫자 및 코드 값 옆에 알아보기 쉬운 이름을 함께 검토할 수 있습니다.
색상을 선택하면 컬러 피커가 hex, RGB, HSL, HSV, HWB, CMYK, LAB, LCH, OKLab을 포함한 표현들을 표시합니다. 형식 문자열을 클릭하면 작업에 붙여넣을 수 있도록 복사됩니다. 피커가 형식들을 함께 보여 주므로 손으로 변환하지 않고도 값을 비교하기 쉽습니다. 가장 가까운 CSS 색상 이름은 참고용으로 표시되며, 가장 근접한 이름일 뿐 반드시 정확히 일치하는 것은 아닙니다.
이 형식들은 색상을 서로 다른 방식으로 기술합니다. hex와 RGB는 코드화된 또는 숫자 채널 값으로 색상을 표현하고, HSL과 HSV는 색상(hue) 기반 모델을 사용하며, LAB, LCH, OKLab은 색상을 표현하는 다른 방식을 제공합니다. 스타일시트, 디자인 레퍼런스, 문서가 특정 형식을 요구할 때 여러 표현을 갖추면 도움이 됩니다. 이 도구는 먼저 색상을 선택한 뒤 작업에 맞는 표현을 복사하게 해 줍니다.
컬러 피커는 브라우저에서 완전히 동작합니다. 입력은 사용자의 기기에서 처리되며 업로드되거나 저장되거나 서버로 전송되지 않습니다. 페이지가 로드된 후에는 연결 없이 동작하므로 오프라인에서도 사용할 수 있습니다. 색상을 선택·확인·복사해야 하는 개발자, 디자이너, 누구에게나 유용합니다.
1단계: 컬러 피커를 열고 기본 피커로 색상을 선택하세요.
2단계: 브라우저가 지원하면 화면 스포이트로 화면에서 색상을 선택하세요.
3단계: 색상이 마음에 들 때까지 조정하세요. 선택한 색상의 형식 값들이 업데이트됩니다.
4단계: 표시되는 11가지 색상 형식과 함께 가장 가까운 CSS 색상 이름을 확인하세요.
5단계: 필요한 형식 문자열을 클릭해 코드나 문서에 붙여넣을 수 있도록 복사하세요.
사용 사례: 색상 값을 추측하는 대신 대화식으로 색상을 선택한 뒤, 필요한 표현을 복사하세요.
사용 사례: 지원되는 경우 화면 스포이트로 디자인이나 문서에서 색상을 선택해 정확한 표시 값을 얻으세요.
사용 사례: 작업에 사용할 표현을 정하기 전에 같은 색상을 여러 형식으로 비교하세요.
사용 사례: 스타일시트용 hex나 RGB 값을 복사하거나, 작업에 필요하면 다른 형식 중 하나를 선택하세요.
사용 사례: 선택한 색상에 익숙한 이름이 있는지 보고 싶을 때 가장 가까운 CSS 색상 이름을 확인하세요.
사용 사례: 피커가 보여 주는 형식 사이를 손으로 변환하지 말고, 한곳에서 색상 값을 얻으세요.