다른 웹 페이지에서 사용한 색깔을 알아내자 – 맥 미리보기

다른 웹 페이지에서 사용한 색깔을 알아내자 - 맥 미리보기

다른 웹 페이지에서 사용한 색깔을 알아내자 – 맥 미리보기

블로그를 하다 보면 다른 웹 페이지에 사용된 이미지나 글씨의 색깔이 필요할 때가 있다. 하지만 마음에 드는 색깔을 발견했다 하더라도 색깔 이름이나 코드를 알지 못하면 무용지물. 맥의 미리보기를 사용하면 쉽게 그 코드를 알아낼 수 있다. 다른 웹 페이지에서 사용한 색깔을 알아내자 – 맥 미리보기

1. 마음에 드는 부분을 캡쳐한다

맥에서 shift+command+4를 함께 누르면 부분을 캡쳐할 수 있다.

2. 미리보기로 파일열기

캡쳐한 파일은 보통 ‘스크린샷’이라는 이름으로 바탕화면에 저장된다. 이것을 두 번 탭하면 맥의 그림판이라고 할 수 있는 미리보기로 열린다.

3. 색깔을 알아보자

1) 마크업 도구 막대 열기

미리보기에서 검색창 옆에 있는 가방그림을 탭하면 마크업 도구 막대가 열린다.

2) 색상 팔레트 열기

검색창 바로 아래에 있는 색깔지정을 위한 네모 칸을 탭한다. 색깔을 지정할 수 있는 팔레트가 나오지만, 색깔 이름이나 코드는 알 수 없다. 맨 아래 있는 ‘색상보기’를 탭한다.

여러가지 팔레트가 열린다. 가운데에 있는 팔레트를 선택하고 톱니바퀴 옆에 창에서 ‘웹 전용 색상’을 선택한다.

3) 스포이드로 콕!

맨 아래를 보면 스포이드가 있다. 스포이드를 탭해서 마음에 드는 색깔에 가져가 대보자. 돋보기 처럼 확대된다. 원하는 부분에 정확히 가져다 콕하고 찍으면 아래에 해당 색깔과 컬러코드가 나온다. 이 코드를 복사해서 사용하면 된다.


원래 이 열매맺는나무 블로그 글 본문에서 제목은 까만 색을 사용했었다. 그런데 현재 사용하고 있는 MiniMag의 특성상 강제 개행이 되지 않아 답답한 느낌이 들었다. 그러다 어느 사이트에서 지금 사용된 것과 비슷한 색을 사용한 것을 보고 마음에 들어 알아낼 방법을 궁리해보았다.

생각해 보면 정말 간단하고 쉬운 방법인데 놓치는 경우도 많은 것 같아 소개해보았습니다.

0 이 글이 마음에 드셨나요? 왼쪽 회색 하트를 눌러 빨갛게 만들어주세요. 로그인 필요 없어요. ^^
  • 김핑구야 날자

    다른 웹 페이지에서 사용한 색깔을 알아낼 수 있는 좋은 팁이네요. 잘 배우고 갑니다.

    • https://www.fruitfulife.net/ 열매맺는나무

      네, 김핑구님. 가끔 필요할 때가 있는데 생각해보니 간단하게 해결될 일이었어요. ^^

  • http://www.thewordcracker.com/ Word

    좋은 정보네요.

    맥을 사용하시는군요. 저도 맥을 하나 구입할까 고민해보았지만… 그래픽 작업이 아니면 맥에서 할 수 있는 작업으 그리 많지 않을 것 같아서 포기했습니다.ㅠㅠ

    참고로 크롬에서 개발자도구를 사용하면 더 많은 정보를 쉽게 확인이 가능합니다.ㅎㅎ

    • https://www.fruitfulife.net/ 열매맺는나무

      컴맹에 가까운 사람이 쓰기에는 맥이 더 쉽고 편합니다.
      맥북같이 조그만 화면으로는 그래픽 어려워요. ㅎㅎ
      개발자도구 쓰면 좋은데 사실 제가 까막눈이나 마찬가지 실력이라 개발에 편자네요. ^^;

      • http://www.thewordcracker.com/ Word

        근처 커피숍이 많은데, 지나가다 보면 맥북을 켜놓고 있는 분들이 간혹 눈에 띕니다. 그런데 다른 노트북을 켜놓고 있는 분들은 상대적으로 적은 것 같습니다.

        • https://www.fruitfulife.net/ 열매맺는나무

          뭐 여러 이유가 있겠지만, 다른 노트북은 제조사가 깉아도 디자인이 제각각이죠. 그에 비해 애플은 뚜껑에 사과라는 한 가지로 통일되어 있잖아요. 그래서 다른 노트북보다 더 많아 보이는 효과도 있는 것 같아요.