브라우져에서 실행하는 색상표 Color Picker

게시자: 대문 demun 카테고리: Design 2011.12.07 06:00
저의 경우는 스킨을 만지고 html 관련일을 많이 하다보니 색상에 대해서 많이 다룰때가 있습니다.
그중에서도 요즘에는 CSS3에 대해서 많이 공부하며 시험봅니다.

CSS3에는 색상을 선택할때 rgb로 하는것이 좋습니다. 물론 hex 로 해도 되지만 rgb로 하면 불투명도를 선택할 수 있는 장점이 있고, 색상또한더 잘 지원한다는 글을 본적이 있습니다.
그래서 저도 간단한것을 제외하고는 rgb를 사용하려고 합니다.

사설은 잠시 접고 여하튼 css를 사용하다보면 rgb코드를 자주 접해야하는데 그때마다 프로그램을 가동합니다.
더군다나  아래처럼 3가지가 다 필요할때도 있고 아닐때도 있지요.

 
여하는 저의 경우는 rgb 와 hex 코드가 필요합니다. hex는 많이 다뤄서 잘 아는데 rgb 는 잘 몰라 색상을 보면서 해야합니다.
그런데 요걸 간편하게 실행하는 방법이 없을까하다가 찾게 된것이 자바스크립트를 이용한 색상선택기 입니다.
Color Picker 을 보시면 자바스크립트로 된 색상선택기가 11가지 종류가 있습니다.

물론 찾아보면 더 많이 있을겁니다. 
위 링크를 보고 적당한것을 찾아서 사용하시면 됩니다.

그중에서 제가 하나 선택해서 사용하는 것을 소개합니다.
기존의 것은 아래 링크에서 다운로드나 미리보기를 할 수 있습니다.
다운로드 =>  http://www.htmldrive.net/items/show/523/jQuery-Color-Picker


제가 이걸 선택한 이유는 현제 jQuery 를 사용하고 있다는 점.
3가지 코드를 한번에 다 볼수 있다는 점.
용량(44.2kb)이 작다는 점입니다.

위 이미지를 보시면 저런 형식으로 나와있고 데모를 보시면 아래처럼 불필요한 곳이 있습니다.

 
그래서 저는 그냥 불필요한것을 제거하고, 일렬로 배치했습니다.
또한 북마크에 index파일을 링크시켜 버벅이지 않고 크롬이 실행한동안에는 원클릭으로 바로 실행이 됩니다. 

 
뭘 사용하는지는 사용자의 몫입니다.
프로그램을 사용하던, 색상표가 있는 웹페이지를 사용하던지, 저처럼 자바스크립트로 가동되는 색상표를 사용하던지....
간단하고 필요한것이 있는것이 좋다고 생각합니다. 

업데이트 합니다.
위에서 제가 말한 색상표가 레이아웃이 살짝 어긋납니다. 그래서 아래것으로 수정해서 사용합니다.

 
기타 필요없는 것은 모두 html 에서 제거하고, 커서에 포이트를 넣었습니다. 
신고

댓글