시간 낭비 없이 HTML 색상 코드 온라인에서 찾는 2가지 방법
블로그에 쓸 이미지를 만들다가 문득 마음에 드는 색을 발견했습니다. 그런데 그 색깔을 포토샵에 적용하려니 HTML 색상 코드를 몰라 난감했죠. 저처럼 막막한 경험을 하신 분들을 위해, 별도의 프로그램 설치 없이 컬러 코드를 바로 찾아주는 온라인 컬러 피커 두 곳을 소개해 드리려고 합니다.
1. 파인 툴즈 – 온라인 이미지 컬러 피커
첫 번째는 ‘파인 툴즈’의 온라인 이미지 컬러 피커(https://pinetools.com/image-color-picker)입니다.
이 사이트는 직관적인 인터페이스 덕분에 처음 사용했을 때도 쉽게 금방 익혀서 쓸 수 있었습니다. 사진처럼 ‘파일 선택’ 버튼을 눌러 이미지를 업로드하신 후, 원하는 색상을 클릭하시면 바로 컬러 코드가 표시됩니다. 아래 팔레트 부분에 보이는 숫자가 해당 색상의 컬러 코드입니다. 예를 들어, 붕어빵 머리 부분의 html 색상 코드는 #d5802e입니다.
덕분에 파일 업로드 후 곧바로 색을 추출할 수 있어 빠르고 편리한 것이 가장 큰 장점입니다. 하지만 이미지를 직접 올려야 하며, 웹사이트 주소로 색을 찾는 기능은 없다는 점이 아쉽습니다.
2. 이미지 컬러피커 닷컴
두 번째는 이름 그대로 ‘이미지컬러피커닷컴’(https://imagecolorpicker.com/)입니다.
이곳 역시 이미지를 올린 후 원하는 부분을 클릭하면 색상 코드를 확인할 수 있습니다. 예를 들어, 하루페이퍼의 로고 색상 중 하나를 쉽게 알아낼 수 있습니다.
이 사이트의 독특한 점은 웹사이트 주소만으로도 색상을 알아낼 수 있다는 것입니다. 다른 웹사이트에서 사용된 색상이 마음에 들어 사용하고 싶을 때 유용합니다. 특히 전문 디자이너가 작업한 대형 사이트의 색상은 검증된 색상인 경우가 많아 더욱 편리합니다.
다만, 주소를 입력하는 방식은 이미지를 직접 올리는 것보다 시간이 더 걸릴 수 있습니다. 이럴 때는 원하는 부분만 화면 캡처하여 이미지를 업로드하는 것이 훨씬 빠르다는 저만의 팁을 발견했습니다.
3. 두 사이트의 장단점 요약
파인 툴즈는 직관적인 인터페이스 덕분에 처음 사용하시는 분들도 쉽게 익힐 수 있었습니다. 하지만 웹 주소로 색을 찾는 기능이 없어 아쉬웠죠. 반면 이미지컬러피커닷컴은 주소로도 색을 찾을 수 있다는 점이 정말 유용했습니다. 다만, 웹 주소를 입력하면 이미지를 불러오는 데 시간이 좀 걸리는데, 이때는 원하는 부분만 캡처해서 이미지를 올리면 훨씬 빠릅니다.
파인 툴즈 (Pine Tools)
- 장점: 사용법이 직관적이고 간단하여 초보자도 쉽게 이용할 수 있습니다.
- 단점: 웹 주소로 색을 찾는 기능이 없어 이미지를 반드시 올려야 합니다.
이미지 컬러피커닷컴 (Imagecolorpicker.com)
- 장점: 웹 주소만으로도 색상 추출이 가능해 편리합니다.
- 단점: 주소 입력 시 로딩 시간이 다소 길 수 있습니다.
- 팁 : 원하는 부분만 화면 캡처하여 이미지를 업로드하는 것이 훨씬 빠름.
지난번 이미지 작업 시 필요해서 찾게 된 두 곳의 온라인 컬러 피커 덕분에 작업이 훨씬 수월해졌습니다. 블로그를 운영하면서 느끼는 재미있는 점 중 하나는, 제가 아는 사소한 정보가 다른 분들에게는 유용한 팁이 될 수 있다는 것입니다.
별것 아니라고 생각했던 이 작은 정보가 제 이미지 작업 시간을 크게 줄여주었습니다. 저처럼 블로그를 운영하거나 디자인 작업을 하시는 분들에게도 꼭 필요한 정보라고 생각했어요. 제가 알게 된 유용한 팁을 나누는 것이, 제가 그동안 온라인에서 받은 도움에 보답하는 길이라 생각하며 이 글을 씁니다. 부디 여러분의 작업에도 도움이 되기를 바랍니다.
함께 읽으면 좋은 글
파트너스 활동으로 소정의 수수료를 제공받을 수 있습니다.
