텍스트 에디터 Atom(아톰) 패키지 추천(color-picker)

color picker

구글 확장프로그램이나 기타 응용프로그램에서 자주 사용되는 color picker입니다. 꽤나 유용한 소프트웨어죠 !

원하는 색상이 있으면, 찍어서 색상코드를 볼 수 있는 소프트웨어입니다.

그 기능을 Atom에서도 사용하게 도와주는 패키지가 있는데요.

바로 아래처럼 색상을 바로 뽑아볼 수 있습니다.

Preview

매우 편리한 기능이죠?

설치법

아래는 color picker 명세입니다.

A Color Picker for Atom

Right click and select Color Picker, or hit CMD-SHIFT-C/CTRL-ALT-C to open it. Currently reads HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and VEC4 colors – and is able to convert between the formats.

It also inspects Sass and LESS color variables. Just open the Color Picker with the cursor at a variable and it'll look up the definition for you. From there, you can click the definition and go directly to where it's defined.

Preview

Settings

Open Atom Settings, go to Packages in the left hand sidebar, and press Settings on color-picker to open the list of settings available for the Color Picker.

• Abbreviate Color Values: If possible, abbreviate color values, like for example “0.3” to “.3”, “#ffffff” to “#fff” and “rgb(0, 0, 0)” to “rgb(0,0,0)”.
• Automatically Replace Color: Replace selected color automatically on change. Works well with as-you-type CSS reloaders.
• Preferred Color Format: On open, the Color Picker will show a color in this format.
• Serve a random color on open: If the Color Picker doesn't get an input color, it serves a completely random color.
• Trigger key: Decide what trigger key should open the Color Picker. CMD-SHIFT-{TRIGGER_KEY} and CTRL-ALT-{TRIGGER_KEY}. Requires a restart.
• Uppercase Color Values: If sensible, uppercase the color value. For example, “#aaa” becomes “#AAA”.

To do

• Selectable list of the current project color variables

번외편

혹시 크롬 확장자 도구 중에 Color picker를 모르시는 분을 위해 소개하도록 하겠습니다.

구글 웹스토어를 들어가셔서 검색에 color picker를 작성합니다.

그럼 위와 같이 여러가지 애플리케이션이 나오는데요.

이 중에서 ColorZilla를 사용하도록 하겠습니다.

브라우저에 추가하도록 합니다.

오른쪽 상단을 보면, 펜같은 모양을 볼 수 있는데요. 이걸 클릭하면

이렇게 색상을 뽑을 수 있는 도구가 생김을 볼 수 있습니다.

원하는 색상을 찍으면 자동으로 색상이 복사가 되는데요. Ctrl + v 를 해보면 방금 전에 찍었던 색상이 복사됐음을 확인할 수 있습니다.

이렇게 웹 디자이너나 웹 퍼블리셔 분들이 원하는 색상을 뽑아내고 싶을 때 유용하게 사용할 수 있는 기능을 소개해봤습니다.