Atom CSS Color Viewer

Simple CSS color viewer for Atom, automatically enabled.

Thanks Adem İlter and interacthings for the idea :)

Install:

apm install webbox-color

It shows the colors of the CSS colors in all the color formats HEX, Short HEX, rgb and rgba

Background Filling

Show on Line End

To use line endings, disable filling:

Embedded CSS

Also you can use in HTML or embedded CSS

Customization

You can edit your styles.less to customize colors.

// ~/.atom/styles.less
.editor {
  .color-box {

    // Customize Line Endings
    &.on-line-end {
      border-radius: 2px 5px;
      margin-left: 1px;
      border: 1px solid #fff;
      background-image: -webkit-linear-gradient(
        top,
        transparent 0%,
        rgb(200, 200, 200) 100%);
    }

    // Customize Background Mode
    &.on-background {
      border-radius: 0;
      text-shadow: none;
      box-shadow: 0 0 5px 2px #fff;
      border: 1px solid #000;
    }
  }
}

When you apply these settings, you'll see something like that:

Change Log

2015-03-04

Atom API deprication fixed by gmoore-sjcorg

2015-01-04

less/sass support added (fixed issue #5, thanx 2 khuongduybui)
package name changed to: webbox-color

kebot / atom-color