웹 디자이너는 아니지만, 전 가끔 티스토리에서 제공하는 스킨의 속성을 조금씩 변경 하기도 합니다. html, css 의 틀을 바꿀 정도의 수정을 한다기 보다는 주로 폰트, 배경 등의 크기나 색상을 바꾸는 정도의 수정을요. 오늘은 컬러 추출관련 맥(MAC) 내장 프로그램 중 하나를 소개해 드리여 합니다. 프로그램 이름은 "디지털 컬러 측정기"입니다.
예전에 "컬러픽커"를 이용해서 웹페이지나 사진등에서 색상 속성을 추출 하기도 했는데, 맥에서는 비슷한 프로그램을 자체 제공하고 있습니다. 그럼 하나씩 사용법을 알아볼까요?
1. 먼저 프로그램을 실행합니다. Spotlight를 호출하고, 검색창에 "컬러"까지만 입력해도 프로그램이 보이죠? 실행합니다.
2. 디지털 컬러 측정기가 실행이 되었다면, 마우스를 원하는 색상에 위치하여 컬러속성을 확인합니다.
가) 마우스를 원하는 색상에 가져갑니다.
나) 디지털 컬러 측정기에 속성이 나타납니다. (일반 RGB 선택시 보이는 예시는 아래 붉은 박스 참고)
다) 속성 표시방법은 일반 RGB를 포함하여,
고유값으로 표시 / P3으로 표시 / sRGB로 표시 / Adobe RGB로 표시 / L*a*b*로 표시 등이 있어요.
원하는 속성표시 방법을 이용하시면 됩니다.
라) 확대사진 아래 조리개 크기를 조절해서,
주변색에 어울리는 색으로 고르거나 혹은 작은 부위의 디테일한 색상을 얻을 수도 있어요.
조리개 크기를 조절해보시면 확인하실 수 있을거에요 :D
3. 티스토리 css에서도 마찬가지고, 웹디자인에 사용하기 위해 컬러코드를 16진수로 바꿔보겠습니다,
가) 디지털 컬러 측정기 실행
나) 상부 메뉴바에서 보기 > 값 표시 > "16진수"를 선택한다.
4. 이젠 원하는 색상코드를 추출해보겠습니다. 제가 원하는 생상은 붉은색 알파벳 "O"의 색상입니다. 앞서 10진수에서 16진수로 표시되는 컬러속성을 확인하실 수 있습니다. 디지털 컬러 측정기는 추출된 색상코드를 바로 css 등 파일에 붙여 쓸 수 있도록 복사 기능을 제공하고 있습니다. 단축키는 아래 그림에서 확인하실 수 있어요.
그럼 오늘도 즐거운 하루 되시길 바라며, 포스팅을 마치겠습니다.
Good Vibes Only !!