Previewer: Color

Previewer for CSS colors.

How to use

You don't need to do anything. With this plugin loaded, a previewer will appear on hovering the color values in code blocks.

This plugin is compatible with CSS, Markup attributes, Less, Sass, Scss and Stylus.

Examples

CSS

div {
	color: rgba(255, 0, 0, 0.2);
	background: purple;
	border: 1px solid hsl(100,70%,40%);
}

Markup attributes

<table bgcolor="#6E5494">
<tr style="background: lightblue;">

Less

@nice-blue: #5B83AD;
#header a {
	color: hsla(102, 53%, 42%, 0.4);
}

Sass

$color: blue
@mixin foobar
    color: rgba(147, 32, 34, 0.8)
.foo
    color: pink

Scss

$color: blue;
$attr: background;
.foo {
    #{$attr}-color: rgba(255,255,0,0.75);
}

Stylus

color = olive
.foo
	color: #000