온라인 색상 선택기 및 색상 코드 변환기

이 도구의 활용도

이 온라인 색상 선택기를 사용하면 색상을 추출하고 hex, rgb, hsl, hwb, lch, device-cmyk 및 CSS 표준 색상 이름 등의 형식으로 값을 확인할 수 있습니다. 지원되는 색상 값을 직접 입력하면 페이지가 자동으로 변환해 줍니다.

프론트엔드 개발, UI 디자인, 스크린샷 색상 추출, 브랜드 색상 확인, CSS 색상 값 정리에 유용합니다. 보이는 색상의 코드를 알고 싶거나 기존 값을 다른 CSS 표기법으로 바꿔야 할 때 이 페이지에서 한 번에 처리할 수 있습니다.

자주 쓰는 사용 사례

• 웹페이지, 스크린샷, 디자인 목업, 데스크톱 앱 또는 시스템 UI에서 픽셀 색상을 추출합니다.
• 색상을 hex, rgb, hsl, hwb, lch, cmyk처럼 프론트엔드에서 쓰기 좋은 형식으로 변환합니다.
• 문서, 디자인 메모, 코드 주석에 읽기 쉬운 이름이 필요할 때 CSS 표준 색상 이름을 확인합니다.
• 기존 색상 값이 브라우저에서 파싱되는지 확인하고 필요한 출력 형식을 복사합니다.

색상을 선택하는 방법

색상을 선택하는 방법은 두 가지입니다. 내장 색상 입력을 사용하거나, 브라우저가 EyeDropper API를 지원할 경우 스포이트 버튼을 클릭하세요. 스포이트는 이 페이지 외부의 픽셀도 추출할 수 있어, 다른 탭이나 데스크톱 앱, 디자인 목업에서 색상을 가져올 때 유용합니다.

1. 브라우저 색상 입력을 열고 시스템 색상 선택기에서 색상을 고릅니다.
2. 또는 브라우저가 허용하는 경우 스포이트 버튼을 눌러 화면에서 색상을 추출합니다.
3. 수동 입력 필드에 색상 코드나 색상 이름을 붙여 넣어 페이지가 해석하도록 할 수도 있습니다.
4. CSS, 디자인 메모, 설정 파일에 필요한 형식을 복사합니다.

지원되는 변환

변환기는 hex, rgb, hsl, hwb, lch, device-cmyk 같은 CSS 색상 형식을 지원하며, 영어 CSS 표준 색상 이름도 입력으로 받습니다.

• 일반적인 입력 예시는 #00bfff, rgb(0, 191, 255), hsl(195, 100%, 50%), hwb(195 0% 0%), lch(...), CSS 색상 이름입니다.
• 결과 목록은 여러 형식을 동시에 보여 주므로 코드베이스, 디자인 도구, 문서 요구사항 사이를 쉽게 오갈 수 있습니다.
• 색상 이름 출력은 가능한 경우 가장 가까운 CSS 표준 색상 이름입니다. 항상 정확한 디자인 토큰이라기보다 편의용 라벨로 보는 것이 좋습니다.

사용 시 유의할 점

• 스포이트 기능은 브라우저의 EyeDropper API 지원 여부에 따라 달라집니다. 사용할 수 없어도 색상 입력과 수동 입력은 계속 사용할 수 있습니다.
• 화면에서 색상을 추출하면 보통 sRGB hex 값이 반환됩니다. 디스플레이 프로파일, 배율, 브라우저 렌더링, 압축, 투명도, 안티앨리어싱 때문에 디자인 파일과 작은 차이가 날 수 있습니다.
• 브라우저 기본 색상 선택기는 운영체제와 브라우저마다 다르게 보이지만, 페이지의 변환 값은 같은 해석 흐름을 사용합니다.
• 입력에 알파 투명도가 포함되어 있다면, 알파를 보존해야 하는 대상 시스템에 사용하기 전에 출력 형식을 확인하세요.

자주 묻는 질문